Achieving Apple-LikeText in CSS

Ever wondered how those websites generate the "engraved-in-metal" effect of their texts that you commonly see with Apple products or simply something that looks like this:

Apple iPhone4

It's pretty simple! Just add this to your css:

.engraved-in-metal {
    /** VALUES:
     *   1. offset-x, or horizontal offset
     *   2. offset-y, or vertical offset
     *   3. blur value
     *   4. color 
     */
    text-shadow: 0 1px 0 white;
}

And then implement it in your html:

<h1 class="engraved-in-metal" >Apple iPhone4</h1>

And voila! you'll get this result:

Apple iPhone4

As for browser support:

Broswer	Supported?
Safari 3.1 (Mac/Win)	yes
Safari 4 (Mac/Win)	yes
Opera 9.5 (Mac/Win/Lin)	yes
Firefox 2/3 (Mac/Win/Lin)	no
Firefox 3.1/3.5 (Mac/Win/Lin)	yes
Google Chrome 1 (Win)	no
Google Chrome 2 (Win)	yes
IE 7/8 (Win)	no
Shiira (Mac)	yes
Konqueror (Lin/Mac/Win)	yes
iCab (Mac)	yes
Epiphany (Lin)	yes
Safari on iPhone	yes
Nokia Symbian-Smartphones (Series 60)	yes
Opera Mini 4.1	yes

That's all for now! :)