Subtle CSS3 Typography that you’d Swear was Made in Photoshop
videos

Subtle CSS3 Typography that you’d Swear was Made in Photoshop

on Aug 12th 2010 with 121 comments
Tutorial Details
  • Topics Covered: CSS3
  • Difficulty: Moderate
  • Tut Format: 13 Minute Video
Download Source Files

Final Product What You'll Be Creating

Download Source Files
This entry is part 8 of 16 in the CSS3 Mastery Session
« PreviousNext »

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.

Premium Members: Download this Video ( Must be logged in)
Subscribe to our YouTube page to watch all of the video tutorials!

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Subtle Typography</title>

	<style>
	body {
		background: #666;
		padding: 1em;
	}

	h1 {
		position: relative;
		font-size: 200px;
		margin-top: 0;
		font-family: 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif;
		text-shadow: 2px 3px 3px #292929;
		letter-spacing: -7px;
		-webkit-text-stroke: 1px white;
	
	}
	
	

	h1 a {
		text-decoration: none;
		color: #ffffff;
		position: absolute;

		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
		text-shadow: 0 2px 0 #e9e9e9;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		transition: all .3s;
	}
	
	h1 a:hover {
		color: #185a50;
	}

	h1:after {
		color: #dbdbdb;
		content : attr(data-title);
	}

	</style>
</head>
<body>
     <h1 data-title="Hello Readers"> <a href="#"> Hello Readers </a> </h1>
