Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
In this movie, we'll put what we learned about border-images into practice by adding a border-image to an element in the Explore California contact page. Along the way we'll discuss border-image options and best practices for creating them. So I just wanted to show you what is it that we're going to be working with and I've made this file available to you guys if you want to check it out. If you look in the 06_04 _assets folder you'll find a border_image.psd, so just a Photoshop file.
And let me get those guides out of the way and I just want to take a closer look at this. This is a very thin sort of five-pixel border that we've got here. Slight bevel on it. You can see the center of this is transparent. Now I'm doing that because remember that middle slice is not discarded. It is repeated over the background of your image. And so by creating a transparent image, even if that metal tile is stretched over the rest of your image, it's transparent. There is nothing there so it doesn't really matter. I kept this border simple on purpose, okay.
Cluttered patterns, wide borders, complex textures, those often don't scale or translate well to border images. So experiment with them for little while, see how they react to stretching them, rounding them, elements changing size, and you'll start to get a good feel for what works and really what doesn't work, to be quite honest with you. I am going to switch back over to Dreamweaver. Okay, so now that we've looked at the image that we're going to be slicing up to use for our border-image let's talk about what we're going to effect. So here I have the contact.htm file open. I want to preview that in one of my browsers. And as I do that this little area right over here where it says "If you need immediate assistance, we have the following options." Well obviously the color is very different so it kind of stands out.
But I want to make it stand out even more by putting that border image around that. Now, you'll notice that the border image had sort of a nice 5-pixel border radius on it and so does this element. So I'm sort of matching those up and that was planning that obviously went into this element before I created the border image. Okay, so let's go back into our code and I am going to switch over to the main.css file again, and I am going to scroll down to about line 786. Here we go. And here I can find of the #mainContent #mainArticle #supportOptions selector, and that is the selector that's driving that particular element.
So I'm going to just create a brand- new line in this and remember the only thing that supported currently with our browsers is the shorthand notation for border-image. So I want to do -moz-border-image. I'm going to follow that up with the first declaration, which is the URL, where can it find this. So the URL for this is going to be ../, it needs to go up a directory, because remember we're in the _CSS directory. We need to go up a directory. Then we are going to go in the _images directory, /border_image.png.
So you need to be aware of where that image is and its relation to the CSS file. Now, if you're wondering, don't we need quotation marks for that, don't we need that in case of a literal string, you can or you can leave them off. It's really optional. After that I'm going to do space separated values so I need some white space and then I am going to type in 15. Now remember, if I were to add a percentage symbol to this that would mean go ahead and slice 15% away from the edge of this particular edge whether that would be top, bottom, left, or right.
If I did multiple values, remember I could do different offsets, but really since it's symmetrical we really only need the one value. Now I'm not going to put a percentage symbol on that. If I just pass the value 15 that's telling the browser 15 pixels. All right, the next thing I'm going to do is the default repeat, which is Stretch. Now I'm going to do stretch and remember that is the default value. Now I am going to copy this and paste this a couple of times and then I am going to do -webkit, and I'll follow that up with just the default, so that browsers that don't need them the vendor prefix are rendering the exact same thing. Cool.
Well let's see if this works, so I am going to go ahead and preview this in Chrome, and I can sort of see something. Can't you see a little something? Well let's try that in Firefox and see what we see there. It's not what I was expecting. It doesn't look like our full border image. Now, why could that be? Oh right, so we need to specify a border width. Remember, a border width size for our border image. If we don't, you really only going to see maybe about 1 pixel of that.
You're going to see just a little bit of a default border. So what I'm going to do is I am going to go just above this. It doesn't really matter where you do it in terms of the order. I'm just going to put it above it. I need to go ahead and declare a border. So I'm going to do a border: 10px solid and then I'm going to do a color. #cb7d20. Now you might notice, looking just above that, that is exact same color as the background color. Okay, so what's my thinking here and what am I doing? Well remember, in order to see the entire border, the way that the border image itself is aligned to the edge of the element you basically need a border width of twice the width value of your border image.
Now border image is right at 5 pixels and remember I am slicing at 15 pixels away from the edge. So by having a border width of 10 pixels I know that I'm going to see the entire border. The reason that I'm using the background-color for my border color is if this is viewed on any non-supporting devices, so if there is a device that doesn't support border-image for example, I don't end up with a really big fat different color border. It's going to essentially look as if the element has gained a little weight if you will. Now the other thing to note is in really tight layouts understand how this is going to effect your layout.
We're adding a 10 pixel border all the way around this particular shape. If I didn't have room to do that in my layout, it could very easily break the layout. All right, so I am going to go ahead and save that and then preview that again in my browser. Oh, there we go, that's much better. So now I get to see the entire border radius. I can see the transparent background is allowing the background color to shine through and it's not only working in WebKit-based browsers, but it's working in Firefox as well. Excellent! Now, let's try some variations on our border-image-repeat.
As we mentioned stretch is the default, but let's try something else. Let's try repeat. Now remember what repeat does is it takes that side tile and it just tiles it over-and-over again, until it fits that available space. Now it doesn't always give you the exact results that you're expecting. If I preview this in a WebKit-based browser I don't really see anything I miss. It looks just fine. As a matter of fact, it might look a little smoother, because it wasn't physically stretching that tile out. So the highlights and the shadows on that bevel might actually look a little nicer.
But if I preview this in Firefox one of the behaviors I notice from time-to-time, and I don't notice it right now, but there are times in Firefox when I see a little gap right as it meets those edges and it has everything to do with the implementation of repeat. Repeat is supposed to sort of average out the space and tile into that area, but sometimes it clips off the edge of it. So what I have found is that the value of round is a bit more consistent across implementations. Remember for the WebKit browsers, repeat and round are rendered exactly the same.
There is no difference between them, but in Firefox sometimes there is a big difference. So now I am going to preview this again, and it looks pretty much the same. Fairly consistent. All right, cool. So really that's just designed to sort of cover all your bases and you have to make sure that you have the proper border-image to make that work. Obviously, if you had something that has a lot of patterns in it, or a lot of texture, stretch probably isn't going to work that well. If you're using solid colors, stretch would work fine and you probably wouldn't need to do round or repeat.
So there you have it. You can see the syntax is very easy. It really takes more time to plan on creating the border image and actually creating it yourself than it does to implement it through the CSS. Based on that can it be really attempting to go ahead and use it now. It is supported across multiple browsers. It gives you a great styling option that has been incredibly hard to simulate until now. However, I do feel like I need to mention that the lack of support in Internet Explorer will require you to provide fallback content for the time-being. You'll notice that in Internet Explorer for this particular layout they just use a much larger shape.
And implementations in Firefox and WebKit don't currently match the specification exactly. That's a sure sign that these properties are experimental implementations and they're likely going to see change before they're finished and basically standardized. Still, this is one of the more fun CSS3 features to play around with. So have fun exploring what you can do with border images.
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.