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
This is great!!!
Amazing!
Amazing indeed.
Awesome!
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
good job
Kind of pointless as half of the techniques used are only supported in ‘some’ browsers. Still, nice tut.
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.
I believe, you can try using ChromeFrame, a Javascript Library. Have a look at, http://bit.ly/47jP6U
Really looks like in PS. Thanks for tut.
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.
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.
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.
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.
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.
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! :)
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
This looks really great! I really like those CSS tips!
Thank you!
perfect thanks for sharing
Yea…
nice PS-Style…
looking good :D
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 ;)
Haha – How’d I miss that? I forgot the dash in the name. :)
hi,
try this ?
#18. font-family: ‘Myriad Pro’, Myriad, helvetica, arial, sans-serif;
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.
Very nice effect. I really like subtle design things like this, enhances everything nicely.
Nice work….
A progressive era for Web Dev, nice, very nice post.
But does it work in IE6? *ducks* Sorry, had to, move along.
Good Job!
Jeef, can you show us something using the html5 boilerplate?
Thx!
Nice; good example of transitions… great stuff
I often forget you can play with tracking in css with the letterspacing property. It does so much to improve web typography. Excellent tut.
is it cross-browser? or, to be more specific… do all browsers are now CSS3-ready? :)
No they arn’t.
Well you can always use CSS3 pie :)
CSS3Pie.Com
Love CSS3Pie…A life changing experience. ;)
I find it ironic how the example text at the top is an image rather then actual html text.
So … I can now start doing a web version of photoshop for html ? :)
TNX for sharing! \m/
Thanks for sharing
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.
zuper fun-tastic! i think typography contributes to create senses of well-formed and captivating graphics design while we designing the web..
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…
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!
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.
Nope, you’re totally right, my mistake! Party on…
PSD vs CSS huh? :)
CSS really invading the web technology and helping designers and developers and creating ease from hard work of Photoshop
Great tutorial with CSS3 Typography.
Thanks for sharing.
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 ??
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 :)
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
Actually yes – these are new techniques. And this is a quick tip – not a full tutorial. Thx.
What a nice tutorial CSS3. Great explanations Thanks for the nice stuff.
Wonderful tutorial… CSS3 is the way you design ;)
css3真是非常的神奇
css3 is a miracle.
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/
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.
Seems like a really long way to skin the cat, but a very useful tut anyway! Thanks.
Very nice..
…and no word about compatibility. Just only works in Webkit-Browsers. No fallbacks for other browsers.
Yeah, reeeaaalllyyy nice work.
Wonderful! I can’t imagine CSS3 can do such a thing like this
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.
Thank you, guys
I found this information extremely useful for myself
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
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
This is Awesome!
Many thanks Jeff
Monit