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

15 thoughts on “Warp Shadow using CSS 3

Add yours

  1. Hey Lokesh,

    That was really a good article for CSS lover like me, i played with the CSS class and made some minor changes with padding and gradient to create the effect i wanted, and voila…it created Photo Frame like background for me…that was cool

    Programmer like us needs this kind of thing to create those photoshop like effect with just CSS…Cool..i think i will subscribe with your RSS FEED to get more updates…

    1. Soon I am going to write script for this shadow effect which will automatically apply warp shadow effect on any element by it’s class name.

  2. Thanks Lokesh for such a good sharing of your knowledge regarding CSS.
    Your article really demonstrates no dependency of a designer or any designing studio application. A developer or a beginner can now design his own shadow effect in different design and shapes and that too with minimum size and efforts.
    This definitely gives boost to the performance.

    Thank you very much for your good post.

  3. This is brilliant!!! I’ve checked some hype blogs and tutorials, but they even charge for this chapter! So, you saved me in every possible way 😉

    HUGE THANKS!!!

  4. I love this concept and want to use it in my design, however, one of the elements I wish to apply it to is a floated sidebar. Is this possible? Can the sidebar be floated and have the position relative on it so that the span is absolutely positioned in the correct place?

    Thanks again for a great post and idea.

    1. Hi, Thanks for reading the article. I am glad that it helped you.
      I understood your floated sidebar concept half way. If you can elaborate little more I can surely help you to have a floated sidebar.
      Waiting for your reply…

  5. I want my floated sidebar to have a warped shadow beneath it to match my image elements on the page. However, because the sidebar is floated, I can’t put the required position: relative on it so that the warp is positioned absolutely below it. I have worked around it at the moment by inserting a second div inside the sidebar which is positioned relatively and the warp is positioned against that. Is there a neater solution without extra code required?

    Hope it makes sense this time 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: