Embossed Titles with CSS3


While we haven’t reached a solid point of browser compatibility for CSS3 and HTML5 yet there are some exciting features that are ready for implementation. The trick with using the latest and greatest in HTML and CSS technology is to be sure that those who are not blessed with the most updated of browsing experiences are not alienated by your site.

A few of the new CSS3 features that I have started to use on a regular basis within my web designs are border-radius, box-shadow and text-shadow. The reason I feel comfortable using these features is because they degrade nicely to IE or outdated browsers. While losing shadows and having square corners instead of nice rounded ones will make for less of a visual experience the fact of the matter is that the site will still function the same way, the content will all still be presented properly and be readable.

For this post we are going to focus on the text-shadow property and how you can use it to add some ‘pop’ to your headlines and titles.

Lets take a look at the property:

text-shadow properties

A positive number in the x-offset slot will move the shadow right while a negative number will move it left. Along the same lines a positive number in the y-offset slot will move the shadow down while a negative number moves it up.

Multiple text-shadows can be applied to a single element which gives a pretty good deal of flexibility to the property. In order to emboss our headline we are going to use the text-shadow property to place a lighter color directly below the text and a darker color above and slightly to the left to give a sense of a light source.

Here is what our final product should look like:

Title Preview

Screenshot from Google Chrome on Mac OS:X

For those with Chrome or Safari check out the live demonstration.

You can check out the full source there but here we want to highlight the important part of the CSS. Here is the text-shadow property we applied to the above headline:

text-shadow: #F00 0px 1px 2px, #000 -1px -1px 2px;

The first shadow is a straight red color to contrast slightly with the darker red in the background. We have this shadow lined up straight on the x-axis and set 1 pixel under on the y-axis. The comma seperates the two shadows and the second shadow uses negative values to sit 1 pixel left and 1 pixel up from the top of the text. Both shadows use a 2 pixel blur.

It may be worth noting that setting a negative value on either axis will move the shadow up or left starting at the top of the text, not the bottom. So for example if your text is 30 pixels tall and you want to place an inner shadow 1 pixel off you only need to insert -1px instead of -31px.

Of course users browsing on IE or Firefox will just see a white headline but the good thing is that this white headline on the red text still looks fine and is most certainly readable.

How about you?

Are you starting to incorporate the new CSS3 and HTML5 properties into your web sites? If so which ones are you finding the most fun or helpful?

Leave a Reply

XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>