Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách sử dụng hiệu ứng shadow cho nội dung hay các phần tử trong trang web để làm đẹp website của bạn hơn bằng một số thuộc tính quen thuộc trong CSS như là text-shadow, box-shadow... Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!
Shadow Text CSS
Text Shadow có nhiệm vụ tạo ra đổ bóng cho chữ giúp bạn làm nổi bật nội dung cũng như gây sự chú ý ngay tức thì đối với người dùng khi sử dụng trang web. Bây giờ chúng ta sẽ đi vào công thức tổng quát của nó nhé:
text-shadow: [Khoảng cách chiều ngang] [Khoảng cách chiều dọc] [độ mờ] [màu sắc của shadow]
Và để giúp bạn dễ hình dung thì chúng ta sẽ đi vào thực hành một ví dụ nhỏ nhé!
HTML:
Niềm Vui Lập Trình
CSS
h3{
color: DodgerBlue;
text-shadow: 1px 2px 3px Indigo;
font-size:50px;
}
Và kết quả bạn xem bên dưới nhé:
See the Pen vi du ve text shadow by haycuoilennao19 [@haycuoilennao19] on CodePen.
Ngoài ra bạn cũng có thể kết hợp nhiều hiệu ứng shadow trong thuộc tính text-shadow
bằng việc sử dụng dấu phẩy để ngăn cách chúng. Bây giờ chúng ta sẽ đi vào cách tạo nhiều hiệu ứng shadow cho chữ nhé:
HTML:
Niềm Vui Lập Trình
CSS
h3{
color: DodgerBlue;
text-shadow: 6px 6px 5px Indigo, 3px 3px 4px Indigo;
font-size:50px;
}
Và kết quả bạn xem bên dưới nhé:
See the Pen Ket hop nhieu hieu ung shadow by haycuoilennao19 [@haycuoilennao19] on CodePen.
Như bạn thấy thì chúng ta có thể dễ dàng tạo ra hiệu ứng shadow cho nội dung trong website. Tuy nhiên để có được một hiệu ứng đổ bóng đẹp thì cần phải kết hợp nhiều thứ lại với nhau màu sắc, độ mờ, độ hài hòa giữa các shadow với nhau... Do đó phần tiếp theo chúng ta sẽ cùng nhau đi vào tìm hiểu cách các bạn lập trình viên thiết kế và tạo ra hiệu ứng text shadow đẹp mắt cho trang web thông qua ví dụ và đoạn mã cụ thể nhé!
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Shadow CSS
Kết quả bạn xem bên dưới nha.
See the Pen Pretty shadow by Alex Moore [@MoorLex] on CodePen.
NguồnText-Shadow HTML
Kết quả bạn xem bên dưới nha.
See the Pen Awesome Text-Shadow by Nguyen Hoang Nam [@namho] on CodePen.
NguồnGradient Text Shadow
Kết quả bạn xem bên dưới nha.
See the Pen Long Shadow Gradient Mixin by roikles [@roikles] on CodePen.
NguồnLong Shadow Gradient CSS
Kết quả bạn xem bên dưới nha.
See the Pen Variable Longshadow with Gradients Mixin by Dario Corsi [@dariocorsi] on CodePen.
NguồnCSS Text Shadows
Kết quả bạn xem bên dưới nha.
See the Pen 10 CSS Text Shadows by Tommy Hodgins [@tomhodgins] on CodePen.
Nguồn3D Text Shadow CSS
Kết quả bạn xem bên dưới nha.
See the Pen 3D Text - version 2 by Sarah Fossheim [@fossheim] on CodePen.
NguồnInner Shadow Text Effect
Kết quả bạn xem bên dưới nha.
See the Pen inner shadow text effect by Mohammed hanif [@hanifcodepen] on CodePen.
NguồnText-Shadow CSS Example
Kết quả bạn xem bên dưới nha.
See the Pen CSS Dashed Shadow Type [Demo] by rob w [@rw1982] on CodePen.
NguồnCSS Shadow Effect
Kết quả bạn xem bên dưới nha.
See the Pen text-shadow by IMarty [@IMarty] on CodePen.
NguồnCSS3 Text-shadow Effects
Kết quả bạn xem bên dưới nha.
See the Pen CSS3 text-shadow effects by Jorge Epuñan [@juanbrujo] on CodePen.
NguồnHover Shadow Effects
Kết quả bạn xem bên dưới nha.
See the Pen A collection of CSS text-shadow and pattern effects by Ashley Watson-Nolan [@ashleynolan] on CodePen.
NguồnShadow CSS Text
Kết quả bạn xem bên dưới nha.
See the Pen Text-Shadow by Mayur Elbhar [@mayurelbhar] on CodePen.
NguồnText Shadow Border CSS
Kết quả bạn xem bên dưới nha.
See the Pen Text Stroke / Text Shadow border css by Beatriz Gonzalez [@b_atish] on CodePen.
NguồnCSS3 text-shadow
Kết quả bạn xem bên dưới nha.
See the Pen CSS3 text-shadow by Tommy McDonald [@tommymcdonald] on CodePen.
NguồnComplex Text Shadow
Kết quả bạn xem bên dưới nha.
See the Pen Complex Text Shadow Examples by Chris Coyier [@chriscoyier] on CodePen.
NguồnText Shadow Compilation CSS
Kết quả bạn xem bên dưới nha.
See the Pen Text Shadow Compilation by emma [@boltaway] on CodePen.
NguồnText Shadow Javascript
Kết quả bạn xem bên dưới nha.
See the Pen Kerning and text-shadow by Bart Veneman [@bartveneman] on CodePen.
NguồnText Shadow 3D Effect CSS
Kết quả bạn xem bên dưới nha.
See the Pen 3D Cartoon Text w/CSS text-shadow by Fielding Johnston [@fielding] on CodePen.
NguồnText Shadow HTML CSS
Kết quả bạn xem bên dưới nha.
See the Pen Super Discount by Daniel Riemer [@zitrusfrisch] on CodePen.
NguồnLong shadow generator
Kết quả bạn xem bên dưới nha.
See the Pen Long shadow generator by Max Kohler [@maxakohler] on CodePen.
NguồnMasked Text-Shadow
Kết quả bạn xem bên dưới nha.
See the Pen Masked Text-Shadow by Daniel Riemer [@zitrusfrisch] on CodePen.
NguồnShadow Mixin
Kết quả bạn xem bên dưới nha.
See the Pen Shade - Shadow Mixin by Hugo Darby-Brown [@hugo] on CodePen.
Nguồn3D-Text with Text-Shadow
Kết quả bạn xem bên dưới nha.
See the Pen 3D-Text with Text-Shadow by Daniel Riemer [@zitrusfrisch] on CodePen.
NguồnAnimated Text-Shadow
Kết quả bạn xem bên dưới nha.
See the Pen Animated Text-Shadow by Erin E. Sullivan [@erinesullivan] on CodePen.
NguồnFancy text shadow
Kết quả bạn xem bên dưới nha.
See the Pen Fancy text shadow by agathaco [@agathaco] on CodePen.
NguồnHTML Text-Shadow
Kết quả bạn xem bên dưới nha.
See the Pen CSS Text Shadow by Chris Eisenbraun [@chriseisenbraun] on CodePen.
NguồnCSS Text-Shadow Example
Kết quả bạn xem bên dưới nha.
See the Pen Milky Font Effect by Jorge Epuñan [@juanbrujo] on CodePen.
NguồnLayered text-shadow effect CSS
Kết quả bạn xem bên dưới nha.
See the Pen Layered text-shadow effect CSS by Shireen Taj [@TajShireen] on CodePen.
NguồnShadow Box CSS
Đây cũng là một thuộc tính giúp bạn có thể tạo ra hiệu ứng đổ bóng cho những thành phần trong trang web như là card product, hình ảnh... Nó sẽ được viết theo công thức tổng quát là:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
Ở đây mình xin giải thích một tý là:
- horizontal offset: Độ lệch ngang của đổ bóng
- horizontal offset: Độ lệch dọc của đổ bóng
- blur radius : Độ mờ của đổ bóng
- spread radius : Nếu giá trị của thuộc tính này lơn hơn 0 thì sẽ tăng kích thước đổ bóng còn ngược lại sẽ giảm kích thước.[Bạn có thể lựa chọn dùng hay loại bỏ yếu tố này nhé]
- color: Màu sắc của đổ bóng
Và để dễ hình dung hơn chúng ta sẽ đi vào ví dụ nhỏ sau đây nhé!
HTML
Niềm Vui Lập Trình
CSS
body {
display: flex;
align-items: center;
justify-content: center;
}
.noi_dung{
margin-top:20px;
padding: 10px;
border: 0.5px solid #1c87c9;
border-radius: 20px;
line-height: 4em;
font-size: 25px;
box-shadow: 0 0 18px 0 #1c87c9;
}
Và kết quả cuối cùng bạn xem dưới đây nhé:
See the Pen vi du box shadow by haycuoilennao19 [@haycuoilennao19] on CodePen.
Tiếp theo đây chúng ta sẽ đi vào các ví dụ khác để tìm hiểu cách các bạn lập trình viên tạo ra hiệu ứng box shadow đẹp mắt cho trang web nhé!
CSS Box Shadows
Kết quả bạn xem bên dưới nha.
See the Pen Isolating CSS Box Shadows by TundraTech [@TundraTech] on CodePen.
NguồnCSS3 Box Shadows Effects
Kết quả bạn xem bên dưới nha.
See the Pen CSS3 Box Shadows Effects by Halil İbrahim Nuroğlu [@haibnu] on CodePen.
NguồnBox Shadow Beautiful
Kết quả bạn xem bên dưới nha.
See the Pen CSS Box Shadow Examples by vavik [@vavik96] on CodePen.
CSS Box-Shadow Trick
Kết quả bạn xem bên dưới nha.
See the Pen CSS Box-Shadow Trick by Sasha [@sashatran] on CodePen.
NguồnSmooth Box-shadow
Kết quả bạn xem bên dưới nha.
See the Pen smooth box-shadow by Chris Coyier [@chriscoyier] on CodePen.
NguồnBox-shadow Border
Kết quả bạn xem bên dưới nha.
See the Pen box-shadow border by Derek Fogge [@PositionRelativ] on CodePen.
NguồnMaterial Design Box Shadows
Kết quả bạn xem bên dưới nha.
See the Pen Material Design Box Shadows by Samuel Thornton [@sdthornton] on CodePen.
NguồnHover box shadow
Kết quả bạn xem bên dưới nha.
See the Pen Hover box shadow by Joey Lea [@ovdojoey] on CodePen.
NguồnShadow CSS Div
Kết quả bạn xem bên dưới nha.
See the Pen Diffused shadow by Misha Heesakkers [@MishaHahaha] on CodePen.
NguồnButton with gradient shadow
Kết quả bạn xem bên dưới nha.
See the Pen Button with gradient shadow by Mohsen Khakbiz [@Mohsen-Khakbiz] on CodePen.
NguồnShadow visualization
Kết quả bạn xem bên dưới nha.
See the Pen Cast shadow visualization by Scott Kennedy [@scottyzen] on CodePen.
NguồnDirection-aware shadow with ES6
Kết quả bạn xem bên dưới nha.
See the Pen direction-aware shadow with ES6 by Mert Cukuren [@knyttneve] on CodePen.
NguồnCSS3 Box Shadow styles
Kết quả bạn xem bên dưới nha.
See the Pen CSS3 Box Shadow styles by Steve Melcher [@xixao] on CodePen.
NguồnMultiple Shadows
Kết quả bạn xem bên dưới nha.
See the Pen Multiple Shadows by Andrew Spencer [@iam_aspencer] on CodePen.
NguồnSCSS 3D-Shadow Functions
Kết quả bạn xem bên dưới nha.
See the Pen SCSS 3D-Shadow Functions by Kyle Wagner [@Keale2] on CodePen.
NguồnTổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu ứng shadow hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!