</body>
</html>

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • http://www.thebrisbaneline.com Web design portfolio

    nice! css3 is king!

    • Gerry

      Hi,

      CSS3 is time consuming – this stuff will never replace Adobe Products. That on mouse over made me laugh HA Naff man.

      Kind Regards,

      Gerry

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        That’s why you copy code like that to a TextExpander.

      • http://klonowski.me Karol

        o rly? Good luck having ‘Adobe Products’ dynamically changing your blog headings (ass suggested by Jeff).
        what does it mean, anyway. css3 is supposed to help you out, not to replace photoshop.

      • http://digitalrenewal.com Trisha

        time consuming? I think it takes longer to load photoshop than to type in this code.

      • http://www.ricoteck.net Jeff

        CSS3 is not meant to replace Adobe much less anything, and no one has implied such. However, on the other hand your beloved Adobe Products use an HTTP request (unless you are using Data URI in your CSS with MHTML for IE support) whereas CSS3properties are coming from a, hopefully, minified and optimized single HTTP request.

        I am a big fan of this use because it has a nice side effect: the ability to force people to design logos in a much more meaningful and reusable way. Logos have gotten out of control and by using text only with CSS3 effects you achieve a cleaner, reusable logo that is still highly identifiable with the site/company.

        Thanks for the great tut Jeff, always love your style. Keep producing them and I’ll stay a premium member. :-)

      • http://www.ravenousravendesign.com Heather Wood

        Whoa, Your totally out of line dude. I use Photoshop all day but If you can code something vs loading a graphic, why not? Your site will be that much faster while saving up space in your db.

      • Tom

        Thank you for the laughs at least.

  • http://think2loud.com Josh Lyford

    Very Cool. Got to love CSS3.

  • JR

    I haven’t been excited about a new language update in such a long time. CSS 3 looks amazing. Good tut.

  • Hassan

    CSS3 is _new_ – different vendors still even have their own prefixes for most things and own syntaxes for a lot of things. Once everything has been standardized, there are going to be tools that will make everything a _lot_ easier and faster. Anyone investing time on things at their prime are certainly going to be the master of them when those who lag behind are only beginning to catch up. So laugh now if you want, you’re going to cry at some point. No personal offense intended.

    • Hassan

      That was my reply to Gerry’s comment by the way…dunno why it didn’t show as a reply.

    • http://www.ifadey.com Fawad Hassan

      For example a tool for generating CSS3 gradient
      http://www.colorzilla.com/gradient-editor/

  • http://www.richardkotze.com Richard Kotze

    Nice one! – CSS 3 totally amazing!

  • http://isti37.eu IsTI37

    You can always make a screenshot of it, crop it and make old browsers envious.
    But doing this even in gimp is way easier.

  • Zach Curtis

    This is great and I love CSS, but why would I spend so much time trying to put browser/rendering engine specific tags in where a simple background image can be used and is consistent for all browsers?

  • http://mellados.com Marcos Mellado

    Nice tutorial! I added a link to it on my blog :)

    • Murillo John

      jajaja random que vi tu comentario en esta página jaja

  • Marcos

    Simple.. you avoid having to use an image that may take longer to load, or at least I personally find this better. Once it all becomes standardized it will be a better solution to do it with CSS than having to create an image, upload it and display it

  • ivange

    good tut, congrats, it really seems photoshop, the time worked with code is worth the pain by the result

  • http://blog.itsystem.fr claude

    Great !
    Thanks for sharing :-)

  • http://www.bee-digital.com neXib

    This just makes me depressed. I wish there would be full support for things like this.

  • http://www.silverjewelryworld.com Kam

    CSS3 is coming and i just spend a long time to find this video.
    Thanks.

  • http://jatazoulja.com jatazoulja

    Wow! CSS3 rocks! wonder why -moz is taking too long…

  • ArjayM

    Nice tut! By the way, can we use cufon here so that the text looks sharper? Also, sadly to say, this will not work in IE. Horraaay to FF and chrome and other browser supporting CSS3 and HTML5.

    • Herbert

      It will work in IE if you use CSS3 PIE.

  • paul

    ROCK ON CS3.

  • http://www.cornerofart.com Abdullah

    Thanks for this tutorial, but please I have question i am not understand what you mean about the:
    # -webkit-transition: all .3s;
    # -moz-transition: all .3s;
    # transition: all .3s;

    ???

    and 3s ???

    Please I’m waiting your answer.

  • http://sys-labs.com Syscl

    Simple yet cool effect, love it!

  • Mike Hopley

    Jeffrey, this is one of my absolute favourite posts of yours. :) I love how you’ve used CSS3 to create the kind of subtle text effects that normally require images. This is great for performance, and also makes life easier for developers. With a little care, the effect should also degrade gracefully in older browsers.

    At first I was concerned about the use of generated content (h1:after { content: “…” } ), because I thought this would make screen-readers say the heading twice. But it turns out that generated content is purely presentational, according to this article from Opera: http://dev.opera.com/articles/view/css-generated-content-techniques/

    The source files are even better than the video demo, because Jeffrey has embedded the generated content into a custom attribute on the HTML, and then accesses this using CSS. This is a brilliant trick for making the effect reusable. If you’re outputting the headings using a PHP helper function, then all the work would be done for you.

    Okay, so it’s technically invalid HTML. But who cares? The browsers certainly don’t, and neither do the users.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Absolutely. Thanks, Mike! Glad you enjoyed it.

  • http://www.rabbitdigital.com Wozza

    Fab tut, CSS3 just gets better :-)

  • Jarek

    Why You just not to do another file for style.css and another for HTTM ?
    IMO this code is not cean…

    But anyway – nice trick !

    • Jarek

      Sorry for mistake – “HTML” no httm :P

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Well of course you would separate the two. But this is a quick tip. :)

  • http://lance.compulsivetech.biz Lance S

    It is fast and easy to load without having the need to load images to the browser which can take time and bandwidth as well as space.

  • http://www.drivvedwebbyra.se Erik

    CSS3 is moving to fast for me!!! HOLD ON! I want to learn everything!

  • http://nilantha-piyasiri.blogspot.com Nilantha

    Nice tute. Thank you

  • http://ns-arts.qc.cx Thredz

    Thank you for this tuts, I typed at the same time during the video, good exercise for me.

  • http://www.cristianarenal.com.ar Web design portfolio

    Nice! CSS 3 <3

    Thanks for sharing =)

  • http://www.expotradeglobal.com Praveen

    CSS 3 is amazing. I wonder if this is IE9 compatible. Simple and nice effect.. Thank you for sharing..:-)

  • http://derek1906.site50.net Derek

    In:
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    “left bottombottom” ??? I think you repeated “bottom” twice…

    • http://derek1906.site50.net Derek

      And also this is not only using CSS3, it is also using HTML5. (the “data-title” part) :)

  • http://kisshonlapkeszites.hu Kiss Honlapkészítés

    Excellent post!
    Thank you, you have been most helpful.

  • http://www.2creative.se 2 Creative Studio

    Just what I was looking for! Thank you.

  • http://www.trcreative.co.uk trCreative

    The sooner all browsers can make use of CSS3 the better!

  • http://prodigm.ca/ Tim Lawless

    Only just found this site. Its awesome!

    some of the techniques on here make me feel really inexperienced. love the end results, though!

  • http://basewebdesign.co Stuart

    Nice tutorial, and a great effect. I’m hoping to put this technique to use on some of my upcoming projects. Thanks!

  • Kristin

    Lots of comments on Photoshop vs. CSS….some mention bandwidth….but so far no one has mentioned SEO…..real text can be found, not so much an image unless you want to rely on title or alt tags. I’ll take the extra coding work, thank you, even though I LOVE Photoshop. Also better for accessibility. Since this effect will mostly be used on headers (body copy not so much) it’s important your headers can be seen by readers and bots.

    • http://www.buildingwithblox.nl/ Danny

      Very true. I saw those comments and thought ‘what?!’. Though I’d put accessibility before SEO but thats a minor thing.

  • http://jonathangraft.com Jonathan Graft

    This is my first time seeing “data-title” used…what does “data-title” do/allow that regular ol’ “title” won’t?

  • Brian

    SO COOL.

  • http://spencerthayer.tumblr.com Spencer “Thunderball” Thayer

    Doesn’t display in any browser to look anything like the original picture.

  • Fender

    I think It’s pretty useless. We see the effects on a font sized at 200px, but normally the fonts are 13/24px and the effects wouldn’t be even visible.

← Older Comments