This is one of the easiest techniques: Simply add a text-shadow style to your text. The style has 4 parts: color, x shift, y shift, and blur amount. I use pixels (px) to specify the last 3, but I suppose there are other units of measure that would work.
So, the paragraph to my left has a text-shadow style of:
text-shadow:
rgba(50,50,50,0.7)
0px -2px 1px
Note that another of my favorite WebKit-only styles is the ability specify colors with alpha values; hence, the rgba call, which says use red, green, and blue values of 50, and an alpha value of 0.7. Tremendously useful when applying text-shadows! This CSS 3.0 style is listed on another demo page in this article.
This demo also incorporates CSS rounded corners and CSS drop shadows from an earlier entry.
Surprisingly, this very basic effect from the CSS2 specification has only been implemented in Safari/WebKit. The effect lets you add a shadow to text, much as you can in any Mac OS X Cocoa application that has an editable document.Surprisingly, this very basic effect from the CSS2 specification has only been implemented in Safari/WebKit. The effect lets you add a shadow to text, much as you can in any Mac OS X Cocoa application that has an editable document.Surprisingly, this very basic effect from the CSS2 specification has only been implemented in Safari/WebKit. The effect lets you add a shadow to text, much as you can in any Mac OS X Cocoa application that has an editable document.Moving right along, Apple has foreseen a need that hasn't yet made it formally into the W3C specification for CSS3, though I'll be surprised if it doesn't sooner or later. In addition to adding shadow to textual elements, it's commonly desirable to add strokes to text glyphs as well. That's what this implementation does. This demo for this CSS3 style is not yet prepared, but you can visit
the Surfin' Safari blog to read more about it in the meantime.
According to WebKit's
draft submission of this spec to the W3C, Transitions are the primary proposed CSS 3.0 class, with Animations described as an extension. Whatever the technical language, these new CSS features are truly awesome additions to the web designer's toolkit. The
introductory article on the WebKit blog has some excellent demos of Transitions/Animations, as well as a good summary of what they are and how they work.
This feature is so new---it just came out today (April 14, 2008)---that I have only begun to consider the implications. Needless to say, a part of me went "Yipee!" at the thought, and I look forward to trying it out. So far, all I know is what's on the
WebKit blog article that describes CSS Gradients and which provides a series of demos for them. Enjoy!