Thứ Hai, 25 tháng 2, 2013

Đổ bóng thẻ DIV với CSS3


Thuộc tính mới "box-shadow" của CSS3 là một trong những thuộc tính khá
hữu dụng và được sử dụng nhiều trong quá trình viết CSS. Với thuộc tính
này bạn có thể tạo cho các thành phần trong website của mình hiệu ứng
bóng đổ đẹp mắt. Tuy nhiên thuộc tính này không được hỗ trợ trên toàn bộ
các trình duyệt hiện tại, thuộc tính này chỉ được hỗ trợ từ Safari 3+,
Firefox 3.1 (Alpha), Chrome, Opera và IE 9+.
#yourdiv {
box-shadow: thamso1, thamso2, thamso3, mau;
}

  1. thamso1: Bóng đổ theo chiều ngang, nghĩa là phần bóng đổ sẽ lệch về phía phải của đối tượng.
  2. thamso2: Bóng đổ theo chiều dọc, nghĩa là phần bóng đổ sẽ lệch về phía trên của đối tượng.
  3. thamso3: Độ rộng hay còn gọi là độ dày của bóng đổ.
  4. màu: Màu sắc của phần bóng đổ.
EX:
#yourdiv {
background: #eee;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
margin-right: 5px;
padding: 20px;
}
-----
#yourdiv {
background: #eee;
box-shadow: -5px -5px 5px #666;
-moz-box-shadow: -5px -5px 5px #666;
-webkit-box-shadow: -5px -5px 5px #666;
margin-right: 5px;
padding: 20px;
}




box-shadow



box-shadow: -5px -5px 5px #666;

Không có nhận xét nào:

Đăng nhận xét