Search For More.....................

Wednesday, December 16, 2009

Creating an Embossed like Effect in Web pages using CSS

You may have seen Embossed like texts Styles in Web pages. Earlier, we used images for similar effect. Although CSS has a command named "text-shadow", it is not cross-browser compatible.

Pls follow these simple steps and you can create embosse text styl in web pages.

  • Copy the following .



<div class="mc">

<div class="inner">

<span class="style1">Web Designer India</span>

<span class="style2">Web Designer India</span>

</div>

</div>


  • Next, Pls copy the following code in the respective CSS document.


.style1{

position:absolute;

font-family:Georgia, "Times New Roman", Times, serif;

font-size:52px;

color:#555;

top:100px;

left:100px;

}

.style2{

position:absolute;

font-family:Georgia, "Times New Roman", Times, serif;

font-size:52px;

color:#000000;

top:99px;

left:100px;

}

.mc{

width:500px;

height:500px;

background-color:#333333;

}


.inner{

position:relative;

width:100%;

height:100%;

}