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

Jeffrey Way on Aug 12th 2010 with 121 comments

Tutorial Details

Topics Covered: CSS3
Difficulty: Moderate
Tut Format: 13 Minute Video

Download Source Files

Thanks for supporting the site, feel free to download the ZIP file for this tutorial.
Source files for this tutorial are available to Premium members.
Get a Premium Membership

Final Product What You'll Be Creating

Download Source Files

This entry is part 8 of 16 in the CSS3 Mastery Session
« Previous Next »

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

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. Also, I'm finishing up my latest book on Laravel Testing! 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

Christophor S. Wilson
This is great!!!
http://bennny.com Benny
Amazing!
Filipe Carrano Pacheco
Amazing indeed.
http://www.twitter.com/mamunabms Abdullah Al Mamun
Awesome!
http://www.jeffadams.co.uk Jeff Adams
This is GREAT thanks alot.
I’m finding that I’m using Photoshop less and less these days, it used to be all about the dropshadows and pixel perfect texts – but now with CSS3 it’s alot easier, plus something like Cufon reallyh helps.
My next Themeforest theme is going to be loaded with features like this :P
http://www.hamidoffice.com Heam
good job
Matt
Kind of pointless as half of the techniques used are only supported in ‘some’ browsers. Still, nice tut.

Anto
If you want to use it, use it. Hes just showing it is all. But browers will sort themselves out one day or another and make our lives easier.

http://twitter.com/kaizer1v kaizer1v
I believe, you can try using ChromeFrame, a Javascript Library. Have a look at, http://bit.ly/47jP6U

http://psdho.me PSDhome – Everyday free PHOTOSHOP files
Really looks like in PS. Thanks for tut.
Jonessie
OMG :)
Another great Tutorial from Jeff. If somebody showed me this and said it was created using PS I would have bet money on it. Awesome and one to be added to my favs.
http://webkicks.dotink.org Matthew J. Sahagian
I’m weary of the content being in the :after — this I think is the second Tut I’ve seen that does something like this, and I personally find it kind of disturbing. Not only does this not seem like the intention of :after… but it just creates all kinds of weirdness for dynamic content on sites.
Seems like that one aspect of it might be better to make as a JS based progressive enhancement.
Other than that, pretty nice.

http://webkicks.dotink.org Matthew J. Sahagian
On one additional note, I suppose this might not matter with something like HTML5 as you could use the attr() for the after content and presumably have a custom data- attribute that repeats the text. This would resolve having the static content in the CSS.
w1sh
I see your point, but if I’m not particularly concerned about what screen readers or search engines read, then adding that little :after tag makes this deal. The rest is pretty basic stuff, but that anchor:after trick with a shadow of it’s own is what makes it pop off the page.

http://webkicks.dotink.org Matthew J. Sahagian
It has nothing to do with screen readers and search engines… it has to do with code separation and where content belongs. The whole point of CSS is to separate your style from your content, the minute you start adding static content into CSS that flies out the window. Using the content: attr(data-whatever) would resolve this by allowing you to add a data-shadowtext=”" attribute or something of that nature, but until then, who wants a constant string stuck in their CSS with a header?
What happens when you’re header is in a database is gets dynamically included in the page? Now you need to run your CSS through your back end scripting language to place the same dynamic content? It breaks the whole model.

http://www.jeffrey-way.com Jeffrey Way
Author
Hey Matthew –
Good points. A couple quick notes:
1) You’re right. But more than disturbing, it’s the only way I know to create text gradients *right now*. These types of quick tips are more about the “how to do it if you wanted to,” than for every day usage.
2) I hard coded the content into the :after to save time, but have just now updated the code above to make things a bit more separated and dynamic.
Thanks for your thoughts! :)

