Làm cách nào để thêm bóng (shadow) cho đoạn text bằng css?

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ồn

Text-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ồn

Gradient 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ồn

Long 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ồn

CSS 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ồn

3D 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ồn

Inner 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ồn

Text-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ồn

CSS Shadow Effect

Kết quả bạn xem bên dưới nha.

See the Pen text-shadow by IMarty (@IMarty) on CodePen.

Nguồn

CSS3 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ồn

Hover 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ồn

Shadow 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ồn

Text 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ồn

CSS3 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ồn

Complex 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ồn

Text 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ồn

Text 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ồn

Text 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ồn

Text 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ồn

Long 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ồn

Masked 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ồn

Shadow 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ồn

3D-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ồn

Animated 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ồn

Fancy 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ồn

HTML 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ồn

CSS 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ồn

Layered 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ồn

Shadow 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ồn

CSS3 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ồn

Box 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.

Nguồn

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ồn

Smooth 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ồn

Box-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ồn

Material 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ồn

Hover 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ồn

Shadow 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ồn

Button 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ồn

Shadow 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ồn

Direction-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ồn

CSS3 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ồn

Multiple 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ồn

SCSS 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ồn

Tổ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ẻ!