In this article, I will show you a nice box shadow style using CSS3 when we put mouse cursor on it. It is a simple box, but when mouse over happen it will show shadow and the radius on the bottom left.
Explain:
The important property for this article:
- -moz-transition-duration:for set the duration of object shows it animation and 0.8s is the duration. But It just for Mozilla Firefox only.
- -webkit-transition-duration: use for Google Chrome Support.
- border: is a property for set the border of the box. 1px is for the border width, solid is the type of border, and #DDDDDD is color of the border.
- text-decoration:none; is use to set the link nothing happen when we put mouse cursor on the it.
- border-bottom-left-radius:50% 40px; is set the radius on the bottom left of the box. 50% and 40px is value for show the radius of the box.
- box-shadow:-5px 10px 15px rbga(0,0,0,0.25); is set the shadow of the box. -5px for shadow of the left, 10px is for shadow of the bottom, 35px is for side of the shadow, and rgba is for set the color value with alpha number.
Then you have to create an HTML file to show this box style like this:
[CODE]
<html>
<head>
<title>Box Shadow Sample</title>
<style type="text/css">
.shadow-sample {
-moz-transition-duration: 0.8s;
-webkit-transition-duration:0.8s;
border: 1px solid #DDDDDD;
margin: 20px 10px;
padding: 10px;
width: 258px;
}
.shadow-sample a{
text-decoration:none;
}
.shadow-sample:hover{
border-bottom-left-radius:50% 35px;
box-shadow:-5px 10px 15px rgba(0,0,0,0.25);
position: relative;
}
#box{
margin:10px;
width:239px;
}
</style>
</head>
<body>
<div class="shadow-sample">
<div id="box">
<h1> Your Box Shadow Here!!!</h1>
</div>
</div>
</body>
</html>
[/CODE]
You will see the result of this article in Figure 1.
Figure 1 - Box Shadow Effect
I hope you enjoyed, see you in the next article
Hut Samnang.
-->">
5/2/2012 9:42:00 PM
2012
2012
2
0