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
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 Jeffrey Way
I'm the editor of Nettuts+, and help out on the Envato marketplaces.. I also (very infrequently) blog on my personal site. Feel free to check that out as well...if you're bored. Follow us on Twitter, and subscribe to the official Nettuts+ YouTube page if you want to live.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
nice! css3 is king!
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
That’s why you copy code like that to a TextExpander.
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.
time consuming? I think it takes longer to load photoshop than to type in this code.
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. :-)
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.
Very Cool. Got to love CSS3.
I haven’t been excited about a new language update in such a long time. CSS 3 looks amazing. Good tut.
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.
That was my reply to Gerry’s comment by the way…dunno why it didn’t show as a reply.
For example a tool for generating CSS3 gradient
http://www.colorzilla.com/gradient-editor/
Nice one! – CSS 3 totally amazing!
You can always make a screenshot of it, crop it and make old browsers envious.
But doing this even in gimp is way easier.
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?
Nice tutorial! I added a link to it on my blog :)
jajaja random que vi tu comentario en esta página jaja
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
good tut, congrats, it really seems photoshop, the time worked with code is worth the pain by the result
Great !
Thanks for sharing :-)
This just makes me depressed. I wish there would be full support for things like this.
CSS3 is coming and i just spend a long time to find this video.
Thanks.
Wow! CSS3 rocks! wonder why -moz is taking too long…
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.
It will work in IE if you use CSS3 PIE.
ROCK ON CS3.
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.
That is the animation part.
“.3s” means the duration is 0.3 second.
It is a part of CSS3 and you can read more here: http://www.the-art-of-web.com/css/timing-function/
Simple yet cool effect, love it!
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.
Absolutely. Thanks, Mike! Glad you enjoyed it.
Fab tut, CSS3 just gets better :-)
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 !
Sorry for mistake – “HTML” no httm :P
Well of course you would separate the two. But this is a quick tip. :)
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.
CSS3 is moving to fast for me!!! HOLD ON! I want to learn everything!
Nice tute. Thank you
Thank you for this tuts, I typed at the same time during the video, good exercise for me.
Nice! CSS 3 <3
Thanks for sharing =)
CSS 3 is amazing. I wonder if this is IE9 compatible. Simple and nice effect.. Thank you for sharing..:-)
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…
And also this is not only using CSS3, it is also using HTML5. (the “data-title” part) :)
Excellent post!
Thank you, you have been most helpful.
Just what I was looking for! Thank you.
The sooner all browsers can make use of CSS3 the better!
Only just found this site. Its awesome!
some of the techniques on here make me feel really inexperienced. love the end results, though!
Nice tutorial, and a great effect. I’m hoping to put this technique to use on some of my upcoming projects. Thanks!
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.