-
200821 Mar
Posted in Browsers, CSS3 Previews
Yesterday Dave announced that the team have introduced a new proprietary value for the CSS3 ‘background-clip’ property.The new value “…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.”
I have come up with a few examples that show the new value being used in several different scenarios:-
- Background clips to text (Screenshot)
- Background clips to text (with text-shadow applied) (Screenshot)
- Background clips to text-stroke (Screenshot)
- Background clips to text-stroke (with text-decoration applied) (Screenshot)
Needless to say that you need to download the latest nightly to view the live examples. I have also included screenshots of each example (background image is a subtle vertical gradient).
You can skip to the end and leave a response.
-
Comments
-
01.
Paul says:Comment » March 21st, 2008 at 3:46 pm
Why not post a screenshot of what it should look like too?
-
02.
-
03.
-
04.
Nice to see masking work like this. Does SVG do masking? It would be really cool to do making for odd and wierd shapes on a site to get more complicated layouts. Lets say you wanted your header have stars cut out of the bottom but blend in perfectly and scale with the size of the content or something.
-
05.
jet20 says:Comment » March 22nd, 2008 at 12:17 am
Proprietary stuff is only bad as long as it comes from Microsoft, is it?
-
06.
@jet20: CSS3 isn’t even finalized yet and to use the background clipping feature you have to use the prefixed property name ‘-webkit-background-clip’. What’s evil about that?
-
07.
@Joachim, Remember the marquee tag? The thing that bothers me is with all these stupid -some-random-browser tags in my css. Check out the css for this site:
#menu li#active a {
border-top-right-radius: 9px;
-o-border-top-right-radius: 9px;
-icab-border-top-right-radius: 9px;
-khtml-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
-webkit-border-top-right-radius: 9px;
border-top-left-radius: 9px;
-o-border-top-left-radius: 9px;
-icab-border-top-left-radius: 9px;
-khtml-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-left-radius: 9px;
-webkit-box-shadow: 2px -2px 2px #aaa;
-khtml-box-shadow: 2px -2px 2px #aaa;
border: 1px solid #CFCFCF;
border-bottom-color: #fff;
background-color: #fff;
font-weight: bold;
}good god! Let’s get on the same page browsers.
-
08.
@Neal G, I know – it’s a real pain. The W3C is to blame here, not the browser makers.
-
09.
Doesn’t work on the latest Safari nightly for windows.
-
10.
Michael Johnson says:Comment » March 24th, 2008 at 5:32 pm
@Neal G and @Joachim:
But if it weren’t for the vendor prefixes, the vendors couldn’t push the limits and/or implement not-quite-ready CSS properties. With them, they can without worrying about breaking things too much. If you’re using the vendor prefix, you know you’re working with a not-quite-ready feature.
I think it’s a great mechanism. Where it falls apart is when a developer wants to make a *public* page that pushes the limits and may break browsers if it vendor prefixes didn’t exist. Is that really a problem?
-
11.
@Neal G
I find that Safari seems to use the -khtml- prefix anyway. Like you don’t need the -webkit- one but just the -khtml- one. Has anyone notice this?
-
12.
Perhaps “not quite ready” should wait until it is ready.
-
13.
Neal G: but then we couldn’t already use rounded borders and other nice upcoming features (like opacity in the past). Also, that gives these features some exposure, which helps to further develop them and to get feedback and bug reports on them.
You have the option to use them, but if you don’t want to, you don’t have to. On a side note, in your example above, you’re overdoing it… I only bother with the -moz and -webkit prefixes myself, and will end up removing them once a stable release of Firefox implements the prefix-less equivalents.
-
14.
@ Neal G
Safari is now the browser with the most support for CSS3. With the full support now for of Structural Selectors it has now leap frogged Opera. Point Safari 3.1 at this page.
http://css-class.com/test/css/css.htm
Safari isn’t at the top of the honor roll for no reason and the page does degrade dramatically as you progress down the list of browsers. Yes my CSS is full of prefixes but this page and the CSS3 examples do show the wonders of CSS3.
Take note of my faux column on the right. There is no background-repeat there but rather I using background background-size with one tiny image (148px by 78px).
-
15.
I think it’s fine for browser makers to introduce prefixed features, as long as they submit documentation to the W3C which will allow the new feature to be reviewed and revised.
-
16.
@Stifu I didn’t make that code up, just stole it from css3.info since this site uses a lot of css3.
I’ve been messing with some of the new css3 things in Safari and I can’t wait until browsers that people actually use more than 3% of the time implement these as well. Won’t have to open up Fireworks as often as I do now.
-
17.
captain obvious says:Comment » March 27th, 2008 at 3:23 am
Common sense should have made everyone realize years ago that most of the features of Photoshop’s Layer Styles make total sense in the web browser or any other visual medium (especially since the other major visual mediums (tv & print) are overflowing with billions of examples of graphic design making use of layer-style-like visual effects.)
-
18.
Dies ist ein gro?er Ort. Ich m?chte hier noch einmal.
-
19.
It would be nice to see background-clip clipping a certain area of the image background-clip: rect(5px 15px 15px 5px) like we see in the https://developer.mozilla.org/en/CSS/-moz-image-region.
This definitely would improve css sprites. -
20.
I tried to emulate this property on inline-svg for Mozilla and Opera:
http://www.myadzel.ru/tests/html/text-background/
Sort happened.
- 21.
-
01.
