Text Shadow

Just a basic drop shadow effect applied to this header.

WebKit’s Background Clip

In order to use this property, the color attribute is set to transparent, so browsers that do not employ -webkit-background-clip would show this header as invisible.

Combining Both

In the current version of WebKit, this should show the background clipping, but not text-shadow.

Inherit Padding Value

Something I noticed while writing this code example. Our outer div uses padding which apparently affects the header's -webkit-background-clip. I added the dotted border to illustrate to point.

In the first three examples, there is no top or left padding to affect the header. Something to keep in mind.

© Martini Lab