4.3 CSS3 Borders and Backgrounds
In this lesson we’ll be looking at some of the cool image effects you can create with CSS3 borders and backgrounds. This project will be one last spin on our slider, showing how you can have background images act as borders, as well as add background images to text.
1.Introduction2 lessons, 05:29
2.The Projects10 lessons, 2:16:38
3.Conclusion1 lesson, 01:18
4.Bonus Lessons5 lessons, 1:06:28
4.3 CSS3 Borders and Backgrounds
Hey, welcome back to the bonus lessons. In this lesson, we're gonna be doing one more slider, and this one is very much like other sliders that we've done so far, but what we're doing here is using it as a way to play around with the ability to add background images into borders and also to have background images showing through your text. So you can see in this slide here, we have a background image showing through this 20 pixel border here, and what you see here is not natural cut out looking through this white space. What this is is the same image that you've got here set to be the background image for this text. So then that makes it look like you're seeing straight through this caption area. So we've got five slides here. And we're gonna get everything set up so we can create that effect on all five of our slides. So as usual head over to the base pen and fork that to get the ball rolling. So we've got our basic HTML here and a little bit of basic styling. You can see each one of the slides as well as the text for each one of the captions. So the first thing that we're gonna do is add in some default styling for our slide content class. It's the same one that we've been using throughout all of these sliders. So we scroll down To the bottom here. Then we're gonna add in this code. All right, so now we've got all of that slides are in the correct locations, for each of that slides, and we've got the basic slide switching already in there. So, most of this code is the same as you've used in the other sliders so far where we're setting the width and height, and the positioning of our slides. What we're doing a little differently in this one though is we're setting the slide to have a border that is 20 pixels, and is transparent. So we're gonna have that image background coming through this border and we can't actually set the image background in this code yet because we need it to be different for each one of our slides. But we are setting one property here that's gonna control how the background image on the border of each one of these slide works. That's this border image slice setting and that setting basically controls how the image that you set to be the background of the border is chopped up so that it can be made to fit nicely around all four sides of your border. So, now that we've got the default styling in for our slide content class, we're gonna target each one of our slides individually, and we're gonna make that border image show through, and the way we're gonna do that is with the property border image source. This property is a lot like the background image property. You use it in pretty much the same way, but obviously, instead of controlling regular background images, it controls border background images. So we'll start by just adding in the code for the first slide, and I'll explain how it works. All right, so now there, you can see that we've got this image here is showing through in the background of this border. We don't have anything yet on any of the other slides and that's because the way we're targeting the slide is similar to the way we've been targeting things before where we find first the switch, then the label, with the class slide label, and then the slide content div. But this time, what we're doing is targeting the ID that we have on each one of our input fields and using that to make sure that we're getting one slide at a time, and then we're taking the URL of the image that's contained inside the slide, and we're setting that as the border-image-source. Now here's where you can how this border-image-slice setting works. So I'll just change it to 20, for example, and you can see it just slightly alters the way that that image maps itself out on this border. Change it to 50, and you can see is stretched out differently. So basically, you just wanna play with this property until you get something that looks right for whatever it is that you're working on. All right so now we'll add in the code to get that image in for the other four slides. So in each case we're targeting that slide ID and we're just using the same process of going down the list of slides with the adjacent sibling selector, and then setting the border-image-source. So now when we page through we can see each one of these slides is also set to be the background image of the border. All right, next up obviously this slide is not where it's supposed to be. We wanna have this fill up this whole white space, and we're also going to give this image a dark border, and we're gonna have that dark border overlap the border that we just created on the slide content class. That way it will just look like the color of this border is diminishing a little bit, which will give us contrast between east and the main image inside the slide. So we're going to do that with this code, and so there you go. We've got our full-size image is now in the slide, and you can see that we've darkened off that border image as well. Now the way that we've done that, is we've set a border of 20 pixels around the image, and we've given that border a dark gray color that's set to 0.5 opacity so that you can see through it. Then, we've set the box sizing for this to content box. So, we make sure that 20 pixels of border is on the inside of our image, rather than the outside. Then, we're setting the width and height to 100% to make sure we're getting that full size, and then we're positioning the whole thing absolutely, and we're positioning it negative 20 pixels to the top and left. So, otherwise I'll just show you, actually. Otherwise, if we didn't have this you would see we have this offset of our slider image and obviously we don't want that. We want this to be pulled up and to the left so that it's flushed with this corner. So now we've got each one of our slides starting to look the way we want them to. So the next thing we're gonna do is style the caption class. So you can see here we have an h1 element, that's wrapped in a div, with the class caption. So first up we're going to style this caption class, then we'll style the h1 element inside it. So, we're gonna start the caption class with, This code. This is mostly just to control the look of this white wrapper. Most of what we're doing here is just positioning this white wrapper at the bottom of our slide and making sure that any text it contains has the font styling that we want, and right now this text is just black. So in order to get that image showing through it we're gonna need to directly style the h1 element that's inside it. So we're gonna start by creating a default style for all of those h1 elements, and that's actually hidden add text, because what we've done is set it up to be visible only through the background image that we're going to give it, and we're making sure that when we have our background mage showing through our text, it's aligned at the bottom, because what we don't want is this top part of the image to be showing out through the bottom here. We need to have it so that this image that's in our slide aligns with the background image that we're applying to our text so that it makes it look like you're seeing straight through that text or cut out, and then, we're setting background clip to text, and this is the property that makes this work. That says that rather than setting the background in the normal way to cover the whole element, we're gonna clip it out so that you only see that background element where the text is. So we're gonna target each one of our h1 elements here in the same way that we did with our borders by using the slide ID that corresponds with the switch for each one of these slides. So I'll add in all five at once with this code, and now we can see our background image is showing out through a text. So what we've done here is go through the HTML to find that slide content div in the exact same way we did for our borders, and then inside that we're looking for the caption class and the h1 element, and then we're just doing the same thing again, we're setting the background image to have the same URL as does the image that's inside that slide. So now when we go through each one of our slides, we have this cutout effect on the text for each of them. All right, so, this one's just a simple example. Just a way to give you an opportunity to test and play around with these types of border and background image effects. Next up, we're gonna be working with one of the most interesting new developments in CSS and that is the CSS grid. CSS grid is probably the most efficient way to handle layout that we've seen ever since CSS first came on the scene, and we're gonna get into using some of its essential functionality by putting together an image gallery. So, I'll see you for that in the next lesson.