 | Trong bài trước tôi đã hướng dẫn các tạo hiệu ứng đổ bóng cho thẻ div, tiếp theo trong bài này tôi sẽ hướng dẫn cách các hiệu ứng đổ cho cho image. |
Khi duyệt web chắc các bạn thường thấy một số giao diện khi con chuột được chỉ vào hình thì có cái bóng mờ bên dưới được hiển thị ra, điều này sẽ giúp người tập trung vào hình ảnh hay sản phẩm mình đang xem.
Demo:
Mã nguồm - Source Code:
<!DOCTYPE html>
<html>
<head>
<title>VN-Lives | vnlives.net | Simple div hover shadow effects.</title>
<style type="text/css">
.imgBox
{
width: 214px;
height: 65px;
padding: 0px;
margin: 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yR0SvwiY0dn_Yy1CSyyBnLkdIWQIrHfmfdlkfa8rv38OcQv1JJlmJN-bHenBK89RgIATrZf68twMdF9whlW2aAatLQGSpvJumCGFz_R7H6le7Ei3g0pHpP2r2ldH7UkmVp8o5EuWEr0/s1600/Logo_01_A.png) no-repeat;
}
.imgBox:hover
{
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
</style>
</head>
<body>
<div class="imgBox"> </div>
</body>
</html>
<html>
<head>
<title>VN-Lives | vnlives.net | Simple div hover shadow effects.</title>
<style type="text/css">
.imgBox
{
width: 214px;
height: 65px;
padding: 0px;
margin: 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yR0SvwiY0dn_Yy1CSyyBnLkdIWQIrHfmfdlkfa8rv38OcQv1JJlmJN-bHenBK89RgIATrZf68twMdF9whlW2aAatLQGSpvJumCGFz_R7H6le7Ei3g0pHpP2r2ldH7UkmVp8o5EuWEr0/s1600/Logo_01_A.png) no-repeat;
}
.imgBox:hover
{
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
</style>
</head>
<body>
<div class="imgBox"> </div>
</body>
</html>
Reference:
- Công cụ online tạo hiệu ứng đổ bóng cho box. | Website tool design box shadow.
- Công cụ online tạo hiệu ứng đổ bóng cho văn bản. | Website tool design text shadow.
Writer: +Bui Ngoc Son
No comments:
Post a Comment