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.

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: horizontal-offset vertical-offset blur-radius spread-radius color;

Bài viết này được đăng tại [kiso.vn]

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.

<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 {
    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 {
    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 {
    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 {
    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 {
    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{
    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;
}

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

/*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/