MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

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

[Close]

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

How to use drop shadows with CSS3

This tutorial covers the effect of shadows in a web page. We will make use of CSS3 here.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

CSS3 is exciting stuff and every developer really like the drop shadow feature because of the tiresome effort to create new PNG files just to get the effect. Also, it's a pain trying to get the bottom lined up, and the right side of a div to all look right with the shadow.

Introduction to tags

Just like the CSS3 rotating text, each browser has its own tag. So, here are the tags.

Listing 1: Defining the CSS3 tags

<br>
    filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)<br>
    -webkit-box-shadow: 10px 10px 25px #ccc;<br>
    -moz-box-shadow: 10px 10px 25px #ccc;<br>

The first one, the filter is for IE (details), the webkit tag is for Chrome and Safari, and the moz-box-shadow tag is for Firefox.

The properties are pretty simple. They pretty much go as follows:

Listing 2: Properties of CSS3 tags

<br>
    -webkit-box-shadow: offsetX offsetY blurRadius color<br>
    -moz-box-shadow: offsetX offsetY blurRadius color<br>

Use of tags in Internet Explorer

For IE, we can use a few different properties. The table below describes them

Attribute Property Description
Color Color Sets or retrieves the value of the color applied with the filter.
Enabled Enabled Sets or retrieves a value that indicates whether the filter is enabled.
offX OffX Sets or retrieves the value that the drop shadow is offset from the object along the x-axis.
offY OffY Sets or retrieves the value that the drop shadow is offset from the object along the y-axis.

In case of confusion, the attribute column is used if we're using Javascript to modify the elements, and Property is used in the actual CSS tag. Also, the Color property/attribute can be specified using #RRGGBB, rgb(0,0,0), or #AARRGGBB. So, we can still have a transparent drop shadow if we use the last one, and set the alpha code to our desired level.

Listing 3: Using dropShadow function

<br>
.dropShadow3 {<br>
        filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#ccaaaaaa, OffX=3, OffY=3);<br>
        -webkit-box-shadow: 3px 3px 5px #aaa;<br>
        -moz-box-shadow: 3px 3px 5px #aaa;<br>
}<br>

To make things a little versatile, we made a class named dropShadow5, and dropShadow8, with each being different by the offset values.

Listing 4: One more example of drop shadows

<br>
<div class="dropShadow3"><br>

<br></div><br>

Here it is being outputted where we added some styling to change the background and shorten it

Output after adding styling to change the background

Figure 1: Output after adding styling to change the background

Easy-to-apply, dynamic, auto-expanding drop shadows have always been a bit of a pain to apply across all the major browsers. We fairly recently got the box-shadow attribute, which can be applied with -moz-box-shadow and -webkit-box-shadow on gecko and webkit browsers. But it leaves the IE family out in the cold.

The easiest solution to this is the IE-proprietary filter attribute. It does not produce quite as nice shadows as the box-shadow attribute, but for simple just-a-few-pixels drop shadows it does the trick. One noticeable drawback is that IE for some reason disables anti-aliasing on elements that has this attribute. But we can live with that in most cases.

Listing 5: This box has a shadow

.shadow {
        zoom:1; /* This enables hasLayout, which is required for older IE browsers */
        filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
        -moz-box-shadow:2px 2px 2px #b0b0b0;
        -webkit-box-shadow:2px 2px 2px #b0b0b0;
        box-shadow:2px 2px 2px #b0b0b0;
}

This should look fairly similar in all major browsers, including IE 6+. As web developers, have we ever dealt with a designer who is very fond of using rounded corners, drop shadows, gradients and opacity in his/her designs?

Let's have a look at how we can create rounded corners, gradient backgrounds, drop shadow box and opacity by following simple CSS techniques.

Listing 6: Rounded corners

.curve {
    -moz-border-radius : 5px; /* Firefox */
    -webkit-border-radius : 5px; /* Safari & Chrome */
    -khtml-border-radius : 5px; /* Linux browsers */
    border-radius : 5px; /* CSS3 compatible browsers */
}

Listing 7: Gradient background

.gradient {
    background : -moz-linear-gradient(top,  #FFF,  #000); /* Firefox 3.6+ */
    background : -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#000)); /* Safari & Chrome */
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000'); /* IE 5.5 - 7 */
    -ms-filter : "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; /* IE 8 */
}

Listing 8: Drop shadow box

.shadow_box {
    -moz-box-shadow : 4px 4px 5px #000; /* Firefox 3.5+ */
    -webkit-box-shadow : 4px 4px 5px #000; /* Safari 3+ & Chrome */
    box-shadow : 4px 4px 5px #000; /* CSS3 compatible browsers */
    filter : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); /* IE 5.5 - 7 */
    -ms-filter : "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* IE 8 */
}

Listing 9: Opacity

.opacity {
    -moz-opacity : 0.8; /* Firefox & Netscape*/
    -khtml-opacity : 0.8; /* Safari 1+ & Chrome */
    opacity : 0.8; /* CSS3 compatible browsers */
    filter : alpha(opacity=80); /* IE 5 - 7 */
    -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
}

Drop shadows and inner shadows are some of the effects we need to learn making use of Photoshop’s Blending options. But now, since CSS3 “hit the charts”, we don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.

Nowadays, the cool thing is that we create beautiful CSS3 shadows without actually needing Photoshop anymore.

Displaying the CSS3 shadows

Figure 2: Displaying the CSS3 shadows

Box Shadow Property

The box-shadow property allows us to add multiple shadows (outer or inner) on box elements. To do that we must specify values as: color, size, blur and offset.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Here’s a quick example:

box-shadow: 3px 3px 10px 5px #000;
Example of a box shadow property

Figure 3: Example of a box shadow property

This CSS declaration will generate the following shadow:

A positive value for the horizontal offset draws a shadow that is offset to the right of the box. A negative length draws a shadow that is offset to the left of the box.

The second length is the vertical offset. A positive value for the vertical offset basically offsets the shadow down. A negative one offsets the shadow up.

We’re not allowed to use negative values for blur radius. The larger the value, the more the shadow’s edge is blurred, as it can be seen above.

Spread distance positive values cause the shadow shape to expand in all directions by the specified radius.

Negative ones cause the shadow shape to contract. The color is the color of the shadow.

The inset keyword (missing above), if present, changes the drop shadow from an outer shadow to an inner shadow:

Now let’s see how we can take advantage of this wonderful CSS3 feature. Below we show how to enhance our designs with the coolest box-shadow techniques!

Listing 10: Add depth to the body

body:before 
{ 
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

Listing 11: Drop shadows

{
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

#box:before, #box:after 
{
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#box:after 
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Some Quick Tips

Try spicing up shadows with RGBa color. The box-shadow property can be used using CSS3 RGBa colours to create shadows with differing levels of opacity. If our browser supports the box-shadow property, then it will definitively support the RGBa colour mode.

Use multiple shadows in one CSS declaration:

 box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

Browser support is extending these days with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).

Conclusion

This brings us to the end of this tutorial where we learnt different aspects of spreading shadow to a web page. Hope you liked the article.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[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