This post is explains how to create Photoshop style 3D text effects using CSS3 text-shadow and @font-face property. These properties are supported in all modern browsers like Chrome, Safari and Firefox, except Internet Explorer is dead. Try following examples and enrich your web pages, use better color combinations for pretty results
Download Script 
Live DemoEffect 1
.effect_1
{
color: #fff;
font: 80px Times New Roman, Times, serif;
text-shadow: 0 1px 0 #999,
0 2px 0 #999,
0 3px 0 #999,
0 4px 0 #999,
0 5px 0 #999,
0 6px 0 #000;
}
{
color: #fff;
font: 80px Times New Roman, Times, serif;
text-shadow: 0 1px 0 #999,
0 2px 0 #999,
0 3px 0 #999,
0 4px 0 #999,
0 5px 0 #999,
0 6px 0 #000;
}
Effect 2
.effect_2
{
font: 80px Times New Roman, Times, serif;
text-shadow: -1px -1px 0px #000, 1px 1px 0px #666;
}
{
font: 80px Times New Roman, Times, serif;
text-shadow: -1px -1px 0px #000, 1px 1px 0px #666;
}
Effect 3
.effect_3
{
font: 80px Times New Roman, Times, serif;
text-shadow: 2px 2px 8px #fff;
color: transparent;
}
{
font: 80px Times New Roman, Times, serif;
text-shadow: 2px 2px 8px #fff;
color: transparent;
}
@font-face
@font-face
{
font-family: chandy;
src: url('comesinhandy.ttf') format("opentype");
}
.myfont
{
font-family:chandy;font-size:80px
}
// HTML Code
<div class="myfont">Srinivas Tamada</div>
{
font-family: chandy;
src: url('comesinhandy.ttf') format("opentype");
}
.myfont
{
font-family:chandy;font-size:80px
}
// HTML Code
<div class="myfont">Srinivas Tamada</div>
Its awesome..
I'm expecting Some more posts from this blog
Thanks good job!
It's a great CSS3 start for me Sir, thanks! I have a question though can jQuery manipulate css3?
great post
Sorry but IE is not dead :(
Great Job man Well done..
its supper
I'm learning CSS3, thanks for your post.
Awesome.. It would be nice if you provide some more about the Css3 Gradients and Transitions. Looking forward to it.
superb
Yeah! It's good but not in all browsers...
thanx it is great website
nice tuto ;)
excellent
Great!!!!
oh good!
like...
Great
thanks
nice....
@shub- You can add support for different css3 properties in Internet Explorer with ms filters. To know more about ms filters you may check this link- http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx.
For a demo check this link (with ie6-8)- http://thewebmagz.com/demo/css3_effects.html.
cooooooooooooool
Great work
i think you are providing better knowledge for web developer..
gerat brother
Awesome man.....
Nice post bro.