http://badassjs.com/ Devon Govett
Hey Jeffrey,
There is another way to create text gradients, however it only works in webkit based browsers right now.
If you set the color of the text to transparent, the background to a -webkit-gradient, and add the -webkit-background-clip: text property to it, you can get any gradient you desire. For example:
h1 {
color: transparent;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(orange));
-webkit-background-clip: text;
}
Granted, it doesn’t yet work in any other browsers, but hopefully it will work there soon.
Cheers!
Devon

http://blackfruit.de Daniel
This looks really great! I really like those CSS tips!
Thank you!
http://laroouse.com piyanistll
perfect thanks for sharing
http://www.artjunks.com Artjunks
Yea…
nice PS-Style…
looking good :D
Jeroen
Don’t want to get all bitchy on you Jeffrey, but probably on your screencast the Myriad font is not installed and it switches back to Helvetica later defined in the Font stack, should probably change that I guess or make a note ;)

http://www.jeffrey-way.com Jeffrey Way
Author
Haha – How’d I miss that? I forgot the dash in the name. :)

http://jaiunblog.com ben
hi,
try this ?
#18. font-family: ‘Myriad Pro’, Myriad, helvetica, arial, sans-serif;

w1sh
Love this one. Beautiful effect. Going to test it in FF/IE right now and see if I can come up with a really nice version.
http://www.aplaceformyhead.co.uk Matt Fairbrass
Very nice effect. I really like subtle design things like this, enhances everything nicely.
Aravind
Nice work….
http://www.newschoolmagazine.com Erik Kubitschek
A progressive era for Web Dev, nice, very nice post.
http://www.vagrantradio.com Jason
But does it work in IE6? *ducks* Sorry, had to, move along.
http://www.absolutpromocoes.com.br Murillo
Good Job!
Jeef, can you show us something using the html5 boilerplate?
Thx!
http://christopher-scott.com Christopher Scott
Nice; good example of transitions… great stuff
http://www.aediscreative.com Christopher
I often forget you can play with tracking in css with the letterspacing property. It does so much to improve web typography. Excellent tut.
m4niac
is it cross-browser? or, to be more specific… do all browsers are now CSS3-ready? :)

Anto
No they arn’t.
http://byte-news.com Ahmed “C.Z”
Well you can always use CSS3 pie :)
CSS3Pie.Com

http://devirtuoso.com Shawn Andrews
Love CSS3Pie…A life changing experience. ;)

Liam
I find it ironic how the example text at the top is an image rather then actual html text.
http://www.thedevelopertuts.com thedevelopertuts
So … I can now start doing a web version of photoshop for html ? :)
kab00m
TNX for sharing! \m/
http://www.tenaxtechnologies.com Website development
Thanks for sharing
http://www.robertjamesphillips.com Rob Phillips
It looks great, it’s just a shame that it’s pointless to implement as any large scale site which will have to cater to those browsers which we all hate. It’s a tough one.
Soni Budi Wicaksono
zuper fun-tastic! i think typography contributes to create senses of well-formed and captivating graphics design while we designing the web..
http://hammystudio.com Stephen Hamilton
Good to see that YouTube’s new 15min time limit is being made use of. Keep up the good work, Jeffrey. Now if only the other browsers would implement these things…
lafncow
Undeniably beautiful, but am I the only one who finds -moz and -webkit just as unacceptable as the proprietary differences MS has built into IE? I’m not knocking this tut, it’s great, but I’m annoyed with Mozilla and Google: more hacking is not progress!

http://michaelkral.com Michael Kral
Correct me if I’m wrong, but I thought the -moz -webkit was temporary as they decide a web standard. in “the future” you shouldn’t need to use this.

lafncow
Nope, you’re totally right, my mistake! Party on…

