background-clip: text
Posted by Dave Hyatt on Thursday, March 20th, 2008 at 4:54 pmCSS3 has introduced a property called background-clip that can be used to clip backgrounds to either the border, padding or content box. I have extended this property with a fourth value, text, that causes the background image to clip to foreground text (including decorations and shadows). The shape of the foreground content (including alpha transparency in the content) is applied as a mask to clip background drawing for the box.
Here is an example:
<div style="background: url(http://webkit.org/images/green-background.png), black; border:5px solid black; padding:5px; -webkit-background-clip: text, border; color: transparent">
This background clips to the text.
</div>
And here is how it looks (if you try it out in ToT):
This background clips to the text.
This effect can be used with -webkit-text-stroke and a transparent -webkit-text-fill-color to create text with stroked outlines that is “filled” with the background.
In addition, this visual effect can work with fixed backgrounds, so that text can look like it’s “punching a hole” through to the viewport.
March 20th, 2008 at 5:04 pm
Very clever. I assume this will be in the next nightly?
March 20th, 2008 at 7:39 pm
It is, very nice
March 20th, 2008 at 7:46 pm
I appreciate the “text” clip option; it seems like a very natural extension to the options already among the proposed standard. Experimenting with it was also a nice excuse to play with the features in Safari 3.1’s Develop menu like the Web Inspector and the Snippet Editor.
A couple of questions:
1. The code segment is a div and the example is a span, I’m guessing that was a change needed due to being in a blog (or perhaps made automatically) and no intended consequences there. Correct?
2. Should this have an effect on the color specified in text-shadow? In the snippet editor, if one changes the box fill from black to navy (or white or olivedrab to make things show a bit clearer) and then adds text-shadow: 2px 2px 10px #990033; to the end, one sees a text shadow devoid of color. When one changes the color: transparent to goldenrod (or something else) one can see the reddish text-shadow specified. My guess is that the text-shadow is ignored because of the transparent color (necessary to see the background-clip fill image) but I’m not certain if that is indeed the intent. (Or maybe I’m just all rusty in my CSS).
Thanks for the progress webkit is making filling out the spec as well as pushing them in new directions.
March 20th, 2008 at 8:06 pm
Why isn’t it possible to specify backround gradients in CSS, rather than relying on images? This seems like such basic functionality, yet I haven’t seen anything about it in the CSS3 draft spec.
March 20th, 2008 at 8:31 pm
Thanks for adding this feature! I was hoping something like this would be coming down the pipeline. :O)
March 20th, 2008 at 8:35 pm
Googling shows gradients have been suggested for CSS3 for many years, I agree they seem an obvious and easy thing to include and very widely used – just look at this page for example! Someone who knows more may be able to point out that it’s already in a spec or a good reason why it isn’t…
March 21st, 2008 at 1:35 am
My understanding of gradients in CSS backgrounds, is that, although it has been discussed, it won’t be included as this is the area of the SVG working group. There is no real point in overlapping the work that the CSS and SVG people are doing. And as we are seeing, the SVG support in browsers is now starting to come along quite nicely.
Very nice work on the background-clip!
March 21st, 2008 at 3:26 am
Yes, gradient backgrounds have been suggested for CSS3, but nothing has been decided yet. With browsers implementing SVG, it should soon become possible to use a SVG file as background image, which makes it relatively easy to add a gradient background. This is already working in the Opera 9.5 test builds. I’ve used this on my site http://people.opera.com/rijk/opera/ . I have to say though that something in support for simple gradients in CSS would still be easier.
March 21st, 2008 at 4:25 am
Hmm, an interesting and quite logical proposal.
On the subject of SVG files as CSS backgrounds, I’ve read that this is supposed to be supported in Safari 3.1. However, it doesn’t actually appear to work in most examples I’ve seen that do work in Opera 9.5. Is this a bug that is being worked on?
March 21st, 2008 at 4:27 am
Well, I can’t believe using SVG for a background image can be hard to implement. I imagine it could be quite useful for other things, such as generating ‘button’ images etc, assuming the SVG can be scaled neatly to fill a div…
March 21st, 2008 at 7:16 am
If I understand this correctly, the whole background will be visible in browsers that don’t support background-clip:text. I don’t think that’s nice degradation. I’d rather have fallback to similar, solid text color, but that is not possible if there’s risk of background being shown behind the text.
I think making this a completely new property, like text-background:, would be much better.
March 21st, 2008 at 9:08 am
@Fyrd: Using SVG in this case and also as src attribute for img element is currently limited to svg files with explicit width
and height set. Check this comment for details: http://bugs.webkit.org/show_bug.cgi?id=5971#c23
March 21st, 2008 at 10:28 am
@Robert Blaut
I see. Seems rather limiting to me, so I hope support for variable width SVG files will be added eventually too.
March 21st, 2008 at 12:25 pm
kL: Actually it’s pretty easy to make it degrade gracefully just by using multiple background layers. Other browsers reject multiple backgrounds.
March 25th, 2008 at 6:37 am
@hyatt: Actually your example doesn’t degrade gracefully because it uses color: transparent. Both the background and background-clip are ignored by older/other UAs, leaving transparent text on a white page.