8 examples of stunning CSS3 text effects

by Jean. 28 Comments -

Among many other things, CSS3 has lots of nice effects to enhance the typography of your website. In this article, I have compiled 8 extremely promising typography techniques done using CSS3.

How to Create Inset Typography with CSS3


Just two years ago, we all used Photoshop to create beautiful inset typography. Now, you can do it using only CSS3. This great tutorial will help you getting started.
View tutorial: http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Create Beautiful CSS3 Typography


Technically speaking, styling text is very simple. The hard part is the artistic part: How to make text easy to read and look good? This is the focus of the tutorial, which is a must read for all web developers and designers.
View tutorial: http://blog.echoenduring.com/2010/05/13/create-beautiful-css3-typography/

Create a Letterpress Effect with CSS Text-Shadow


The “letterpress” effect is very popular in web design. Many people do it using Photoshop, but you can do it extremely easily using CSS3 only. How? Chris Spooner shows you how in this interesting article.
View tutorial: http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

How to Create a Cool Anaglyphic Text Effect with CSS


Chris Spooner again! This time, the talented British web designer comes back with a tutorial showing you how you can create a anaglyphic effect with CSS. Not sure I’ll use it on a live site, but it’s always interesting to know how to do it.
View tutorial: http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css

Text Rotation with CSS


Why should text always be displayed horizontally? CSS3 has the transform: rotate property, which allow you to rotate any elements, including text. The following tutorial, written by Jonathan Snook, will show how in details how to achieve an awesome rotated text effect.
View tutorial: http://snook.ca/archives/html_and_css/css-text-rotation

Text Embossing Technique With CSS


One more technique I’ve done exclusively in photoshop in the past. Thanks to CSS3, I’m now able to do it entirely in CSS.
View tutorial: http://www.reynoldsftw.com/2009/03/text-embossing-technique-with-css/

Adding an outline to your text using the CSS3 text-stroke property


Although this technique only works in webkit for now, I must admit that I really love it. You can add an outline to text, and even better, use transparent text with a solid outline.
View tutorial: http://www.cardeo.ca/2010/adding-an-outline-to-your-text-using-the-css3-text-stroke-property

CSS textured text


Ok, this isn’t new, and this isn’t CSS3, but this example is so great that I can’t not feature it on this post. Nick La from WebDesignerWall explains how you can make gradients or textured texts using CSS.
View tutorial: http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

  • http://www.michaelasears.com Michael Sears

    Great collection of CSS3 items, great ideas and I will have to find something i can use them in. Thank you for the great post!

  • Pingback: PixMedial — Design & Geek » 8 impresionantes efectos de textos realizados en CSS3

  • Pingback: === popurls.com === popular today

  • Steven

    I agree that these are interesting CSS text effects, but hardly ‘stunning’!?

  • http://pippinspages.com Pippin

    Excellent. I’ve bookmarked for future reference.

  • http://php.quicoto.com quicoto

    CSS3 rocks, that’s all :)

  • http://www.joshstauffer.com Josh Stauffer

    This is great. The Letterpress Effect and Embossing Technique are two of my favorites.

  • http://seoresellerbliss.com/ Mich

    Nice examples, I even didn’t expect that some of those effects are possible with CSS. I need to learn much more about CSS3. It seems that this is the future of modern web design.

  • http://www.evolutionarydesigns.net/blog element321

    I love CSS3, I am still trying to catch up with all the great things you can do with it. Thanks for sharing these examples, I didn’t even know you could do some of these tricks that you shared with us.

  • http://www.inikeairjordan.com vansci123

    I need to learn much more about CSS3.

  • http://www.itsphil.com Phil Zeelte

    Some great techniques there, just what i was searching for also. Really like the embossing effect.

  • http://www.youtube.com/watch?v=W7OLifc4sGw Jamie

    Awesome! I’ll save the tutorial links for future reference.

  • http://vannia.co.cc/ Vannia Rajan

    Great Article… Just added your RSS feed to my reader.. Keep rocking..!

  • http://smorge.com seb

    Excellent ! Thanks for these links, merci :)

  • http://www.ezblogsetup.com/ Udegbunam Chukwudi

    I’ve got my eyes that that embossing technique. I hope it works across all browsers ;-)

  • http://www.20milesnorth.com Jack Browning

    These features will eliminate a lot of jpgs needed for website headings and other things like that. I just hope people start upgrading their browsers soon so they can all see the right text when they pull up the web pages.

  • http://www.buzz-webdesign.co.uk Phil

    It’s great that these effects are now possible just using CSS… but I hope people don’t go overboard with text effects, similar to the period when typographers first started using macs.

  • http://matthewfowles.com Matthew Fowles

    love it! so much time time and space can be saved just wish css3 was more supported.

  • http://www.egydes.com Husien Adel

    very nice list of effects :D
    i like : Text Embossing Technique With CSS

    need to know what browsers support it ?

  • http://www.colonialflag.com alexander

    I have lots to learn when it comes to CSS3, but lots to look forward to. :)

  • http://learnmill.com Carl

    Excellent guide, I like new options of CSS3, as well it seems that CSS3 is faster than its predecessor and Google algorithms give and advantage related to their usability algorithm.

  • http://www.rvoodoo.com Rev. Voodoo

    Wow, cool stuff. I keep flip flopping on what I want to do with the text on my site. The neat tricks here were cool and all, but that second link gave me a lot to think about…. trying to learn about web typography, and that was a good read

  • http://enterpriserentalcarlocations.com/ Alvaro Castio

    These features will eliminate a lot of JPGS need for website title and other similar things. I only hope that everybody can start upgrading their browsers soon, so they can all see the correct text when they popup web.

  • http://www.howto-get-him-back.com Ross Anderson

    I really need to take my website design skills to the next level. This is the sort of thing I’ve been looking for.

  • http://www.ajibanda.com Aj Banda

    Some of your links are not existing anymore. Please check.

  • http://imagingheat.com Mark

    Hey, nice job on the css inset typography tutorial. Worked great! By the way, check on imagingheat.com next week; after I’m finished with a clients web site, buckeye-wolverineshop.com, I’ll get the other up. Keep up the good work man, you tutorial was well organized and written. Nice site overall.

    Cheers, and happy coding!

  • vijay

    i have tried moz, o . but it could not display properly, just shows like an ordinary display, please give me a suggestion

  • http://www.konoozi.com/ Imran Khan

    Excellent ! Thanks for these links and your article is very help full in CSS.