Sahan
PSD vs CSS huh? :)
http://wparena.com wparena
CSS really invading the web technology and helping designers and developers and creating ease from hard work of Photoshop
http://www.jsxtech.com Jaspal Singh
Great tutorial with CSS3 Typography.
Thanks for sharing.
http://byte-news.com Ahmed “C.Z”
Hey Jeffrey
well that’s was a very great tut
thanks for explaining the rgba
i have known the rgb but didn’t know what’s the meaning of the a “red green blue and then what is the a for XD” that’s was one of the must useful thing for me in these tut because it was the only thing i didn’t know it :) :)
i think that CSS3 is the biggest enemy for the future of photoshop web designing “gradient ,shadows ,@font-face ,stroke and mask image” those things well decrease photoshop need in web designing don’t you think so ??

http://ndcweb.org/ Nikolai
I totally agree with you. Will come a time in which designers will use Photoshop just to see the entire pre-design and then there will be almost no slices, except for the pictures :)
But there is still plenty of time until this happens :)
and Jeffrey, great article … again :)

prashant
What is wrong with you Jeffrey? Was that really tough and new for CSS3 users? These days you are not doing quality posts and doing some fillers. I am Great fan of envato network and am very upset form such posts. Its better not to write anything. Your blog is known for its quality and not quantity. Please maintain that.
Thanks
Prashant

http://www.jeffrey-way.com Jeffrey Way
Author
Actually yes – these are new techniques. And this is a quick tip – not a full tutorial. Thx.

http://www.linkbuildingservices.com harly
What a nice tutorial CSS3. Great explanations Thanks for the nice stuff.
http://www.jauhari.net/ Jauhari
Wonderful tutorial… CSS3 is the way you design ;)
http://www.iguoguo.net 爱果果酷站
css3真是非常的神奇
css3 is a miracle.
http://itpastorn.blogspot.com/ Lars Gunther
Its always nice to see new experiments with CSS. The effect is quite cool.
However there is one thing that would make this demo even more awesome. Firefox 3.6+ does gradients. In fact, it does gradients with a syntax more close to what will become the W3C standard. Perhaps one could apply the -moz-gradient on the text directly, if one does not wish to mess with the SVG masks and filter effects that are new in Firefox 4 and the equivalent of webkit-mask (and some).
Also, while Im at it, Firefox is getting -moz-font-feature properties that could be used to achieve some cool effects as well: http://hacks.mozilla.org/2009/10/font-control-for-designers/
http://www.conceptopixel.com Luis Lopez G
So in a few words:
Its like photoshop, you make a big text with a drop shadow, then add a white 1px stroke and put a light-gray to white gradient with 90° but with css! cool I didn’t know that -moz-text-stroke and I think it’s awesome.
Thanks dude.
http://www.savioursix.com SaviourSix
Seems like a really long way to skin the cat, but a very useful tut anyway! Thanks.
BJ
Very nice..
Patrick
…and no word about compatibility. Just only works in Webkit-Browsers. No fallbacks for other browsers.
Yeah, reeeaaalllyyy nice work.
http://blogtipswriter.com Huynh Tho
Wonderful! I can’t imagine CSS3 can do such a thing like this
Hassan
You can use multiple text shadows for the 3d effect. Safari/Chrome, Firefox and Opera all support multiple text shadows. I don’t currently have IE9 so don’t know about that.
http://www.websitetemplates.bz/ Dima
Thank you, guys
I found this information extremely useful for myself
CorvosKK
Absolutely awesome article! I can’t wait till we can start using this in mainstream projects. It won’t be long!
And I’m sure you’ve been asked this before, but what do you use to record your video tutorials? I have been using Jing lately, but even the pro version will only let you record up to 5 minutes of video.
Thanks for another cool tutorial
CorvosKK
After reading Devon Govett’s post, I tried the technique out and wanted to mention that while it does work in webkit browsers, as soon as you begin applying other styles, such as text-shadow, it breaks the styling, placing the text-shadow above the text in the z-index.
Here’s the preview of what it’s doing: http://screencast.com/t/MDNmYWVmZTk
http://jmonit Monit
This is Awesome!
Many thanks Jeff
Monit