Nắm vững CSS Box Shadow

Hiệu ứng bóng đổ đã được mình giới thiệu trong các bài viết trước, tuy nhiên, trong bài viết này, mình sẽ hướng dẫn cụ thể hơn về thuộc tính bóng đổ, các bạn thử xem sao nhá. Đầu tiên chúng ta thử tìm hiểu đoạn css sau :

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

Mình xin giải thích các tham số như sau :
– 1 The horizontal offset : vị trí này nghĩa là hiệu ứng bóng đổ sẽ nằm ở bên phải của đối tượng, nếu bạn đặt giá trị âm thì hiệu ứng sẽ nằm bên trái.
– 2 The vertical offset : vị trí này nghĩa là hiệu ứng bóng đổ sẽ nằm ở phái dưới đối tượng nếu giá trị là dương, và bên trên nếu giá trị là âm
– 3 The blur radius (optional) : Đây là vị trí cho hiệu ứng bóng mờ, giá trị càng cao thì hiệu ứng bóng đổ càng mờ.
– 4 The spread radius (optional): Vị trí này chính là kích thước của bóng đổ, giá trị mặc định là 0
– 5 Color : Đây là vị trí mà bạn đặt giá trị màu cho bóng đổ.
Sau đây là đoạn code css thể hiện Hiệu ứng Inner Shadow như trong photoshop:

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

Internet Explorer Box Shadow

Nếu như đoạn css mà mình giới thiệu ở trên không có tác dụng gì so với trình duyệt IE thì chúng ta cần thêm một số phần tử.

HTML

<div>
<div>
Box-shadowed element
</div>
</div>

CSS

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

One-Side Only

Nếu bạn cần tạo một hiệu ứng bóng đổ chỉ nằm ở phần phía dưới thì đoạn css sau sẽ giúp bạn làm điều đó:

.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ả là :

Hy vọng với bài viết này, các bạn có thể nắm vững và làm chủ được hiệu ứng bóng đổ trong CSS3.
Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster