With all the excitement over the flashy new stuff in CSS3 (like transitions, transforms, and keyframe animations), some other properties may get pushed into the … well… background.
The CSS3 spec has introduced some new properties related to backgrounds. Here’s a quick and dirty description, along with a few examples, of one of those properties: background-clip.
This property is quite simple. It tells the browser how far the background should visibly extend. It accepts one of three values:
content-box. If you set it to
border-box, the background will be visible into the border areas. If you set it to
padding-box, the background will not be visible in the border area, but will be visible in the padding and content area. If you set it to
content-box, the background will be clipped by any padding.
The same box (100×100) is shown in all three examples above. Each box has a transparent border of 5px and 20px of inner padding on all sides. The one on the right appears much smaller because the background only shows where the inside of the padding edge starts. The one in the middle appears about 5px smaller on each side, because the background is clipped where the 5px border begins.
Naturally, in order for this property to make any difference in the way the element looks, the element needs a background of some sort, plus (in most cases) a transparent border, or else some padding.
Works in IE9+, Firefox 4+, Chrome 4+ (with
-webkit-), Safari 4+ (with
-webkit-), and Opera 10.53+ (but apparently has bugs but fixed in 11+).
background-clipwith the standard syntax, FF up to version 3.6 offers partial support using
-moz-— but FF3.6 does not support the value “content-box”. Complicating things even more, FF3.6 will only accept the “border-box” and “padding-box” values if you use the old syntax “border” and “padding” (no “-box”), along with the
-moz-prefix. Also, FF4+ will not accept the old syntax, nor will it accept vendor prefixes, only the standard syntax. More info here.
Anyone have any ideas on how this might be used? I suppose a hover state that changes the clip value could be employed. It could also be effective when used with transitions or keyframe animations. Would love to hear your feedback.