3D text using just CSS

This content originally appeared on @mdo and was authored by Mark Otto

I have no idea if it’s been done before, but I’ve long wanted to put together a quick little demo showing the power of CSS’s text-shadow property. Turns out the latest versions of Chrome, Safari, Firefox, and Opera all render multiple text-shadows on elements, just like box shadows.

So I threw this together: 3D text using nothing but CSS. No extra markup, no :before or :after mess, and no images. Just progressively enhancing CSS to add some flair to your work.

Check out the demo and let me know what you think!

This content originally appeared on @mdo and was authored by Mark Otto

Print Share Comment Cite Upload Translate Updates

APA

Mark Otto | Sciencx (2011-01-05T00:00:00+00:00) 3D text using just CSS. Retrieved from https://www.scien.cx/2011/01/05/3d-text-using-just-css/

MLA

" » 3D text using just CSS." Mark Otto | Sciencx - Wednesday January 5, 2011, https://www.scien.cx/2011/01/05/3d-text-using-just-css/

HARVARD

Mark Otto | Sciencx Wednesday January 5, 2011 » 3D text using just CSS., viewed ,<https://www.scien.cx/2011/01/05/3d-text-using-just-css/>

VANCOUVER

Mark Otto | Sciencx - » 3D text using just CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2011/01/05/3d-text-using-just-css/

CHICAGO

" » 3D text using just CSS." Mark Otto | Sciencx - Accessed . https://www.scien.cx/2011/01/05/3d-text-using-just-css/

IEEE

" » 3D text using just CSS." Mark Otto | Sciencx [Online]. Available: https://www.scien.cx/2011/01/05/3d-text-using-just-css/. [Accessed: ]

rf:citation

» 3D text using just CSS | Mark Otto | Sciencx | https://www.scien.cx/2011/01/05/3d-text-using-just-css/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.