Warp Shadow using CSS 3


It’s an old time to create an effect of drop shadow using Photoshop or any other image editing tool for web page.

Thanks to CSS 3 which enable us to apply nice shadow effect through easy way.
It increase the speed of page load and downloads the lesser bytes compare to images for shadow effect.

In this blog our main focus will be on applying warp shadow effect using CSS 3.
Basically there is not any direct style which can be applied as a warp shadow to any block. We are going to apply some trick here, using shadow and border curve.

CSS 3 user must be aware of Box Shadow and border radius.
Following is the syntax for
Box Shadow

Browser

-webkit-box-shadow                  Webkit
-moz-box-shadow                       Firefox
box-shadow                                  Standard

Syntax

5px             5px           5px       #000000
x-ofset,      y-ofset,    blur,      color

For more detail on Box Shadow visit the following link.
http://www.css3.info/preview/box-shadow/

Border Radius

Browser

-webkit-border-radius                 Webkit
-moz-border-radius                      Firefox
border-radius                                 Standard

For more detail on Border Radius visit the following link.
http://www.css3.info/preview/rounded-border/

Let’s take a div element to apply warp shadow.

First we are going to apply basic style class (i.e. .box) like dimensions, padding etc.
.box
{

padding-top: 50px;
padding-bottom: 50px;
padding-left: 100px;
width: 200px;

}

Now, we are going to apply some color to the div. As it’s all about CSS 3 why not to try some gradient color.
For more detail on Gradient color style visit the following link.
http://css-tricks.com/css3-gradients/

.boxColor
{

background: -webkit-gradient(linear, left top, left bottom, from(#FFDB4D), to(#EABB00));
background: -moz-linear-gradient(top,  #FFDB4D,  #EABB00);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFDB4D’, endColorstr=’#EABB00′);

}

It’s time to apply shadow effect to our div.
.shadow_box
{

-moz-box-shadow: 0px 10px 5px #9C9C9C;
-webkit-box-shadow: 0px 10px 5px #9C9C9C;
box-shadow: 0px 10px 5px #9C9C9C;
position: relative;

}

After applying all those above css classes our div will look as per the following screen shot.
<div class=”box boxColor shadow_box”>
Warp Shadow
</div>

To give a nice warp shadow effect lets first move to border radius effect. I will apply shadow and border radius effect to span tag.
span
{
background-color:#671209;
color:#fff;
box-shadow: 0px -10px 5px # 8F8F8F;
-moz-box-shadow: 0px -10px 5px # 8F8F8F;
-webkit-box-shadow: 0px -10px 5px # 8F8F8F;
border-radius: 50% / 20px;
-moz-border-radius: 50% / 20px;
-webkit-border-radius: 400px 80px; /* webkit browsers apparently can’t use a % for ellipse border radius */
}

<span class=’warp’>&nbsp;&nbsp;&nbsp;&nbsp;Span&nbsp;&nbsp;&nbsp;&nbsp;</span>
Our span will look like following screen shot.

As you can see in the above sample as per the curve border shadow is also curved.

Here it’s a trick. Assume that there is no color in span and the shadow color is white (or same as the outer background color) and this span has the same width of our div and it is placed after the div height then it will cut the shadow of the div in curved shape. That will give look of the warp shadow. Below is the concept which shows creating new shape by overlapping two different shapes.

Bellow screenshot shows how the div will look after cutting it’s shadow by the curved border of the span tag.

For the above example CSS for the Span would be
.shadow_box span.warp
{

width: 100%;
height: 13px;
position: absolute;
bottom: -26px; /* ~equal to the height + shadow y offset + shadow blur radius */
right: 0px;
box-shadow: 0px -10px 5px #fff;
-moz-box-shadow: 0px -10px 5px #fff;
-webkit-box-shadow: 0px -10px 5px #fff;
border-radius: 50% / 20px;
-moz-border-radius: 50% / 20px;
-webkit-border-radius: 400px 20px;

}

HTML would be
<div class=”box boxColor shadow_box”>
Warp Shadow
<span class=’warp’>Span</span>
</div>

Following is the complete code for CSS and HTML.
CSS Code
<style>
.box
{

padding-top: 50px;
padding-bottom: 50px;
padding-left: 100px;
width: 200px;

}

.boxColor
{

background: -webkit-gradient(linear, left top, left bottom, from(#FFDB4D), to(#EABB00));
background: -moz-linear-gradient(top,  #FFDB4D,  #EABB00);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFDB4D’, endColorstr=’#EABB00′);

}

.shadow_box
{

-moz-box-shadow: 0px 10px 5px #9C9C9C;
-webkit-box-shadow: 0px 10px 5px #9C9C9C;
box-shadow: 0px 10px 5px #9C9C9C;
position: relative;

}

.shadow_box span.warp
{

width: 100%;
height: 13px;
position: absolute;
bottom: -26px; /* ~equal to the height + shadow y offset + shadow blur radius */
right: 0px;
box-shadow: 0px -10px 5px #fff;
-moz-box-shadow: 0px -10px 5px #fff;
-webkit-box-shadow: 0px -10px 5px #fff;
border-radius: 50% / 20px;
-moz-border-radius: 50% / 20px;
-webkit-border-radius: 400px 20px;

}
</style>

HTML Code

<div class=”box boxColor shadow_box”>

Warp Shadow
<span class=’warp’></span>

</div>

Advertisements

Blog at WordPress.com.

Up ↑

%d bloggers like this: