–webkit-​background-​clip Problems

Someday, all the nifty Photoshop Blending options will be avail­able as CSS prop­er­ties. Mark my words! In the mean time, we’re kind of stuck with drop shad­ows, and now gra­di­ents (and text strokes) for WebKit browsers. Too bad you can’t use them together.

In order to take advan­tage of the back­ground clip­ping, the color needs to be trans­par­ent. First off, that pretty much ruins any other browser from dis­play­ing text. So this is only use­ful to Safari users (not even the iPhone cur­rently sup­ports it). In Photoshop, you can get around hav­ing a trans­par­ent color and still hav­ing a drop shadow by set­ting that lay­ers Fill Opacity to 0% while the lay­ers opac­ity at 100%.

Also, using this tech­nique has some odd behav­ior with padding. In my exam­ple, I couldn’t set padding to the par­ent div with­out the effect inher­it­ing that padding. Restating the padding didn’t affect it either.

Here is the exam­ple: webkit-background-clip.html

Now, you can add the -webkit-text-stroke and that will work with text-shadow, but only on the stroke and not the text. I’ve yet to find an exam­ple that uses all three with­out look­ing like one of Superjail’s Doctor’s genetic exper­i­ments.

Perhaps it is for the best, get­ting these to work together might have been the next blink.