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.
There are going to be times when symmetrical rounded corners just aren't enough. No. You are going to find yourself wanting some corners rounded. Some not. Maybe even one of the corners of an element rounded but with different values. So can we do that with CSS three? Of course we can. So I have the index.htm file open in the 06_02 folder and let me kind of give you a preview of what we are going to be doing. I am going to go ahead and open up this document in Chrome. And essentially, we are going to be taking this info box here and just rounding the bottom corner, just to give it a little flair there, and then down a little bit further, the Tour Spotlight, we are going to be rounding two of the corners and then leaving two of the corners square.
You'll notice that the callouts have these symmetrical rounded corners that we created in our last movie. So I am going to go ahead and close that. And I am going to switch over to the main.css file. If you are using a program like Dreamweaver, you can just click right over to it, which is very handy. All right, I am going to scroll down to find the mainInfo selector and it is on about line 607. It's really handy to know that. So here's our mainContent, mainInfo, right at line 607. And we are going to ahead and add our asymmetrical rounded corners.
Now we are going to do this using a longhand first. Why? No, I don't want to show you how inefficient it is, but it also helps us really understand what's going to happen when we use the shorthand notations. So yes, this is going to be a little bit of typing, but it will be worth it because we're going to learn something. -webkit-border-top-left-radius. You probably have some inkling of what we are in here for. So we are specifying the top left radius independently. We can do that for top left, top right, bottom right and bottom left.
And we are going to have to do that for WebKit, Mozilla and then just the basic. So you are darned tooting I am going to be copying and pasting in here. So I am going to go ahead and do 0 pixels for this. Remember I said that we only want to round one corner. So here I am going to do -webkit-border-top-right-radius. And that's going to be set to 0 pixels as well. By the way when you pass these values independently of each other here, the order that they show up in does not really matter. Later on when we are doing shorthand notation, you are going to see that the order that they are specified in really does matter.
All right, so bottom-right-radius and we are going to leave that one at 0 pixels as well. Zero by the way will work just fine, but I like being specific like that. So webkit-border-bottom- left-radius. Isn't this fun? And here we are going to do 20 pixels worth of radius. So okay, there are our rounded corners, zero pixels all the way around except for the bottom left-hand corner, which is going to be 20 pixels. All right, so after typing all of that I really don't feel like typing it all again.
So I am going to copy this and then just paste it and change out the WebKit for Mozilla -moz prefix. Now, normally this is all you have to do. I'll go ahead and change that out and you are good to go. But it really pays to go and read a little bit about the browsers themselves and their prefixes because they're not always the same. Now I am going to go ahead and paste this down here again and get rid of the WebKit one, just so I have the default implementation. But I want to come back to my point about the Mozilla prefix in just a moment here.
I need to come back up to the Mozilla one because unlike the WebKit one and the default one, there is a slight difference in syntax with the Mozilla one. So where as it says top left radius, it actually needs to say border-radius-topleft, all one word. So don't always assume that it's always exactly the same property with just a prefix thrown on the front end of it. It is definitely not the case. So I need to go ahead and change that for all of these. So border-radius-topright. I'm trying to be really careful to make sure don't mess up my radii, if you will.
And that's going to be bottomright, all one word, and the same thing here, radius-bottomleft, all one word. That leads me to a larger point about these prefixes. I want to go ahead and apologize to the folks who are on Opera, Microsoft, and Konquerer because I really haven't been including those vendor prefixes in any of the exercises. So the -o, the -ms, the -khtml. That's not really an unintentional oversight. Most of those browsers with the exception of Internet Explorer do support these CSS three properties that we are working with.
And putting a -o prefix in front of most of the properties that we are using will enable it to work in Opera just fine. The problem is you only have so much time to do a movie. So I want you to make sure you go back and watch the movie at the very beginning of the title about vendor prefixes and then spent some time in the development section of those browsers. Go check out the one at Opera, the one at Safari, the one at Mozilla, the one at Konquerer and the one at Microsoft. And you will read more about the properties that they do support and if there's any difference in the syntax, other than the vendor prefix, there's a wealth of knowledge on those sites and I'd advise you to go check those out so that you make sure that your code's going to work across as many browsers as possible.
Let's go ahead and save this, and I am going to test this out in Firefox to see if we've got the prefixes right. And we do, there we go. We are getting the rounded corners in Firefox, which is lovely, and then just to make sure it's working in a WebKit-based browser too I'll try out Chrome. Fantastic! We are getting that asymmetrical rounded corner. That works wonderful, but, as I mentioned, this is ridiculous, this type of syntax is terrible, and imagine if you had to throw Opera and Konquerer or vendor prefixes in there as well, you'd rapidly end up with double the lines of code just for what's really a very simple thing. Well! One of the things that we can do is we can pass shorthand information for our border radius.
We don't have to explicitly define every single one of these guys. Let me show you what I mean. I am going to get rid of everything except for the top line. And now what I am going to do is just target webkit-border-radius. So we are really back the sort of what we've been using in the past couple of movies or so. And now what I am going to do is I am going to pass multiple values. Make sure we are going to go ahead and pass four. So I am going to pass 0 0 0 20 pixels. If you've ever worked with shorthand notation for margins or padding, you know exactly what you are looking at.
Essentially, it works with the same, that if you remember that sort of mnemonic device, trouble- TRBL, top, right, bottom, left. So those are the corners that we are using for our border radius. And now it really is a lot simpler in terms of dealing with the syntax. Now I can just sort of paste this over again. This time I can just do the Mozilla prefix on that, not worry about syntaxtual differences, and go ahead and do the default one as well. If I save this and preview it, you will notice we get exactly the same effect whether we're previewing in Chrome or whether we are previewing at in Firefox. So that's awesome.
It's going to save us a lot of code and a lot of trouble. Now if you are wondering about the shorthand notation, obviously we are passing four values for all corners. What if you pass less than that? Okay, let's give that a try. What if we pass 0 0 20, 0 0 20, 0 0 20? Would we get the same results? Let's see. No, we did not. As a matter of fact notice that it was the bottom right-hand one that is now rounded. So how does this work? If we do four values, we are doing topleft, topright, bottomright, and bottomleft, so it starts with the topleft and it just kind of goes around the element like a clock, just goes in a clockwise fashion.
If we use three values like we used here, the first value is going to be topleft, the second value is going to be the topright and the bottomleft, so opposite corners, and then the third value is going to be bottomright. If we do two values, let's go ahead and shrink that down to two values. So we do two values and what we get, we get topleft and bottomright, topright and bottomleft. So we get opposite corners when we are doing that, okay.
So if you can remember that, it's actually pretty easy to remember. It's very much like when you are doing margins and padding, and of course if we went down in one value it would be that way for everybody. Okay, so let me move that back up to four values, there we go. So we are just going to be rounding that bottom left-hand corner with our shorthand notation there. Now I am going to go ahead and copy this shorthand notation because if you remember we have one more element to round the corners on and that would be the spotlight selector.
You can find that one on about line 669, so I am going to just sort of scroll down a little bit and there I have it, find it right there. I am going to paste the code, but of course that is not the value that we want for our spotlight. For our spotlight we want the top right and bottom left-hand corner to be rounded. So using shorthand notation we know how to do that. We can simply pass two values in, 0 and then 20. The 0 will be used remember for topleft, bottomright. The 20 will be used for topright, bottomleft.
All right, so I am going to go ahead and save this. Preview that in my browser, and that's exactly what we are getting. So bottomleft is rounded, topright is rounded, whereas topleft and bottomright are square. So it gives us a nice unique look for that particular element and sort of draws attention to it. It may seem little confusing to keep saying topleft, bottomright. You might get confused as to what's what, but trust me if you just work with this a little bit in terms of using shorthand notation, you will come to grips with exactly what it's doing very, very quickly.
So as I've shown you, the code to create these asymmetrical corners can get a little clunky. If you remember those shorthand notations, it can make your life a lot easier. Now remember the values start in the top-left corner and then go clockwise around the element. Fewer than four values is going to split the corners into groups, with opposite corners as members of each group and that's a little easier to remember. Okay, so next step we are going to take a look at another very useful addition to the box model in CSS3, the border-image property.
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.