đổ bóng trong css3 

Đầ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à :


đổ bóng trong css3


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 !

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*