MENU 
Sản phẩm-chipkool.tk.png)
Trang chủ
Nổi bậc
Tiện ích-chipkool.tk.png)
Tài khoản
Tác vụ
YOUTUBE
NHẠC
Trang chủ
Tạo hiệu ứng bóng đổ cho liên kết với thuộc tính box-shadow
Thứ Năm, 6 tháng 1, 2011
Thuộc tính box-shadow của CSS3 là một trong những thuộc tính mới rất hữu ích trong việc tạo CSS. Ở đây tôi xin giới thiệu cách sử dụng thuộc tính này để tạo hiệu ứng bóng đổ cho các liên kết.Bạn có thể xem Demo dưới đây, rê con trỏ vào các liên kết để xem hiệu ứng.
Theo Wikipedia: Vi phạm bản quyền là sao chép lại tác phẩm của người khác mà không xin phép, thậm chí công bố công trình đó là của mình sáng tạo ra.
Trong tiếng Việt còn có từ đạo văn chỉ việc ăn cắp bản quyền các văn bản. Một từ tương tự là đạo nhạc, ăn cắp các giai điệu nhạc sáng tác bởi người khác.
Trong tiếng Việt còn có từ đạo văn chỉ việc ăn cắp bản quyền các văn bản. Một từ tương tự là đạo nhạc, ăn cắp các giai điệu nhạc sáng tác bởi người khác.
Để làm được như vậy, trước tiên cần viết CSS như bên dưới và đặt trước thẻ </head>.
<style type="text/css">
a.box {
color: #FFF;
padding: 0 5px;
border: 1px solid #2DAEBF;
}
a.box:hover {
background-color: #2daebf;font-size: 1.5em;
-moz-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
-webkit-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
}
</style>
a.box {
color: #FFF;
padding: 0 5px;
border: 1px solid #2DAEBF;
}
a.box:hover {
background-color: #2daebf;font-size: 1.5em;
-moz-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
-webkit-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
}
</style>
Tiếp theo là tạo cấu trúc HTML cho liên kết như sau.
<a class="box" href="#">text liên kết</a>
Tăng cỡ chữ
Mặc định
Giảm cỡ chữ
Lên trên
Tổng số Bình luận [ 0]
Đăng nhận xét