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;
}
- Qui định đổ bóng theo chiều ngang (đơn vị px).
- Qui định đổ bóng theo chiều dọc (đơn vị px).
- Độ rộng của bóng đổ (đơn vị px).
- Độ mờ của bóng đổ (đơn vị px).
- 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!
Không có bình luận.