Categories CSS

Thuộc tính box-shadow trong CSS3

 

Box-shadow là thuộc tính mới trong CSS, nằm trong phiên bản CSS3. Nó có tác dụng tạo bóng cho hộp (xem thêm mô hình hộp trong CSS).

Ví dụ:

div
{width:300px;
height:150px;
background-color:red;
box-shadow: 20px 10px;
}

Kết quả:

 

Khi sử dụng box-shadow có một số lưu ý sau:

  • Bóng là một hộp có kích thước tương tự hộp ban đầu;
  • Màu sắc mặc định của bóng là đen (mã màu: #000000);
  • box-shadow: 20px 10px; quy định độ dịch chuyển của bóng so với vị trí gốc, theo đó giá trị đầu là dịch chuyển theo chiều ngang (20px), giá trị tiếp theo là dọc (10px);

Bạn có thể đặt giá trị âm cho độ dịch chuyển, ví dụ:

div
{width:300px;
height:150px;
background-color:red;
box-shadow: 20px -10px;
}

Kết quả:

 

#1. Tạo độ mờ cho bóng

Đã là bóng thì nó thường mờ (blur) hơn vật chủ, để bổ sung độ mờ cho bóng, ta thêm giá trị nữa đằng sau, ví dụ:

div
{width:300px;
height:150px;
background-color:red;
box-shadow: 20px 10px 10px;
}

Kết quả:

 

#2. Thay đổi độ lớn của bóng

Để thay đổi độ lớn của bóng, bạn thêm tiếp giá trị vào đằng sau độ mờ, ví dụ:

div
{width:300px;
height:150px;
background-color:red;
box-shadow: 30px 20px 10px -10px;
}
 

Với giá trị -10px; kích thước bóng sẽ giảm đi 10px cả 2 chiều so với kích thước gốc, nghĩa là lúc này, bóng rộng 290px = [300px – 10px] và cao 140px = [150px – 10px];


#3. Thay đổi màu cho bóng

Để quy định màu cho bóng, bạn thêm mã màu vào (xem thêm: cách khai báo màu sắc trong CSS), nó nằm ở vị trí cuối cùng, code mẫu:

div
{width:300px;
height:150px;
background-color:red;
box-shadow: 30px 20px 10px -10px gray;
}

Kết quả là bóng sẽ có màu xám:

 

#4. Bóng đổ ngay bên trong hộp

Từ nãy đến giờ chúng ta vẫn chỉ thực hành với bóng bên ngoài hộp, nhưng bóng không phải lúc nào cũng ở bên ngoài, đôi khi ngay bên trong hộp cũng có bóng, để làm điều này, ta dùng giá trị inset:

div
{width:300px;
height:150px;
background-color:red;
box-shadow: 30px 20px 10px -10px pink inset;
}

Kết quả:

 

Một vài kết quả khác:

 

 

 

Cũng là đổ bóng, nhưng dành cho văn bản, bạn dùng thuộc tính text-shadow.


#5. Điều gì xẩy ra khi đổ bóng cho hình tròn

Ở một bài viết trước đây tôi có nói về code bo tròn ảnh – cũng bằng CSS3, giờ tôi sẽ thử đổ bóng cho bức ảnh hình tròn này xem sao.

Bóng cho đối tượng hình tròn

Như vậy là không có vấn đề gì với việc tạo bóng cho hình tròn. Nó cho kết quả tương tự như hình chữ nhật. Giờ tôi sẽ nghịch thử một chút. Tôi sẽ tạo hào quang cho bức ảnh (nói ghê vậy chứ nó cũng không giống hào quang lắm), bí quyết là ta không dịch chuyển bóng nhưng làm tăng blur của nó lên, điều đó tạo ảo giác có vật chiếu sáng đằng sau bức ảnh:

Hào quang cho ảnh

Hiệu ứng cũng khá đẹp mắt, đây là code mẫu:

<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://kiencang.net/wp-content/uploads/2021/02/cap-doi-hoan-canh.jpg" width="200px" height="200px" style="border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius: 50%; border-top-right-radius: 50%; box-shadow: blue 0px 0px 50px 0px;" title="Hào quang cho ảnh" alt="Hào quang cho ảnh"></figure></div>
  • Thay đổi giá trị 50px để điều chỉnh độ rộng của hào quang.
  • Thay đổi blue sang màu khác để đổi màu hào quang.

Liên quan đến tạo hiệu ứng cho ảnh bằng CSS, bạn có thể thích đọc hai bài viết sau:

Back to Top