 | Dựa vào thao tác di chuột(hove) bạn có thể thiết kế các hiệu ứng đặc biệt, đẹp và ấn tượng, bài viết này tôi xin giới thiệu một mã nguồn đơn giản(simple source) để tạo hiệu ứng khi di chuyển chuột vào ô(div) thì vùng đó sẽ được đổ bóng. |
Demo:
Move your mouse here
Mã nguồn - Source:
<!DOCTYPE html>
<html>
<head>
<title>VN-Lives | vnlives.net | Simple div hover shadow effects.</title>
<style type="text/css">
.div_001
{
width: 170px;
border: 1px solid #A1A1A1;
padding: 10px;
font-weight: bold;
}
.div_001: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="div_001"> Move your mouse here </div>
</body>
</html>
<html>
<head>
<title>VN-Lives | vnlives.net | Simple div hover shadow effects.</title>
<style type="text/css">
.div_001
{
width: 170px;
border: 1px solid #A1A1A1;
padding: 10px;
font-weight: bold;
}
.div_001: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="div_001"> Move your mouse here </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