[TUT] Drop-Shadow using CSS and HTML

[Gaijin]

Let me show you a simple way to create Drop-Shadow like effect using CSS and HTML only.

The result will look like this;


Using a smaller font size and Top/Left values...


The process of doing this is pretty easy, we use only two DIV's, well 3 the main one and 2 other inside.
The 2 DIV will hold the same text....
Anyway Let us look at the code, first the HTML...

Code:

<div>
    <div class="text">SupportForums.net</div>
    <div class="shadow">SupportForums.net</div>
</div>

The Block element holds 2 other DIV's, it serves us as a Parent element for positioning purpose.
In the first DIV we declare a class use, the class name is text.
The second uses the class shadow...

That's all for the HTML part, now the CSS...
As said above we use 2 classes, text and shadow..

Code:

.text {
    position:absolute;
    z-index:2;
    top:0px;
    left:0px;
    font-size:40px;
    font-weight:bold;
    color:orange;
}

.shadow {
    position:absolute;
    z-index:1;
    top:5px;
    left:5px;
    font-size:40px;
    font-weight:bold;
    color:black;
}

The both classes are almost same, we only change the Color of the text and move it a bit.
Position value "absolute" allows us to have both divs at the same position on the screen, the second property is z-index, this is used to order the appearence of the element.
The class "text" has z-index set to 2, while the class "shadow" has it set to 1, that means that the element which uses the shadow class will be placed under the elment that uses the class text.
Top and Left properties are used to move the element away from the Top/Left screen/parent corner. The class "text" has the values for Top and Left set to 0 pixels.
The class "shadow" has both set to 5 pixels, this setting depend on the size of the text, which we declare as 40 pixels using the property font-size...

That's all, you have created a drop-shadow effect using CSS and HTML only!
If you work with different sizes of Text, you will need to play with the properties Top and Left a bit and see which position works best for you..

[p0w3r0fchr1st]

Very nice tutorial. Think ill use it on my site.

[Gaijin]

Thanks you too... I'm glad you like it.
Note that if you change the font-size, you will need to change the top and left in the shadow class too...

[Awesome]

I think that this only works on Firefox but it's usefull and looks good, thanks man

[Navineous]

very nice tutorial, shall use when needed