Chan Canvas – Thiết Kế Logo, Website, Bộ Nhận Diện Thương Hiệu

Các ví dụ CSS Box Shadow

Thông thường, để tạo hiệu ứng đổ bóng ta thường sử dụng hình ảnh, tuy nhiên với cách này thì làm cho trang web tải chậm hơn, phải bỏ công thiết kế. Các bạn có thể sử dụng CSS để tạo bóng đổ cho khung, nút một cách đơn giản hơn với box-shadow.

Một ví dụ cơ bản

.shadow {
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}

1. Qui định đổ bóng theo chiều ngang (đơn vị px).
2. Qui định đổ bóng theo chiều dọc (đơn vị px).
3. Độ rộng của bóng đổ (đơn vị px).
4. Độ mờ của bóng đổ (đơn vị px).
5. Màu.

Kết quả

Inner Shadow

.shadow {
     -moz-box-shadow:    inset 0 0 10px #000000;
     -webkit-box-shadow: inset 0 0 10px #000000;
     box-shadow:         inset 0 0 10px #000000;
}

Kết quả

Đổ bóng trong Internet Explorer

Bạn cần thêm thẻ…

<div class="shadow1">
    <div class="content">
        Box-shadowed element
    </div>
</div>

CSS như sau:

.shadow1 {
    margin: 40px;
    background-color: rgb(68,68,68); /* Needed for IEs */

    -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}

.shadow1 .content {
    position: relative; /* This protects the inner element from being blurred */
    padding: 100px;
    background-color: #DDD;
}

Bóng đổ qua một hướng

.one-edge-shadow {
    -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 quả

Các hiệu ứng đổ bóng khác

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

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