Home » Tips & Tricks » How To Create 3D Text Using CSS3

How To Create 3D Text Using CSS3

Posted in Tips & Tricks
210,666 views | Share This

I am very happy to see, CSS3 finally eliminates the use of Photoshop in terms of giving text shadows. I was just trying my hands on text shadows in CSS3 and thought of creating 3D text by giving multiple shadows and got something wonderful.

Earlier Text Shadows were announced since the beginning of CSS2 however, the only browser that was supporting this functionality was Safari.

If you talk about today’s condition, almost all the browsers except Internet Explorer are running Text Shadows successfully.

I agree that we would not be able to use these shadows for clients for next few years because of cross browser compatibility however these features can help you push the boundaries of modern Web Technology today.

We do have certain jQuery plug-ins available like IE CSS Shadow that can create shadowed text completely compatible with Internet Explorer.

Let’s learn how we create 3D text using CSS3. I am giving text shadow to Heading and Paragraph tags.

HTML code written below will land up in between the body tag.

<div id="wrapper">
 <h1>CSSReX</h1>
 <p>This works well with major Browsers like FireFox, Opera, Safari and Chrome however does not work with Internet Explorer!</p>
</div>

Here we have the CSS for giving heading and paragraph multiple shadows to give 3D effect.

#wrapper h1{
 font:normal 60pt Arial;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}

#wrapper p{
 font:normal 40pt Arial;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}

Let’s Download and Tweak with it.

Live Demo

Author:

Hi! I am a freelance web designer / developer based in Chandigarh (The City beautiful) India. I am passionate about playing Guitar and exploring new things over the web. Please feel free to contact me & say Hello. We can be good friends :)

Spread a word about this »

  • Add to Delicious
  • Share on Facebook
  • Tweet This
  • Stumble This
  • Digg This
  • Mixx It
  • Buzz
  • Subscribe to CSSReX

Latest from the network »

Comments


Nice – thanks for sharing


Thanks for the great work! Cool blog. There are a number of opinions on this topic and this blog states the issue extremely great.


So sorry it doesn’t work at IE. But also thank you for sharing. Zappos.com top navigation seems to use this 3D text.


COOL! CSS3 is very powerful thing!


This renders very poorly (no antialiasing like png or flash does) and is not exactly the same on all browser. And dont works on IE.

Pffff… And i think your image is photoshopped.

I would go on doing it with photoshop and png(quality, pixel perfect aspect on all browers).

This is surely not a “best practice”.


I can completely understand that its now working in IE however that time is not far when we guys will be eliminating IE soon..

When you click on image, you will get the live demo.

Thanks


Man, I wish I would have found this post sooner! It’s the precise effect I was trying to create in this Blogger template I made http://haute-press.blogspot.com/

It took me tons of live trial and error to get it right. It’s really not that difficult but it was hard to keep track of each shadow while editing!

Cool share. I am having a lot of fun with the new CSS shadow and border properties myself.


Nice css for shadow


@Twinspirit – it renders good enough for me to use it in production websites and to hell with IE. IE gets what it’s capable of and the progressive browsers will get the full glory. Of course there is a difference in rendering between them, but we web designers/developers are the ones that are looking at it in different browsers… not the regular user.

But hey… keep on going with building your pixel perfect websites and throw in another http request with your png image… oh and don’t forget IE6, huh?


good tips for all web designers and i have one questions, is this working in IE6 and opera browser.

i like your amazing trick


This is the a designer life saver CSS text efect. I really appreciate you unleaching it.


works well in IE. quite nice.


than you for share, really, thnks a lot!

Leave a Reply