Text Effects using CSS3
Wall Script
Follow Me:
Monday, December 12, 2011

Text Effects using CSS3

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

Text Effects using CSS3

Download Script     Live Demo

Effect 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;
}

Text Effects CSS3

Effect 2
.effect_2
{
font: 80px Times New Roman, Times, serif;
text-shadow: -1px -1px 0px #000, 1px 1px 0px #666;
}

Text Effects CSS3

Effect 3
.effect_3
{
font: 80px Times New Roman, Times, serif;
text-shadow: 2px 2px 8px #fff;
color: transparent;
}

Text Effects CSS3

@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>

Text Effects CSS3
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


32 comments:

  1. I'm expecting Some more posts from this blog

    ReplyDelete
  2. It's a great CSS3 start for me Sir, thanks! I have a question though can jQuery manipulate css3?

    ReplyDelete
  3. I'm learning CSS3, thanks for your post.

    ReplyDelete
  4. Awesome.. It would be nice if you provide some more about the Css3 Gradients and Transitions. Looking forward to it.

    ReplyDelete
  5. Yeah! It's good but not in all browsers...

    ReplyDelete
  6. @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.

    ReplyDelete
  7. i think you are providing better knowledge for web developer..

    ReplyDelete
  8. what a amazing script Sirvana, i love it very much!

    ReplyDelete
  9. nice post man,.....thank you friend

    ReplyDelete
  10. Awesome man,,,I have tried it on my blog and get an superb outwith css. thank you for share.

    ReplyDelete

Make in India