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..
ReplyDeleteI'm expecting Some more posts from this blog
ReplyDeleteThanks good job!
ReplyDeleteIt's a great CSS3 start for me Sir, thanks! I have a question though can jQuery manipulate css3?
ReplyDeletegreat post
ReplyDeleteSorry but IE is not dead :(
ReplyDeleteGreat Job man Well done..
ReplyDeleteits supper
ReplyDeleteI'm learning CSS3, thanks for your post.
ReplyDeleteAwesome.. It would be nice if you provide some more about the Css3 Gradients and Transitions. Looking forward to it.
ReplyDeletesuperb
ReplyDeleteYeah! It's good but not in all browsers...
ReplyDeletethanx it is great website
ReplyDeletenice tuto ;)
ReplyDeleteexcellent
ReplyDeleteGreat!!!!
ReplyDeleteoh good!
ReplyDeletelike...
ReplyDeleteGreat
ReplyDeletethanks
@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.
ReplyDeleteFor a demo check this link (with ie6-8)- http://thewebmagz.com/demo/css3_effects.html.
cooooooooooooool
ReplyDeleteGreat work
ReplyDeletei think you are providing better knowledge for web developer..
ReplyDeletegerat brother
ReplyDeleteAwesome man.....
ReplyDeleteNice post bro.
ReplyDeletewhat a amazing script Sirvana, i love it very much!
ReplyDeletenice post man,.....thank you friend
ReplyDeleteAwesome man,,,I have tried it on my blog and get an superb outwith css. thank you for share.
ReplyDelete