Create a Letterpress Effect with CSS Text-Shadow
Let’s start this list of tutorials with one that will definitely show you the potential of the text-shadow property. In this tutorial, you’ll learn how to create a stunning (and very popular these days) text effect using CSS and the text-shadow property.
» Read tutorial
Creating cross browser compatible CSS text shadows
Since text-shadow is a part of CSS3, some browsers (who said IE??) have not implemented it yet, and some hacks need to be used to make it work properly.
The following article will show you how to create cross browser compatible text shadows.
» Read tutorial
Improve the Quality of Bold Text in Safari with text-shadow
Although Mac OS X has a pretty good font rendering engine, bold text in Safari is often a bit dirty. Did you know that by using the text-shadow property you can create beautiful bold text? This article will show you how to.
» Read tutorial
CSS text-shadow Fun: Realtime Lighting Demo
Using the text-shadow CSS property as well as some JavaScript, humorous experimental effects can be created. If you haven’t already, you can definitely say goodbye to Flash.
» Read tutorial
Cross browser text shadow
The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8.
This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow.
» Read tutorial
Mootools text drop-shadow
When you need full cross-browser compatibility and still want to use CSS3 properties, JavaScript is always here to help. This tutorial will show you how to recreate the text-shadow CSS property using the MooTools JavaScript framework.
» Read tutorial
Text embossing technique with CSS
Text embossing is very popular in the world of web design and front-end web development. Indeed, even if I’m quite bored to see it on so many websites, it looks very nice.
And it is also very easy to implement. Just read this tutorial and you’ll know how to do it.
» Read tutorial
Photoshop like effects using CSS
Some browsers allow multiple values to the text-shadow property, which allow you to create effects like this one. I don’t think I’ll implement that kind of effect on any of my websites, but I’m happy to know how I can do it.
» Read tutorial
“Acid” text effect using text-shadow
Another nice text effect created using the text-shadow property. The page is in German, but fortunately everyone can understand the CSS code.
» Read tutorial
Super awesome buttons with CSS3
CSS buttons are very cool and they are a nice way to use your CSS3 skills. In this great tutorial, you’ll learn how to create stunning buttons using text-shadow and a few other CSS3 properties.
» Read tutorial
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
22 Comments
I’ve often wondered how I could change the effect of the text. I’m a bit worried about messing with the CSS file but if I make a copy of it I’m sure that will be OK.
This is great, so far this is the best place that I’ve found for info on CSS text shadow. Thanks for the awesome post.
text-shadow is a really cool property. Thanks for sharing these resources!
Thanks for the list Jean. I have it bookmarked on delicious for now. I’ve been hesitant to start using CSS3 in my website designs due to the lack of support. Even though I’m a die-hard FireFox user and think everyone should use it, I know the sad truth is many people still use IE. Do you know of any good resources, or tips, to use CSS3 but still provide good design to browsers that don’t support it, other than just using IE conditional tags or javascript browser sniffing? Thanks.
Some nice tutorials you have listed. I guess I have more info about CSs that I need to do some reading on. There are so many effects, it’s sometimes hard to keep up.
CSS3 could became very nice the next few years
Textshadow ist another one feature that nobody needs on websites. U have to much browser, witch doesn’t support css3. To have a nice Effect, u have to choose large font size an a colored background.
Awesome post – will be trying some of these techniques out with our imminent release of the new website. It’s always great to be pushing the boundaries of what is new in terms of CSS and accessible code. Keep up the good work.
useful link and i love letterpress effect, i done this only in Photoshop, but i dont kow we can make it thru css. ill try and apply for my blog
thanks heaps !!!
I particularly like the “Mootools text drop-shadow” tutorial – I’ll be definately implementing that one on my next site update. It looks quite professional / natural – not too “cheesy” at all!
Cheers.
SW.
Photoshop like effects using CSS – I’d hate to see that on my site anytime soon…very “Geocities-like”
Thanks! I will surely try this out. Great tutorials that you have listed. Will surely try it out in my website
Wow! great design. I loved to learn photoshop cause it is really big help for me to design my own sites.
“Photoshop like effects using CSS,” hurts my eyes! Haha, I probably wouldn’t use that on my site either
I think the Letterpress Effect is pretty cool.
Css + Images -> Flash Buttons
Thanks for this tutorials.
Bye
The text-shadow looks nice. Interesting feature.
This is really really helpful and came in a timely manner. I am gonna try implementing some of these tricks on my blogs, especially the super awesome buttons with css.I wasn’t really aware you could do so much with css. Thanks a bunch for this useful and super cool bags of tricks.
Photoshop like effects using CSS – I’d hate to see that on my site anytime soon…very “Geocities-likeâ€
What I like most is the photoshop like effects of CSS, multiple shadows. But, colors must not be too bright. Plain text shadows are also good too.
very interesting. I love trying this out. thank you for sharing.
Really useful. I tried for my website and gained a lot.
shadows and most other css3-effects don’t work in IE8 – why am i not surprised?
but the buttons are still cool.
5 Trackbacks
[...] 10 resources to get the most out of the CSS text-shadow property Share and Enjoy: [...]
[...] Direct Link [...]
[...] 10 resources to get the most out of the CSS text-shadow property Awesome resources for CSS Text-shadow property (tags: resources letterpress shadow tutorials css code hacks text) [...]
[...] 10 resources to get the most out of the CSS text-shadow property [...]
[...] you’d like to learn more about the text-shadow property, don’t forget to check out our list of resources to get the most out of the text-shadow property.p.shadowed { text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */ filter: [...]