Transparent Borders and Shadow with background-clip
Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat. However, setting a transparent border on an element will reveal the elements own background underneath the border.
Fortunately there is a CSS3 property to save us! It’s called background-clip and it’s used specifically to specify which portion of the box model should be utilized to display the background. It does what it sounds like it does, it cuts off the background at the specified portion of the box. There are three values it can have, and vendor prefixes do get involved. Here are the three settings it could have. You wouldn’t use them all at once, this is for convenience of displaying only:
#lightbox {
background: #fff;
border: 15px solid rgba(0, 0, 0, 0.3);
-moz-border-radius:10px;
-moz-box-shadow: 0 0 1em #fff15b;
-webkit-box-shadow: 0 0 1em #fff15b;
box-shadow: 0 0 1em gold;
-moz-background-clip: border; /* Firefox 3.6 */
-webkit-background-clip: border; /* Safari 4? Chrome 6? */
background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: content; /* Firefox 3.6 */
-webkit-background-clip: content; /* Safari 4? Chrome 6? */
background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
So I’m sure you see where I’m going here… if we set the background-clip to the padding-box, the white background will end before the border and the transparency will lay over other content acheiving the look we are going for!
0 Comments