Hiệu ứng bóng đổ với thuộc tính box-shadow của CSS3

Posted on by mtoplistChuyên mục:Top List

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.

test php

banquyen png

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

2018 05 18 094336 png

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

2018 05 18 094435 png

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

2018 05 18 094532 png

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

2018 05 18 094617 png

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

2018 05 18 094806 png

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

2018 05 18 094837 png

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

2018 05 18 094908 png

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/

mtoplist