Hiệu ứng Bóng đổ Với Thuộc Tính Box-shadow Của CSS3

Hôm nay mình sẽ chia sẻ với các bạn cách tạo hiệu ứng bóng đổ cho khung, button đơn giản bằng cách sử dụng thuộc tính box-shadow trong CSS3.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Thuộc tính box-shadow của CSS:

Cú pháp thuộc tính box-shadow gồm 4 tham số như sau:

box-shadow box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

Bài viết này được đăng tại [free tuts .net]

Trong đó:

• horizontal-offset: vị trí đổ bóng cho chiều ngang (đơn vị px)
• vertical-offset: vị trí đổ bóng cho chiều dọc (đơn vị px)
• blur-radius(không bắt buộc): độ nhòe của bóng (đơn vị px)
• spread-radius(không bắt buộc): kích thước của bóng (mặc định là 0, bóng có cùng kích thước với độ nhòe)
• color: màu của bóng

Các bạn làm theo các bước sau đây:

1. Xây dựng HTML:

Các bạn nhập đoạn mã sau vào file html.

HTML <div class="shadow"></div> <div class="shadow-right"></div> <div class="shadow-left"></div> <div class="shadow-inside"></div> <div class="one-edge-shadow"></div> <div class="shadow-inside-outside"></div> <div class="multi-shadow"></div>

Ứng với mỗi hướng đổ bóng, mình sẽ đặt trong 1 thẻ div khác nhau để dễ phân biệt.

2. Xây dựng CSS:

Mình sẽ xây dựng CSS cho từng thẻ div ở trên

Đối với hướng bóng đổ không có độ nhòe, bạn chỉ cần thiết lập độ nhòe bằng 0 hoặc bạn có thể bỏ qua không ghi giá trị cho tham số này.

shadow .shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: 3px 3px #666; -webkit-box-shadow: 3px 3px #666; box-shadow: 3px 3px #666; }

Hướng bóng đổ sang phải, các tham số đều mang giá trị dương

shadow-right .shadow-right { width: 50px; height: 50px; margin: 10px; background-color: black; -moz-box-shadow: 3px 3px 5px 0px #666; -webkit-box-shadow: 3px 3px 5px 0px #666; box-shadow: 3px 3px 5px 0px #666; }

Hướng bóng đổ sang trái, bạn chỉ cần thiết lập vị trí chiều ngang và dọc mang giá trị âm

shadow-left .shadow-left { width: 50px; height: 50px; margin: 10px; background-color: black; -moz-box-shadow: -3px -3px 5px 0px #666; -webkit-box-shadow: -3px -3px 5px 0px #666; box-shadow: -3px -3px 5px 0px #666; }

Hướng bóng vào trong, giá trị inset được dùng để đẩy bóng vào trong.

inset-shadow .inset-shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }

Hướng bóng đổ chỉ ở 1 cạnh của khung

one-edge-shadow .one-edge-shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; }

Kết hợp bóng đổ cả bên trong và bên ngoài, các bóng đổ được ngăn cách với nhau bằng dấu phảy

inset-outset-shadow .inset-outset-shadow{ width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: 3px 3px #666; -webkit-box-shadow: 3px 3px #666; box-shadow: inset 10px 10px 5px #666, 10px 10px 5px #666; }

Tạo nhiều bóng đổ

multi-shadow .multi-shadow { width: 100px; height: 50px; margin: 50px 40px; background-color: #ccc; box-shadow: 0 0 10px 4px #FF6347, 0 0 10px 30px #FFDAB9, 30px 0 20px 30px #B0E0E6; }

Tổng hợp chúng ta có bài hoàn chỉnh như sau:

CSS RUN /*Bóng đổ không có độ nhòe*/ .shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: 3px 3px #666; -webkit-box-shadow: 3px 3px #666; box-shadow: 3px 3px #666; } /*Bóng đổ sang phải*/ .shadow-right { width: 50px; height: 50px; margin: 10px; background-color: black; -moz-box-shadow: 3px 3px 5px 0px #666; -webkit-box-shadow: 3px 3px 5px 0px #666; box-shadow: 3px 3px 5px 0px #666; } /*Bóng đổ sang trái*/ .shadow-left { width: 50px; height: 50px; margin: 10px; background-color: black; -moz-box-shadow: -3px -3px 5px 0px #666; -webkit-box-shadow: -3px -3px 5px 0px #666; box-shadow: -3px -3px 5px 0px #666; } /*Bóng đổ vào trong*/ .shadow-inset { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; } /*Bóng đổ một cạnh của khung*/ .one-edge-shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; } /*Kết hợp bóng đổ cả bên trong và bên ngoài*/ .inset-outset-shadow { width: 50px; height: 50px; margin: 10px; background-color: #ccc; -moz-box-shadow: 3px 3px #666; -webkit-box-shadow: 3px 3px #666; box-shadow: inset 10px 10px 5px #666, 10px 10px 5px #666; } /*Tạo nhiều bóng đổ*/ .multi-shadow { width: 100px; height: 50px; margin: 50px 40px; background-color: #ccc; box-shadow: 0 0 10px 4px #FF6347, 0 0 10px 30px #FFDAB9, 30px 0 20px 30px #B0E0E6; }

Chúc các bạn thành công!

Nguồn: https://css-tricks.com/snippets/css/css-box-shadow/