Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Background clip is very similar to background origin with a main difference being that it affects the actual painting of the background, not just its starting point. So let's take a closer look at that. I have the background_clip.htm open and the structure's pretty much the same thing we had before, so a single div tag and it's just sort of positioned with a background image inside of it. Again, we have that sort of translucent border that's going to help us understand where the background image is being painted.
To give you a little bit more information, remember we have some padding on this. We have 25 pixels worth of padding all the way around the edges. Okay. So now what I am going to do is go down to my #one selector and I'm going to go ahead and write the background clip properties, so -moz-background-clip and once again I am going to do content- box, even though content does seem to be accepted by all the browsers. I am going to stick with the standard and use the -box. Copy that and paste it two more times, add webkit, and take away the vendor prefix.
Okay, so now let's save and preview that again and now we see a really dramatically different background image. Essentially what's happening is the painting of the background has now been clipped to the content area, so the padding is being ignored. Now I want you to pay special attention here to the fact that it's not just the background image. It's the entire background itself. Color, image, everything. So this is a nice way of sort of ignoring the border and the padding on an image and painting that background into a specific area. So that one capability is probably going to really help you out in several instances.
Let's try some of the alternates. We know padding-box is the default, so let's try border-box. So padding-box is the default just as it is for background origin. So I'll save that, preview that again, and now you can see the background is actually painting all the way to the edge. Now the really interesting thing about this, guys, is it's kind of hard to see. Probably you should make the background maybe a little darker, so that you can see the border being translucent. But the background is being painted now all the way up to the very edge of the border, not to the start to the border but all the way through it.
When you're dealing with semitransparent borders this can make a big difference with certain backgrounds. So I am going to go ahead and close out of that. Now while the difference between the last one I just showed you, the border-box and padding-box clipping, they're not likely to be noticeable unless you have a really custom border or you're using some type of a border image. However, that content clip property, it does creates some really compelling opportunities. Keep in mind the early nature of support for this property, as you begin to think about using it, and you really want to take care when combining this property with multiple backgrounds is it can have some unintended side effects.
Now like all CSS3 features, I recommend thoroughly experimenting with this property to see how it can help you in your own styles.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.