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

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

Tutorial Details
  • Topics Covered: CSS3
  • Difficulty: Moderate
  • Tut Format: 13 Minute Video
Download Source Files

Final Product What You'll Be Creating

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.

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

Add Comment

Discussion 115 Comments

Comment Page 2 of 2 1 2
    • Gerry says:

      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

      • Jeffrey Way says:
        Author

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

      • Karol says:

        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.

      • Trisha says:

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

      • Jeff says:

        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. :-)

      • Heather Wood says:

        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.

  1. Josh Lyford says:

    Very Cool. Got to love CSS3.

  2. JR says:

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

  3. Hassan says:

    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.

  4. Nice one! – CSS 3 totally amazing!

  5. IsTI37 says:

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

  6. Zach Curtis says:

    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?

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

  8. Marcos says:

    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

  9. ivange says:

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

  10. claude says:

    Great !
    Thanks for sharing :-)

  11. neXib says:

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

  12. Kam says:

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

  13. jatazoulja says:

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

  14. ArjayM says:

    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.

  15. paul says:

    ROCK ON CS3.

  16. Abdullah says:

    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.

  17. Syscl says:

    Simple yet cool effect, love it!

  18. Mike Hopley says:

    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.

  19. Wozza says:

    Fab tut, CSS3 just gets better :-)

  20. Jarek says:

    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 !

  21. Lance S says:

    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.

  22. Erik says:

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

  23. Nilantha says:

    Nice tute. Thank you

  24. Thredz says:

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

  25. Nice! CSS 3 <3

    Thanks for sharing =)

  26. Praveen says:

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

  27. Derek says:

    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…

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

  29. Just what I was looking for! Thank you.

  30. trCreative says:

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

  31. Tim Lawless says:

    Only just found this site. Its awesome!

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

  32. Stuart says:

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

  33. Kristin says:

    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.

Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.