Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
In addition to @font-face, there are many parts of CSS3 that are either widely supported or supported through proprietary properties that we can use right now. In this movie, we're going to explore some of those properties as we continue to refine the design of the page. Now, one of things I'd like to do and I'm just going to go ahead and open this up in Chrome as a way just ourselves a starting point and talk about a few things that we're going to do to our page. We're already using some custom fonts, which is nice. I want to try out this text here in this column as 2-column text to see how it would book.
So we're going to do that. I'm also thinking about adding some dropshadows to the headlines, because what's a headline without a drop shadows? So we're going to give that a whirl. And the other thing that we're going to do is add some asymmetrical rounded corners to these boxes over here to sort of break up that boxy look and to make it look kind of maybe a little cooler. All right, so I'm going to go back in my code. And the first thing that I'm going to do is I'm going to scroll down to about line 92 or so, where my presentational styles start and just above the header styles, I'm going to go ahead and add another line there and I'm just going to type in, 2 column text styles. There we go.
And that is going to be a comment just to let me or anybody else that works with this know exactly what's going on here. And inside that I am going to type in .text2Col, open up a curly brace, hit Enter couple of times and close it, just to give myself start for this rule. Now you're probably wondering, okay, what is text2Column? So if I go back over to the source code of my trails page, I want you to notice that all of that text is in a div with the class now of text2Columns, so that's all been wrapped in this div tag. A div tag is exactly the tag you're looking for here.
You wouldn't want another section tag. You wouldn't want another article or an aside tag, because that would create a brand-new section in your document outline, so here a div tag is perfect for that. So the class text2Column, we're going to be taking advantage of that. Okay, the first thing that we're going to do is just type in column-count 2 and then below that, column-gap of 1em, and then below that text-align justify, to justify the 2 column for the text.
Now, if the CSS3 specification rule was implemented the same all over the place, that is all we would need to do, but unfortunately it's not. So we're going to go ahead to go ahead and put in some vendor specific properties. Now, we're going to do those actually above these defaults, so that the way that the cascade will work is they'll try the vendor's specific ones first, and it'll fallback to this one if it doesn't recognize those vendor specific ones. So we'll start by using Mozilla's. So to do that I'm going to type in -moz -column-count:2, and then in the next line, -moz-column-gap: 1em, and then underneath that we'll do WebKit.
So I'm going to do -webkit-column-count 2. Finally, -webkit-column-gap 1em. Now, in this entire exercise I'm also going to leave off Opera's. It's no slight to Opera. Opera has most of these properties as well. It's just a time constraint type of thing. I don't want this to go 15 minutes long, but you can go check out all the Opera proprietary comments as well.
Now, you'll notice it's exactly the same thing, so I'm hoping that in the not too distanct future Mozilla and WebKit will get rid of those prefixes so that we can just use normal CSS3 code. I'm going to save this and preview this in a WebKit browser, such as Chrome first. There are my 2 columns. It looks pretty good. It's not too bad, right? And then just to see if it's working in Firefox using the Mozilla prefixes, I am going to test it in Firefox as well and in Firefox I'm getting 2 columns as well. So that was really easy. I didn't have to use a lot of extra divs. I didn't have to do any floats, and it's going ahead and calculating it for me.
So that's really cool. That's a nice little property that you can take advantage of using CSS3. Let's check out doing some drop shadows, shall we? I am going to keep scrolling down a little bit and I am going to go down until I find this particular selector right here, which for me is on line 146 now, but it might be in a slightly different location for you. This is the header#mainHeader hgroup h1, this is our main heading obviously, and I'm just going to do a text shadow here. So directly under that I'm going to type in text-shadow. We're going to do 2 px 2 px 2 px. Now what is that? Well, this is the horizontal offset, the vertical offset, and the amount of blur.
Directly after that there we're going to do color. I'm going to do #333, because shadows are not black. An art professor told me that one time. And directly underneath that line I'm going to do filter. Now this is for Internet Explorer. The top one will work for everybody, but this is for IE. We're going to do a dropshadow filter and inside that we're going to pass a couple values as well. Color is going to =#333 and then we're going to and offset X of 2 and then we're going to offset Y of 2 as well. So very similar syntax, very simple stuff here.
I'm going to save this, preview this in any browser, let's say Chrome and now we can see our drop shadow on our Trail Guide, cool! We're going to add two more drop shadows, one for this headline, and one for that headline. So I'm going to leave Chrome and go back into my code, and we need to find those headings. So the first thing I'm going to do is scroll down and find the section#trailInfo article h1, which is right here, and I'm going to do a very similar shadow. I'm going to do text-shadow: 1 px 1 px 1 px #333.
So a little bit of a weaker shadow. Instead of 2 pixels, it's just going to be 1 pixel. We'll do the same thing, we'll do another drop shadow filter, and here again we're going to do color=#333, we are going to do an offset X=1, and an offset of Y=1. Again, copying and pasting would be very handy there and actually since I'm going to exactly the same text shadow for the next one, I'm going to go ahead and copy that. And then I'm going to scroll down until I find the aside#trailNews h1. That's the one I'm looking for now, there it is.
And at the bottom of that I am going to paste the same text-shadow. So I'm going to save that, test that. This time I am going to test it in Firefox to see how we're doing cross-browser wise. And indeed now both the Ojai Trails, the Trail News, and the Trail Guide all have those drop shadows. And you know as well as I do if you're using drop shadows, you're a real graphic designer, so I'm feeling pretty good about that. Now our final thing that we're going to do is the one that is going to take the most in terms of syntax, and that is we're going to round some corners. However, I don't want all the corners rounded exactly the same. I'm going to do an asymmetrical rounding.
This requires a lot of stuff going on, so let me show you what I'm talking about. There is a selector just below the trailNews h1, and it is this aside#trailNews .news. So this is what styling all of those boxes. We're going to go ahead and do some asymmetrical rounded corners, and instead of doing just a normal CSS3 properties first, we'll go ahead and do WebKit, then Mozilla, then those. And unfortunately, again, it takes a little bit. So we're just going to do -webkit- border-top-left-radius and we're going to do 0.
So zero pixels for that. Then we're going to do -webkit-border- and I've got code handing, so so I can't avoid using it. It's just so nice. I'm going to do -webkit-border-top -right-radius and again 0 pixels. Then I'm going to do -webkit and I'm going to do the -bottom-border-right-radius, so -bottom-border-right-radius, and here I'm going to do 20 pixels. And then finally, I'm going to do -webkit- border-bottom-left-radius and I'll do 0.
Now, I need to repeat the procedure for Mozilla, then I would need to repeat it for Opera. I'm going to skip Opera, and then we're just going to pass like the normal sort of proprietary border radius so. I'm going to move on to Mozilla now. So -moz-border and again, I'm going to take advantage of the code handing I've got here. I'm going to do -border-radius-topleft so I'm going to do -moz-border-radius-topleft and topleft is all one word. So you can see there is a difference in syntax.
Again, that's going to 0 pixels. Then I'm going to -moz-border, again, and this time I'm going to do the border-radius-topright, so border-radius-topright all one word. That again this going to be 0 pixels. Then I'm going to do -moz-border- radius and this I'm going to do bottomright. So bottomright all one word. The bottomright is. That will be 20 pixels again, in keeping with what we did above that. And we got the one more to do. -moz-border-radius.
This one is going to be the bottomleft. That's going to be 0 pixels. Now, we are finally down to just our normal border. Right, so I'm going to do -border-top-left, so I'm going to do -border-top-left-radius, and that will be 0 pixels. Then I'm going to do -border- top-right-radius: 0 pixels. Then -border-bottom-right-radius and that's going to be 20 pixels.
And finally, we're at the -border- bottom-left-radius and that is going to be 0 pixels. So we're going to go ahead and save that out. And let's go ahead and try that in a WebKit browser in Chrome and we can see now we're getting the bottom right- hand corners rounded. It looks lovely. And just to make sure that it's working as well in a Mozilla browser, we'll go to Firefox and we're getting our rounded corners there as well. That's really cool! Now, dealing with these vendor specific properties is a bit of a pain.
I will grant you that, because I just had to type all those things in. However, it does allow us to achieve some really cool styling effects. Now, keep in mind that browser support and the CSS 3 specification continues to change and evolve. So if you're going to use these, go ahead and monitor the use of those vendor specific properties with an eye on removing them when possible. So hopefully they'll sort of remove a bunch of those things and we can just go back to using what's in the standard, and wouldn't that be lovely? But it was still allow us to achieve some really cool results.
There are currently no FAQs about HTML5 First Look.
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.