Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Box Shadow effect with CSS3

In this article, I will show you a nice box shadow style using CSS. When we put mouse over the box, it will show the shadow and the effect with Border bottom left.

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:

<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>


You will see the result of this article in Figure 1.

Box Shadow

Figure 1 - Box Shadow Effect

I hope you enjoyed, see you in the next article

Hut Samnang.



I am a Web developer and design of Computer Magazine. I just work here for 6 month.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login