CSS/CSS3 Tutorial: Get a 3D effect with shadows


Hello Friends! You have seen the 3D effect on Images and Videos. But have you noticed that the web has also evolved coming up with many possibilities. Today we gonna discuss the ways to obtain 3D effect on webpages with shadows.

There are many ways to obtain the 3D effect but here we have selected shadows for this purpose because by using this we will have to increase only certain lines of code and rest is dependent of the Browser Capabilities and if the Browser is capable of; why not to use that. So to obtain the 3D effect we will use two types of shadows.

  • Text Shadow
  • Box Shadow

Text Shadow:

The text shadows will help us to obtain an appearance like the text is hard stuffed on background or the text is floating above the surface and light is creating shadow etc etc.

The basic syntax to obtain text shadow is

***text-shadow : (R relative horizontal position) (R relative vertical position) (O blur radius) (O shadow color);*****R: Required **
**O: Optional **

Lets take a HTML element and apply shadow on it.

<span id="text_shadow">Time to Hack</span>
#text_shadow {
padding : 10px;
font-size : 18px;
text-shadow : 2px 2px 2px #ccc;
-webkit-text-shadow : 2px 2px 2px #ccc;
-moz-text-shadow : 2px 2px 2px #ccc;
-o-text-shadow : 2px 2px 2px #ccc; 
-ms-text-shadow : 2px 2px 2px #ccc; 
}

And see with above CSS rules we got a text that will appear like it is 2px above the ground and light is dropping from the upper left corner.

Now we’ll see the CSS rules to obtain effect of stuffed text on background.

<span id="stuffed">Time to Hack</span>
#stuffed {
padding : 10px;
font-size : 18px;
text-shadow : 0px 1px 0px #ccc;
-webkit-text-shadow : 0px 1px 0px #ccc; 
-moz-text-shadow : 0px 1px 0px #ccc; 
-o-text-shadow: 0px 1px 0px #ccc; 
-ms-text-shadow : 0px 1px 0px #ccc; 
}


By above two examples of text shadow you might have got the idea of working with shadows on text.

Box Shadow:

The box shadow also works in the similar way but have some syntax differences due to requirements.

The box shadow when applied with correct positioning and z-index; you can obtain the appearence like the desktop windows.

So lets take a look at the example. First we have the markup.

<div class="box-one">Time to Hack</div>

Now we’ll see the styling rules.

.box-one {
display : block ;
width : 400px ;
height : 200px ; 
line-height : 200px ; 
font-size : 40px;
font-family : Arial, Helvetica, Verdana, Georgia;
border : 1px solid #aaa;
box-shadow : 0px 0px 4px #ccc ;
}

That was the markup style rules.

This 3D effect will show that a box is placed above ground and the light is being poured fron the point above the centre of box.

Similarly to obtain an appearance box fixed in background can be obtained by following style rules.

<div class="box-one">Time to Hack</div>
.fixed-box {
 display : block ;
width : 400px ;
height : 200px ; 
line-height : 200px ; 
font-size : 40px;
font-family : Arial, Helvetica, Verdana, Georgia;
border : 1px solid #aaa;
box-shadow :2px 2px 4px 4px #ccc inset ;
}


In above box-shadow syntax the parameters were following this syntax
***box-shadow: (R h-shadow) (R v-shadow) (O blur radius) (O spread) (O shadow color) (O inset) ; ***
R: Required
O: Optional

So now for the basics; you can play with this and obtain your own new experiences.

But WAIT! Just don’t forget to comment and share.

Demo  Download