Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Hiệu ứng Shadow Cho Thiết Kế Web(2020)

Hiệu ứng Shadow Cho Thiết Kế Web(2020)


Ngày 18 Tháng 8 Năm 2020

Hiệu ứng Shadow Cho Thiết Kế Web(2020)

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é!

Sử dụng text-shadow trong 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:

<h4>Niềm Vui Lập Trình</h4>

CSS

h4{
  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:

<h4>Niềm Vui Lập Trình</h4>

CSS

 h4{
  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.

Ví Dụ 1

See the Pen Pretty shadow by Alex Moore (@MoorLex) on CodePen.

Ví Dụ 2

See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen.

Ví Dụ 3

See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.

Ví Dụ 4

See the Pen Variable Longshadow with Gradients Mixin by Dario Corsi (@dariocorsi) on CodePen.

Ví Dụ 5

See the Pen 10 CSS Text Shadows by Tommy Hodgins (@tomhodgins) on CodePen.

Ví Dụ 6

See the Pen 3D Text - version 2 by Sarah Fossheim (@fossheim) on CodePen.

Ví Dụ 7

See the Pen inner shadow text effect by Mohammed hanif (@hanifcodepen) on CodePen.

Ví Dụ 8

See the Pen CSS Dashed Shadow Type (Demo) by rob w (@rw1982) on CodePen.

Ví Dụ 9

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

Ví Dụ 10

See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.

Ví Dụ 11

See the Pen A collection of CSS text-shadow and pattern effects by Ashley Watson-Nolan (@ashleynolan) on CodePen.

Ví Dụ 12

See the Pen Text-Shadow by Mayur Elbhar (@mayurelbhar) on CodePen.

Ví Dụ 13

See the Pen Text Stroke / Text Shadow border css by Beatriz Gonzalez (@b_atish) on CodePen.

Ví Dụ 14

See the Pen CSS3 text-shadow by Tommy McDonald (@tommymcdonald) on CodePen.

Ví Dụ 15

See the Pen Complex Text Shadow Examples by Chris Coyier (@chriscoyier) on CodePen.

Ví Dụ 16

See the Pen Text Shadow Compilation by emma (@boltaway) on CodePen.

Ví Dụ 17

See the Pen Neon text-shadow effect by Erik Jung (@erikjung) on CodePen.

Ví Dụ 18

See the Pen Kerning and text-shadow by Bart Veneman (@bartveneman) on CodePen.

Ví Dụ 19

See the Pen 3D Cartoon Text w/CSS text-shadow by Fielding Johnston (@fielding) on CodePen.

Ví Dụ 20

See the Pen Super Discount by Daniel Riemer (@zitrusfrisch) on CodePen.

Sử dụng box-shadow trong 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

 <div class="noi_dung">
  <h4>Niềm Vui Lập Trình</h4>
</div>

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é!

Ví Dụ 1

See the Pen Isolating CSS Box Shadows by TundraTech (@TundraTech) on CodePen.

Ví Dụ 2

See the Pen CSS3 Box Shadows Effects by Halil İbrahim Nuroğlu (@haibnu) on CodePen.

Ví Dụ 3

See the Pen CSS Box Shadow Examples by vavik (@vavik96) on CodePen.

Ví Dụ 4

See the Pen CSS Box-Shadow Trick by Sasha (@sashatran) on CodePen.

Ví Dụ 5

See the Pen smooth box-shadow by Chris Coyier (@chriscoyier) on CodePen.

Ví Dụ 6

See the Pen box-shadow border by Derek Fogge (@PositionRelativ) on CodePen.

Ví Dụ 7

See the Pen Material Design Box Shadows by Samuel Thornton (@sdthornton) on CodePen.

Ví Dụ 8

See the Pen Hover box shadow by Joey Lea (@ovdojoey) on CodePen.

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

Load WooCommerce Stores in 249ms!