The web site of jiawp

CSS3

Course Overview Let's consider now the course overview, which really helps you to understand all the questions whether you should be taking it, are we going to be covering the content you're looking for and exactly how we're going to go about this. First let's consider do you meet the profile of the course candidate. First, you probably are someone who likes to develop or design websites. You should be comfortable with angle brackets and HTML. And you should have insert your own intensity here, some level of experience with CSS. Now you may have a tremendous amount of experience with CSS, but not necessarily the new CSS3 features. So whether you're somewhat involved with CSS or heavily involved, you would meet the profile of the course candidate. Something important to consider with regard to this course is the scope of what we're going to cover. I like to put it this way, you will have a strong foundation of CSS3 skills and complete this course knowing how and where to ask the right questions to advance to a deeper level. This is not going to be an exhaustive overview of every single CSS3 variation or definition out there, but you will get the basics, the foundation to equip you to utilize the most common and valuable features of CSS3 and have enough to also know how to take it to the next level.

Topics Covered With regard to the topics that are going to be covered in this course, I'd like the course demos do the talking. So let's take a sneak peak now what the final output is going to be from this course, which also demonstrates what features we're going to be considering. What you see here is the final product that will be produced by the end of this course. It's a website that is utilizing many of the features of CSS3. In the course, we're going to consider at the core, the foundation of CSS3 is CSS2.1. We're also going to look into selectors, an ability for us to fine tune and really specify what it is that we're trying to style in the page. We're going to have fun with fonts, as you can see in the header section up above. We're going to look at what your options are for layout, how you can put things exact the way you want them to go. We're going to consider some background options. For example, how to set up a background, one single background with multiple images and placing the images exactly where you want them to go. We're going to have a look at colors, truly understanding opacity, transparency and gradients. You can see in the background of this site, we're utilizing gradients. We're also going to look at how you can use shadowing techniques, such as the shadow that's underneath this topic list. Likewise, we're going to look at borders. You'll notice that I'm utilizing rounded corners in several areas on this page. Transformations give us the ability to rotate or skew or scale any element on the page. Animations allow us to have some fun with elements, such as either changing colors or moving things around on the screen. We're going to have a look at media queries, how you can change the actual styles based on the ambient container or the device or what the viewing scene is. For example, if I resize my screen or if I'm viewing this website in a device such as a phone, how will it look. We can change those styles using these media queries. And our final module in the course is going to focus on scripting, but it's also going to focus on the practical application of using scripting with regard to making sure that our sites work in multiple browsers. That's a very important module and of course it also ends the course so we'll have a final review of the course and all the resources you need to take your knowledge that you've learned to the next level. So now that we've had a sneak peak at some of the features that are going to be covered during this course, hopefully you saw a topic that was compelling for you, a feature that would be desirable for you to implement in your own site and that's a compelling reason for you to stay along the journey with this course on CSS3.

Accelerated Introduction to CSS We're now going to take a look at an accelerated introduction to CSS, this is the general concepts and technologies of CSS, not necessarily referring to CSS3. We're going to take a look at the core concepts, some implementation basics and the syntax is going to get exempt. However, I do want to stress if you have little or zero experience with CSS, it is in your best interest to look at the other course operative Pluralsight on CSS technologies, not necessarily CSS3, as this course is the focus, but the core CSS technologies. It's really a prerequisite to this course. But if you are dangerous or have a degree of experience and you just want to have a quick reminder of things, that's what the purpose of this section is. At the w3.org at this particular location at their site, this abstract helps us to appreciate that the purpose of CSS and specifically the foundation of CSS3, which is 2.1 is to enable authors to attach styles to content and that last sentence really makes it clear, it separates the presentation style from the content of the documents. So it's going to simplify web authoring and site maintenance, allows for a separation of duties as well. Now at this link, under the heading of CSS level 3, it formalizes the statement I made earlier. CSS level 3 builds on CSS level 2. Now modules are introduced, feature based modules that can go in and sit on top of CSS2.1, but introduce desirable features that we would like to have in our websites. So you get to leverage what you know about CSS2.1 and then build on top of that with these new features in CSS level 3. This particular link I'm going to actually take you to because it shows exactly how these are introduced and how you can keep track of the various features that are being introduced. This is the website that was referenced and it gives us the basics of what is CSS, but it also shows us what modules are at what status with the CSS working group. So if you're curious as to what's going on with CSS, this is one that you're going to want to bookmark. And once again, this is the link to that site that we were just at.

CSS Syntax Let's now take a look at some implementation basics, then there's how can we plug CSS into our web pages. So the first way is through inline syntax. In this example, a div tag has specified through a style that its contents would be the color red. At the document level, in the header section, we can introduce a style tag. Again, the div tag is being targeted and for the color red of any its content or text. External CSS files can be used, so in this example, the content of the style that CSS document may have a definition such as div, again, color red. And then in the HTML document, we would specify a link referencing that style dot CSS. In this example, it assumes that the style that CSS in the same directory as the HTML file. With regard to formatting, there are several options. You can use a single line option. You can break it up with a curly brace at the end of the element that's being targeted or you can use the curly braces underneath. In this particular course, we're going to be focusing on the curly brace at the end, followed by the definitions. Another thing to take a look at here is IDs and classes. So far, we've been looking at how we could target, let's say a div element. We can also target an ID, so any kind of HTML tag that has ID equals, in this example, some ID, we can then say it has the color red. Or if we have any element that says class equals, in this example, some class, then that would be the color red. So these are some of the just basic principles of CSS in terms of some of the syntax and now what we'd like to do is look at how to get started.

DEMO: Getting Started with Visual Studio We're going to now take a journey at the CSS3 demo's website. We've already seen earlier in this module what the final produced product looks like, but now what we're going to do is look at how this entire course is going to be built on an HTML page that technically hardly changes throughout the entire course. What's really changing is the CSS3. Let's see how that's going to work. Throughout this course, you're going to notice that I'm using visual studio to manage my HTML and my CSS, although this is my tool of choice, this course does not require that you have a dependency on visual studio. In other words, the technologies that we're going to consider, you could be using any text editor that you prefer, upload it to a server that of course would serve the HTML and CSS appropriately. I also want to showcase that within visual studio, if you are using it, that if I go to the extension manager, I have installed the web (inaudible) extension, this gives me some advantages in the CSS document such as targeting CSS3 and having other features that make it easier to manage.

DEMO: Examining the HTML Source The HTML document that serves as the basis for the entire course is right here. It really doesn't change with very, very few additions that are going to be added to the header section, the actual body of this HTML document will not change at all. You could see this as an HTML5 document and as I'm scrolling down, we notice the unordered list of line items that represent the topics for the course. There's an article tag that's an about, a section tag that refers to an HTML form for input, a footer, an empty script tag and the closing of the body and the HTML tag. All in all, 65 lines of HTML, this is how it looks when rendered in a browser. So we can see this is the site that although we previewed it earlier in its finished state, at this time, has much to be desired. There's absolutely no styles whatsoever being applied.

DEMO: Adding Style to HTML I'm going to expand the header and introduce a link tag. ( Background noise ) And we're going to reference one called style dot CSS and let's take a look at that here. So, to begin with, notice that this particular style sheet begins with the character set referencing it as UTF dash 8, although this is not required, my personal experience has shown that certain browsers only work appropriate if this is indicated at the top of the style sheet for certain features. So I recommend putting that there at the top of all CSS documents. Lines 3 through 16 are showcasing what would be the appropriate color scheme for this particular site, you could look at it this way, perhaps some designer has said, this is the color pallette that you can use for your site, so I have all of those in this comment here so that I can reference it later on. In this region down below called CSS reset, if I expand that out, you'll notice that this is from Eric Meyer at his meyerweb.com site, this is a CSS reset that also includes HTML5 elements so that you can apply a global reset, so to speak, to everything that you have. Now this region that was made available inside the CSS document is possible by that extension that I showcased earlier.

DEMO: Simple CSS Syntax So I'm going to go ahead and demonstrate that. I'm going to surround this area with the region. I got to there by right clicking that selected area. I'm going to call this colors and now of course I can collapse that region, as well as the CSS reset. Because I don't want there to be a typing exercise just to cover some of the basics, I am going to add some definitions here for the elements on the page. These are already included in a region. So I'm going to collapse that and I'm also going to add something for the IDs. So I'll collapse that and I'm also going to collapse the elements. I'm going to save this, go back to the HTML and now with everything that's been saved, let's see how this looks in the browser now. So this is how the site looks now rendered in a browser. Notice that we've made some improvements, the header is looking like it's starting to come to life, but the rest of this page is really lacking. We're going to be focusing on how to improve on this content throughout the course. The main objective of this demonstration was to get us comfortable with the following, first of all, this HTML document is the basis for the remainder of the course, none of the content's really going to change, we're only going to be adding a few other things here in the header section. This style dot CSS is the main attraction as far as this course is concerned. We're going to be adding more and more to this file in order to demonstrate the features of CSS3. At this time, we have not used any new features in CSS3. The existing definitions for elements and for the IDs that have been targeted are all using CSS2.1 features or features that came into existence prior to that. The takeaway here is that because we have this existing style sheet, it could represent an existing style sheet at your site, how you can now take this foundation and build on top of it and slowly introduce the features from CSS3 that you would like in your site.

Summary So for this module summary, hopefully you understand the purpose of this course, so showcase those features of CSS3. Hopefully you also feel comfortable with the CSS technology concepts and you understand the basis for how we're going to move forward with demonstrations, is going to be using visual studio as our editor and we're going to be building on top of a single HTML file and working primarily with the style that CSS file to introduce those features. I look forward to sharing CSS3 secrets with you in the next module.

Content Introduction Hello again. This is Michael Palermo and in this course on CSS 3, this module is going to focus on content. So what do we mean by that? In our module overview, we're going to specifically address fonts, we're going to look at selectors, we're also going to look at form inputs, we're going to see that there's state of data that we can address in our styling and then we'll have a summary.

Fonts Now with regard to fonts. You all know that if there was a "We must have this font on the page," in many cases, we had to use images. This is no longer the case. With CSS 3, we can now use the appfont-face syntax to introduce a new font into our environment. The syntax works as follows. The font dash family is a friendly name that we create, so in this example, font name of your choosing, then we also specify the source of the font. This is key because this is where the actual, physical font resides. And in this example, the URL is pointing to a font.woff file that would reside in the same folder as the CSS. We also specified its format. What we could do here is put a comma, instead of a semi-colon, and we can have optional URLs for fallbacks. In other words, if a browser doesn't support that format, perhaps we can try another one. Examples would be sbg. So as we're looking at this, just keep in mind, this is all about just registering or adding a reference to a font. But we haven't used it yet. To use a new font, you would address the friendly name that you provided it with the atfontdashface syntax and just treat it like any other font. So in this example, we're using the font name of your choosing. If I wanted to, for fallback support, I can provide a comma separated list right after that font of common fonts, just in case the browser doesn't support this feature. Now you might not be one who authors your own fonts. I certainly don't so if you're wondering where could you get these, an example of a website that does this is fontsquirrel.com. Not only do they provide many fonts, and for free, but they usually provide the syntax that you need that you could plug right into your CSS 3.

Text Shadow Another thing we can do with our text is provide a shadow for it. In this example, we want a div any kind of text that's in there. And by the way, this would include text that would have those fonts that we just talked about. In this example, I'd want it to have a shadow that would be two pixels, low and two pixels to the right and I would want to have a blur of about four pixels. And the shadow would be black. Down below it, an h1 tag specifies a text shadow. The negative numbers mean go up and to the left and then I'm providing the blur and the different color for that shadow. Let's see some of these technologies in action right now. We're in the starting solution for this module, these are the files that were available at the end of the last module, our intro, and as a scary reminder, this is how the site looks so far. The first thing that we're going to tackle is the fonts.

DEMO: Font Face Visual Studio, I'm going to introduce a font face so I can register or reference a font. I want you to notice that there is a fonts folder now on the solution and it contains two different web fonts that I've downloaded from fontsquirrel.com and although I was provided the syntax to make that very easy to just plug in, I'm going to do this the hard way so that I can talk about it. So font face and we're going to choose font family and this is where I get to give it a name. So aargh. The source is going to be the URL that will go up and then over into the fonts folder, and specifically, I want to get the aaargh-webfont.woff file and I want to specify that the format is woff. So I've just created a font face and now I can use it. I'll make this really simple. I'm going to go to the body tag, I'm going to specify that the font family to be used for the entire site is going to be this new font. So all I have to do is look at the name, and I can provide a backup in the event that a browser doesn't support it and I'm done. I'm going to save that and now let's take a look how this will appear in the browser. Here, I'm going to go ahead and refresh and we can see a slight difference. Now, whether or not it's considered an improvement at this point, is yet to be seen. I don't really like the way that the header's looking. I don't mind the text in the body so, let me change the header text to something different; something with a little bit more pow. So I'll introduce another font face. In fact, I will copy this one and just change this to DJ, I'll change this also to DJ and then I have a title and also a subtitle that I'd also like to have use this font. Font family will be DJ and if that's not available, I'll use a script. Return to the site, refresh and now I can start to see a little bit more character now in the header. We're getting closer.

DEMO: Text Shadow Another thing that might help the site look a little better is adding a little shadow to some of the text. Maybe some of the dominant text, like in the headers or maybe the menu item options that are anchor text. So to the title, to my h1 and h2 tags and also to any anchor tag that is inside the nav tag, and I only have one, so that's where the menu option is at the top. The syntax is about the same. Text dash shadow for each one of those, a measurement is given for the extent of the shadow and its horizontal and vertical offsets, as well as the blur factor, followed by the color. Let's see how this looks. I'm going to go ahead and save this page. Now we're going to view the web browser. So in the browser, we want to take a look at this header area. We will also want to look at these menu options and take a look at these header tags down below. I'm going to refresh the browser now and okay, there's some of the shadowing. Nice effect here. The shadow of course is lighter. So it's really going to draw that out. It's a little dominant at this time in the menu items. Looks good when I hover over, but might want to address that a little later on. We'll see what I can do about that when we get to colors. And just enough of a shadow effect for the headers to make them stand out a little bit more.

Selectors This next topic is dealing with selectors. Let's take a look at some of the new selectors that we can use. On the far left hand side are all the navigation types of selectors, the ability to select something by merit of its type or by its position. In the middle column, we can see that we can also select things based on values. For example, if a particular attribute, either begins, ends or contains a certain value, on the right hand column, different selectors for different purposes. Best way to see these is in action. So let's get right to the next demo.

DEMO: Positional Selectors I'm taking a look here at the webpage as we've left it. This specific area in the page is the unordered list of all the features we're going to be discussing in this course and this is going to give us an opportunity to talk about those positional selectors in good detail. So I'm going to go over to visual studio and bring in a CSS rule here. You'll notice that I'm going to the section that has an id of topics and I'm saying for every list item, give me this background color. Now I'm not using any of those selectors yet, but let me go ahead and apply that and then let's go back over into the site and then I'll hit refresh and you can see that all of them now have that background color. Well, that's not what I wanted. What I want to do is choose only specific ones to have that background color. So let me start off by choosing first child, go back over to the site, and we can see the first child has been selected. Of course, last child is just as easy. I'll save that, go back over, hit refresh, and we can see the last child. So those are two very simple one to use. Another thing that we can do which is very powerful is to use the nth child. Now if I put a 1 here, I'm doing this on purpose to really make a point, and the point is, there is no zero based array for accessing these list items. 1 refers to the first one. So this is actually the same as first child. If I go back, hit refresh, core has been selected. Now if I want fonts, which was number 3, I can put the number 3 here, save that, go back, hit refresh and we can see the third one's been selected. Now you might be wondering, "Well, what about scenarios where you might want to have every other item, you know, odd or even?" The way that that can be done, you can actually say, I'd like to go to 2, but then you can specify 2 with an n. When you do that, you're saying, "I don't want just the second one, but I want a repeating of every second one." So I'll save that, go back over and then watch what happens when I refresh. See, every second one has now been selected, which is great. If I wanted to now color or provide a different kind of background to the other ones, I could do it this way. I'm going to copy this whole thing, save it here, 2n minus 1 and I'll change this to another one of those appropriate colors that I have d4a8, so slightly lesser intensity. So again you'll notice that I'm saying, for every second item, and this one is saying for every second item, yet subtract one. So in essence, it's going to start with the first one and do 3, 5 and so forth. Refresh, I can now see that took place. What if we want to do every third? Go ahead and copy that, I'm going to change this to now be a 3, 3 minus 2; I'll keep that a 1 and I'll make this 3 minus 2 and the color here is going to be eddb, again, just a lesser intensity and now I have that blend of every third. So things are starting to look much better there. The size of the items is actually a little too big, so I'm going to drop in some code. There's nothing really exciting here in terms of CSS 3 other than a little tip trick here. You'll notice that I have, I'm still referencing the line items so I'm going to make those smaller and I'm also going to indicate when I hover over any of those items, that I can change the background color and foreground color. No big deal. This is where the little tip and trick is. Notice that while I'm hovering over that line item, if there is a child in it, such as a paragraph tag, I now want to display that paragraph tag using the inherent key word and provide a nice color. See, right now, each one of those particular line items has a paragraph tag in it that we haven't been able to see because elsewhere in the style sheet, those paragraph tags are set with a display of none so now we're going to be able to see them. The items are now smaller. Now, if I hover over let's say, core, we can see the background and I don't know if you can notice this as I go down close to colors and background, but it looks like there's a message appearing right in this area. Well I'm going to be getting to that in another module, but the key here is is that this is a way for you to have one fixed position where, regardless of what you're hovering over, it's kind of like a tool tip that's static, or like a little status bar. I'm going to add an absolute position to article, section and intro. I'm going to make it so that only the intro element is going to be sitting on top with a z index of 1. So if I save this right now, that area is here. If I try to scroll down, I can't. Clicking here doesn't do anything, but at least everything is fitting on screen. But it looks like I've got some content clipped. I've got to figure that out. Going back over here, this is another powerful thing that can be done when using selectors appropriately.

DEMO: Target Selector I'm going to go to the content section. I'm going to say for all items that are not the target or the intro this applies to you. Again, I'm specifying all items that are directly underneath content, that are not either the target or the intro, apply this style. Well the style that I'm going to apply is going to be a z index so I'll do that first. Target refers to target locations in the page that are referenced by anchor tags in the same page. And I'm going to use one more powerful selector, target itself, but its value is going to be a 2. The introduction section should be the default that shows. Everything else should be hiding behind it. However, if something gets selected from the menu option, bring it to the very top, so that we can see it. I'm going to go over and refresh the browser now and I can see the complete topic list. If I click on contact or intro or about, I now happen to have navigation. So it appears that I have multiple pages. This is all being brought by the power of that target selector. I still have some clipping and that is going to be addressed in another module.

DEMO: Selection Selector I also want to add a different selector, and that is the selection one. This is going to allow me to change the way text is going to look when it's selected from the user. So before I save anything here, I would like to show what the default selection looks like. So I'll go over into our topics list, and when I select it, it's basically a white text with a blue background. I'm going to go back and save, using these new colors, and I'll refresh and now when I select the text, it's using my color scheme instead of what the default was for the browser. To bring a little more containment to the page, I'm going to add one more of these selectors here, this root selector. Again, it's like body except it encompasses the entire document. So if I say the background color of the root is a certain color, it truly will encompass the entire browser window. Now I'm starting to get a little closer to what this site is supposed to look like. Again, I still have this clipping issue, which will be addressed soon, but as I navigate through, I can start to see the page is just about to come to life.

Styling Form Inputs Now we're going to continue this same mode of thinking with selectors except specifically with the use of form inputs. As the user is providing data, there is state of data that we may want to style accordingly. So think of it that way. Selectors of state, with regard to the data that's being provided. We can provide styling based on that something is enabled, disabled, or checked, whether it's valid, invalid, optional or required, and there's even the ability for us through vendor prefixed definitions to highlight things such as placeholder data that sits inside of input tags. This is like the watermarks out there that say, "Hey, put a name or an email or an address in me." So we're going to see an example of that and of course, the best way to really get a good understanding of it is to see it all in action.

DEMO: Stateful Selectors This is the page as we left it. I'm on the contact page and this is where we're going to have some data entry, this is where we have some input tags already there. The input tags have place holders in them. For example, our text area here says comments in there, if I were to try to type something in there, of course that goes away, but if I empty it, then the comments reappears. That's the place holder, and we have it also here, but it's kind of hard to read because of the color scheme. So that's why it's important to be able to address that and style it. If I click submit right away, it's going to tell me no, because I didn't fill out the first form or the first entry in that form; it's a required field. Even if I do, and then I come down here and try to submit, then it's going to say the email needs to be provided and if I just say, yes, and then submit again, well now it's going to say to enter an email address. So it's functional, but I might want to style things slightly different based on the state of the data. So that's what we're going to do right now is go into the CSS and see how we can style these things through these selectors. I'm going to start with dealing with data that is either required or valid. So I'm going to go ahead and paste some data in here. You'll notice that the required selector, I could have preceded it with an input. If not, it just means anything that would be marked as required, which is typically inputs, if it's required, I want a different background color. If the data is valid, then make sure the background color is white. So I'm going to save that right now, go back over to the site and do a refresh and we could see slight differences already. Now remember, the thing that we did is we wanted to know if something was required, and you could see there's a slightly different background color in here, than there is over here in the comments. Comments are not required. If I do put something valid in here, let's say xxx, you'll see that the background is completely white now, because it's valid data, because I provided something. If I do the same here, xxx, notice it did not change the color because xxx is not a valid email. So, it looks like everything is working good so far. Let me go back over into the code. I now want to address something dealing with the place holder data. So I'm going to provide some code here. You'll note here that I'm using a bender prefix and other prefixes should be added to this page to support other browsers, but for brevity, I'm just keeping it to one specific bender prefix, at this time. Notice that I'm combining a valid selector with now an input place holder selector. And I've done it here and I've also done it on this line. What I'm saying is if the data is valid, I want the place holder to look this way. If it's invalid, I want it to look this way. Well, if you haven't figured it out already, what I'm really saying is, I want the data to look the same whether it's valid or invalid and this is the way you have to do that if you want that kind of an effect. So I'm going to save this, return now over to the website, and I'm going to refresh it. So you could see that now the place holder data is consistent, it is italic. If I go in here and do something, then I'm going to have a different font and different color. If I go into full name and provide something, like my name, then of course, that place holder data goes away. If I click submit, I'm still being informed that the data is not correct. So everything is working exactly the way I want so far. Let me go back over into the code. Another thing I want to address, and I can again do this with the power of selectors is I want to make sure that if there is anything optional, such as the text area, I want it to be dash. But I also want to make sure that I'm not going to inadvertently select my submit button. So I am saying, if it's not a submit button, but anything else, and it's optional, go ahead and make the border style dashed. So I'm going to save that, go back over to the website, refresh and now you can see the comments are dashed, not the submit button, nor anything else.

Summary So, that's quite a bit for this module. In summary, we learned how we can add font faces, which allow us to bring in the kind of fonts that we want, without using any images. We also learned how we can precisely select content that we want to style on the page, and this also includes the kind of staple data that we would want to style in our form entry screens. This concludes this module.

Layout Introduction Hi. This is Michael Palermo. In this course on CSS 3, we're going to explore layout possibilities in this module. First we are going to consider how you can position things into your page, then we're going to look at some background options -- some features that may be very desirable to you, and then we'll have a summary of what we did.

Layouts Layout really is about where do you want the content to go on the page. And where it goes may not be where it physically exists in the HTML markup. ( Silence ) The first kind of layout we're going to consider is table layout. Now don't be shocked. I'm not talking about HTML table layouts, I'm talking about the CSS way to do it. This can be done by setting the display property to a table value. That means in this example that any kind of element that has an ID of outer div is now being recognized as a container -- a table so to speak. What do tables typically have? Well they typically have columns or cells. So this next definition is saying well, if we're going to have two children inside of that outer div, let's set its display to table cell. This would set up the first child and the second child as cells or columns within that arrangement. So instead of those two, let's say they're divs, showing up one above the other, it would look more like this, where the white box represents the outer div. And then the two children would be next to each other on the same row, as two cells or two columns.

Box Layout Another option is box layout. In this example, the element with an ID of content has its display set to box. Now, inside of that content, the very first nav element is going to be positioned in a group of 1. Then the article that's a direct child of content is going to be put into group 2. Notice that it also has the additional property of box-flex, which means go ahead and expand that out as much as possible. Finally, we have the aside, which is a direct child of content, and it's going to be put into group 3. Now what does that mean? Let's assume this is the markup on the page that this CSS is based on. You can see the div is the container of article aside nav. But notice article appears first in the markup, then aside, then nav. But because we use the box ordinal group properties, we were able to position these elements in the order we chose. So the net effect is nav would be first, article would be second, and because of the box-flex, it's going to have a greater expansion, and then the aside is last, even though in the markup it's in the middle. Now let's look back at the CSS. Do you see where it says the ID of content, its display is box? Let's talk about that.

Vendor Prefixes In the last module, I hinted at these vendor prefixes. Now I want to give them a little bit more of an understanding. Because browsers may implement various aspects of CSS 3, or even their own implementations of features, the way that we can designate that we want to utilize that feature in that browser before it becomes a standard is by using a vendor prefix. So this is an example, it's not an exhaustive list. There -- there are more. But this is an example of a few. As we move forward in this course, I am not going to display every possibility with regard to vendor prefixes. I'm going to be focusing on the technology. However, I thought it'd be a good idea to say let's pause for a moment and say well how would you know if you should use one or not? Well here's the first clue. If you're attempting to do anything at all, and replicate this in your own environment, and something's not working, it could be because you need to use a vendor prefix. But then again, how would you know? There are many sites out there that can help you. An example of that is caniuse.com. Notice here the flexible box layout module is being discussed. That's what we've been considering right here. It shows all the various browsers, whether or not they support, and if they do, you'll notice in -- in just little tiny print next to each one of those green boxes if the vendor does require a prefix, then you'll see the prefix listed. So hopefully that can help you. But as I move forward, the assumption will be made that there may be a vendor prefix required, and that will be up to you to determine by checking out these sites. Let's move on to the next way we can do layouts. ( Silence )

Columns Columns is another feature. This one is more about the content within an element instead of positioning elements themselves. So for example, let's say we have an article element on the page, and we want to identify the very first article, and a direct paragraph descendant of that article. We're going to give it a column count of 3. Now we're going to identify the final article on the page, go to its direct paragraph, child, and specify its column width is 120 px. These are the two various ways that we can specify columns. The first one says just give me three columns no matter what, the next one says give me columns that are a width of 120, and if we happen to have enough room, give me 3, 4, 5, 6 -- whatever I can fit using that width. ( Silence ) What do I always say? The best way to see these things in action is to go ahead and do some demos. Let's take a look now at our CSS 3 demos website. ( Silence )

DEMO: Columns As you may recall from the last module, we made some progress on the site. You know, I'm still dealing with this issue with this clipping of my unordered list, which is sitting behind the introduction screen. Now of course if I click on topics, then they're all going to appear. But I'd like that list to not do that any more. In fact what would be perfect is if I had the list set up into various columns. So that's what I'm going to do right now. So I'm going to target the topics unordered list to be three columns instead of just one list of values. Going to switch over to Visual Studio, and I'll do just that. I'm going to go to Topics, Unordered List, and let's see how difficult this is going to be in order to provide a column count. There you can see I'm going to be using the vendor prefix for web kit, and also provide the standard based weight. Even if the standard based weight is not being used in any browser at this time, it's still good for forward-thinking. Make sure that you're prepared for that when it does happen. So I have that in there. And let's see if that in itself made a difference. I'm going to save that, go back over to our browser, and hit Refresh. So I'm instantly happy. I can see now that as I'm hovering over these things, now the -- the detail below that provides a description for each one of these, is clearly seen, and of course I don't have the clipping issues. That means if I navigate from the Intro screen to the Topics screen, I'm not going to have to deal with that clipping data. So we're getting really super close. However, as I'm looking at this, I see this gap in between, and, you know, some might say that's good, but what if I want there, you know, to be no gap between the columns. Well it's a great way of saying that. I'm going to switch back over to Visual Studio. And if I want to have that ability, then I'm just going to take this and utilize the naming, but I'm going to change. Instead of column count, I'm going to call it column gap, and specify that there's going to be no gap. In fact I'm going to put a zero there. If I wanted to control the size of it, I could use any kind of sizing. But I'll just leave it like that, at zero, make my changes, switch back over to the site. I'm going to refresh, and now the gap is gone. So what we've done in this particular demo is we've utilized the ability to have a very simple column count for an unordered list of things. ( Silence )

DEMO: Box Layout Now I want to draw your attention to the About page. You'll notice that I have the header up here, says About Michael Palermo, and then directly underneath that it has just a simple saying, Just crazy about CSS 3. Let's look at the markup for this in Visual Studio. There's the markup. What you'll notice is that the article with an ID of about, has really only two direct children in it -- header and paragraph. So I thought what I'd do here is just demonstrate a really simple way to use the box -- the flexible box model, and we'll set it up so that the display for the about is set to box, which is automatically going to provide the benefit for the two children inside to now be viewed more like columns. And this is going to be an automatic behavior. Let's see it in action. I'm going to go over to the styles, and just go up and say okay, I'm going to target About. And in here I want to say my display, and I'm going to make that equal box. I'm going to add some vendor prefixes here real quickly. So I have provided several options for that. Again, there are more vendor prefixes out there, but for the purpose of demos I'm trying to keep them -- these very brief. And now we're done. Let's take a look and see how that makes a difference. I'm going to save this, and return to the website. Watch what happens when I refresh. The paragraph moved over to the next column, because it now recognizes that the About is really a container or a box that can have several children in it, that can have their own individual columns, much like the table display that we discussed earlier as well. ( Silence )

Background Now on the topic of layout, we're always thinking about what's going on behind the scenes. So I thought while we're talking about layout, we should also talk about some changes to background. A very cool thing that we can do now in CSS 3 is identify multiple images for the background. So for example, if this div has the definition for the background property to have three different images, this is now possible, including having a background color. And notice the importance here. The order by which we specify these images actually means something. So let -- let's have the scene here. This is going to be the div. Now granted, that background grey color has already been established. Above all things, we're going to have image 1, underneath it would be image 2, and then underneath that would be image 3. So there's a visual representation of how this works. And by default, what you can see is that the images are going to be placed in the upper left-hand corner to the degree that they can, and by order of how we put them into the property, it's going to display exactly like this.

DEMO: Multiple Image Background I think the best way to demonstrate that is once again return to the CSS 3 demos website, and see this in action. So looking at the website as it stands now, you know, I'm in this About page, and granted it's saying About Michael Palermo, and that I'm crazy about CSS 3, but there sure is a lot of empty real estate on this page. It'd be a great opportunity to fill it up with some imagery. And I just happen to have a couple images to do the trick. Returning to Visual Studio, I want to showcase that in the images folder, which is now in the starting solution for this module, there are several images to choose from. I'm going to utilize the new feature of having multiple images in the background, by specifying a background for About. Now right here I'm going to go ahead and save the URL that I'd like to obtain for the first one is going to be in the images folder. Let's give some kudos to CSS 3 logo, and I'll put a comma, and the next URL I'm going to specify is going to be a shameless plug of my mug shot. That will be About Palermo right -- you'll see what that means in a moment. I will conclude this with a simple background color of white. I'm going to save that, and return to the site and see how that looks. Ooh, that is not what I wanted. So multiple things have gone wrong. I didn't expect to see four logos, I didn't expect to see my picture. The one thing I can say that's true is at least the CSS 3 logo sits above my picture. And that's how it should be, because it was mentioned first in the definition. But I don't want all of this repeating nonsense. So this is how I fix it. Down below I'm going to specify that the background repeat is going to be no repeat. Save that, return here, and view it in the browser. Well I made some progress, but the problem now is the logo and the picture is sitting right above where the About information is, and I would really like to see that moved around. And it looks like the -- the interesting profile that I have here would be better served if it were way over here, and maybe this logo were down below. So the way that I can accomplish that is going back over to the images, and I can say you know what? I want this logo to appear in the bottom left, and I want my mug shot to appear in the top right. Let me save that, view it in the browser again, and so we're getting even closer. This is great. But I feel like we could probably make a couple changes here to extend this out. I mean this is a shameless plug for me, so what can I do? What I really want to do right now is change the sizing of the images just a little bit. So I'm going to say background size, but how do I know which image I'm going to be changing? Well it's the order or position that I've placed them in on lines 271 and 272. So I will say auto here, auto for the background size, for the logo, and then I'm going to use contain for my mug shot. Let's see what difference that makes when we return to the browser. This is how the sizes look now. Let me press what I need to refresh this browser. Much better. So as you can see, what it did is it pretty much kept the logo the same. It put it -- it's kind of -- it used its default. But when I said contain, I really wanted this to be contained in -- to the degree it possibly could inside of this container. And so with that being said, I -- I think I filled in this spot pretty good. I'm digging how I can have multiple backgrounds in one particular element. ( Silence )

Summary So in summary, we learned how we can position items in our page. We have some new options. We can use the table-based approach, we can use the new box approach, we can use columns. And we also learned how to position multiple images in a background, and how we can even tweak some of those images to our liking. This concludes this module on layout.

Colors Introduction Hi, this is Michael Palermo. In this course on CSS3, this module, believe it or not, the entire thing is dedicated to just colors. Let's see why. In the overview, we're going to talk about opacity, the things you can see or not; RGBA and HSLA, what do those things mean to you and how can you use them as color options in your CSS syntax; then we're going to have some eye candy at the end by exploring some gradients; and, of course, we'll have a summary that chats about all the things we learned in this module.

Opacity So first, let's talk about opacity. This is the degree to which you don't want to see something. So we could kind of reference it as opacity and transparency. In this example, the first rule that we have here for CSS is referencing any class name called "fading," and we're saying fading meaning, yeah, we can kind of still see you, so we set the opacity property to a 75 percent, and that's the syntax for that. If I wanted something completely gone, then I could use, let's say, the class name "vanished," and specify the color is transparent. Of course, let's see these things in action. Let's take a look at the CSS3 Demos Web Site and look for opportunities to where we could use those.

DEMO: Opacity So as we left off in the last module, our site's really starting to get close, starting to look and behave a little like a site. Let's add a little pizzazz. Maybe we can use some of this new transparency and opacity stuff in a way that would be appealing, let's say, when we're hovering over things, such as in our header area up here, let's give that a try first. I'm going to go over into Visual Studio, and we're going to focus on how to add opacity to, let's say, the title specifically when it's hovered. Let's change the opacity so that it's at, let's say, 75 percent. That's saved. I'll go over to -- back to the web site and see what happens when I refresh. And when I cruise up here, we just see a faint change that's occurring up here to the title in our header. Let's do something similar for the subtitle. First, in the subtitle I'm going to do the opposite. I'm going to set it up so that without hovering the opacity is going to be at the same that the title is when we are hovering over it -- and that's at 75 percent -- yet when I -- and I could just copy this whole block here -- when I decide that I'm going to hover over the subtitle, I'll want to return the opacity to be complete. And that's what I would do; that would basically mean 100 percent. So I'll save that, return over to the site, and refresh. Now, you can start to see a faint edge where the name is jumping down into the menu area, and, of course, as I hover over it, I can see that it becomes more full; and, of course, when I hover over the top, these kind of match now. So just a couple of examples of how that can be done. Now, another effect that might be interesting is with regard to some of our shadowing. And take a look up here. When I hover over these menu items, of course, they look okay as I'm hovering over them, but they kind of confuse my eyes right now. It's almost like there's too much of a contrast there. I'm going to offer a slightly different approach to how these can look by using some of the concepts that we just learned. I'm going to return to Visual Studio. In the nav section, the anchor text specifically are what I'm going to be addressing, and what I want to do, I want to change the color of that to transparent. These are my menu items. Should I make them transparent? Let's see what's going to happen. Let's go back over to the site and I'll refresh the page. Now what you see is that, yes, the front part is transparent but the shadow that's underneath is still there. So what a cool way to create a shadowing effect with our text; however, as I hover over them, well, now I get it popping out. So this is a little tip trick you can use to create that shadow effect and have it pop out as you're hovering over the items. That was accomplished, once again, by just simply making the primary color transparent and then, of course, as we hover over it, in a previous CSS rule, it changes that color so that it can seen. ( Pause )

RGBA and HSLA So now we're going to turn our attention to RGBA and HSLA. We're going to look at those terms and really compare them against what we already know. And you're just going to find out that there's just a lot of different ways to do the same exact thing, but depending on which one is more intuitive to you, that one's going to be just right. To help us appreciate what these things mean, let's start with something that you probably are familiar with. This CSS rule here is saying, for a class called darkCloud, let's make the foreground color, pound, 555555. Well, if we know our hex colors well, we'll know that that's -- because it's even all the way across, it's going to be a gray color. And because it's lower numbers, it's going to be a darker gray color. But let's break it down even further. The first two 5's are red, the second two are blue, and the last two are green. So we can say that red equals 55, blue equals 55, and green equals 55. But what do we mean by 55? Are you ready for a little math? See, really what we're saying is that 55 is equal to, take the first 5 and times it by 16; now, add to that the next 5. What you're going to find is that 5 times 16 is 80; add 5, we get 85. So really what we're saying is that red equals 85, blue equals 85, and green equals 85. So why do all this math? When we are using RGB, this smoky class, referring to this color of RGBA 85,85,85, comma, 1 is exactly the same color as the one we specified above. The one at the end is dealing with opacity. So show it at its full strength just like we did with the darkCloud. We can do this same exact color using HSLA. This one's different. The H stand for hue; the hue represents the color spectrum. The very first number, 1, is red, and as you can see in the circle that has just appeared, it goes down to 120, which is green; then it goes to 240, which is blue; circles all the way back; and then, of course, we end up at red again. So the first number here is a 0 to 255; the second number has to deal with the saturation of the color in percentage, the intensity of that color, whereas the third represents the lightness or light. And notice that we're saying, let's start at zero with a zero saturation, but let's increase the light by 33 percent. Well, guess what you got? You got yourself a dark green. And then the final number, 1, well, that's referring to the opacity. But why is it A?

Alpha Well, A is for alpha. What that boils down to is, to what degree do you want to see this thing. So we talked about before how you can have a class name called vanished and have it refer to a color called transparent. But you accomplish this same thing here with, let's say, the invisible class name that refers to a color that's RGBA; notice, all zeros. See, a zero in the alpha means you can't see it. Same thing for HSLA. Now, while we're on the topic of colors.

currentColor There's a keyword here you might want to know about. Let's say in this example that that you have a div tag and you've specified its foreground color to be red. You want the same exact color to be used for the border of that div. Especially if you're going to be repeating that same color throughout, you can now use the current colored keyword. What that does is it refers to what the primary color is for that particular definition, and therefore if you need to make any changes, you would only need to make that change in one place, all the rest will follow suit. You could say that current color to some extent is the closest thing we have to a variable. It kind of refers to whatever the primary is, and whatever that's set to, everything else falls in line. Let's see some colors in action. We'll return now to the CSS3 Demos Web Site.

DEMO: Colors As I return over to Visual Studio in the project, I've expanded my colors area in my style sheet in a comment area to help me appreciate that the hex colors that were provided to me by the quote, unquote, designer, I now have the RGB and HSL equivalents in the event that I want to use either one of those methodologies in my CSS for colors. And I'm going to give you an example of one right now. We just made it possible in the nav area for the color to be transparent. What I want to do now is change that to prove a point and to discuss something, to no longer be transparent but to be RGBA of 0, comma, 0, comma, 0, comma, 0; and I'm going to save that, return over to the web site, and I'll make sure it's refreshed, and you can still see that it's working just the way we had it prior to making that change. So why make the change? The change is there for this reason: It's been my personal experience that that transparent keyword is not supported in as many browsers as this syntax. So my personal recommendation, if you want to make something transparent, use this RGBA technique instead of the transparent keyword. Maybe after time that transparent keyword will be supported everywhere. I'm going to return to the site, and I'm in the contact section area, and I think another example for where we can use some of this is in the contact form. I want to make it possible that if someone puts in wrong data, maybe I can use this new color scheme approach in here to really make a point with regard to something not good, especially for -- if we're inside and we're putting something wrong in there, I'd really like that to stand out more. So what can I do? I'll go ahead and switch back over to Visual Studio, and I'm going to call upon the invalid selector, and I'm going to say, not only that, but if you are in focus mode and you're invalid, what do I want to do? I'm going to change the background color to RGBA, use a number that was in my approved list, and I'm going to provide this for the opacity, which is going to make it at about 22 percent. Let's see what effect that has when something is invalid. I'm going to save that, return here, and refresh. You see how when we're focused in now, and the reason why it's doing that is because both of these are required fields. If I try to submit, well, it was invalid by merit of having nothing in there. Well, if I put thing in here like Michael Palermo, and now as I toggle back and forth, you'll notice I'm not going to get that slightly different looking color in the background, and the reason for that is because this is valid data now. If I put bad data in here and continue to go back, it's going to kind of give me this indication like, guess what? Don't think that's right. So I'm going to go back over into Visual Studio, I'm going ad a new color here for title. So the color is going to be using HSLA, 210, 100 percent, 10 percent -- that's in terms of lighting -- and a 0.75 or 75 percent for the opacity. So as a reminder, with HSLA, this is the hue, 210; this is the saturation; this the lighting; and, again, 75 percent for opacity. Let's see how that's going to make the page look now. I'll go back over to the browser and I'm going to click refresh. So I've added a different color here for the top; something that's going to stand out now from the rest of the page. ( Pause )

Gradients Well, now we're going to give our attention to gradients. This is definitely the eye candy of this module. Here we get to blend some colors together and provide that ooh, ah factor. So let's take a look at it from this perspective. Let's say we want to create a class called "groovy," and we want to mix some colors together. In simplicity we can set the background to a linear gradient and blend those two different colors together. Now, the first thing I'm going to mention is that you should probably always have at the beginning a background color specified that would serve as a fallback in the event that the browser doesn't support a linear gradient. Of course, depending on the browser, you may have to add specific types of definitions using those vendor prefixes. We talked about vendor prefixes in a previous module, and although I don't use them in every single one of the examples, in this one I thought I should because there are some minor differences in the syntax.

DEMO: Gradients So let's go ahead and see how we can apply this in a big way at the CSS3 Demos Web Site. And back in Visual Studio I want to make a big change to this page visually, so I want to reference the body tag. I want to now set its background to be one of these gradients. Poof. And just like that, wow, I've got myself a gradient that's specified. Now, I'm going to add the next kind, and just like that, I have another linear gradient specified. Again, now you'll see the keyword is part of the definition as opposed to being a value inside of it. But they both accomplish the same thing. They're going to have this color here, the 00AAAA at 70 percent of the gradient, and the darker color's going to be at 30 percent. Let's see how this looks when we apply it now to the site. I'm going to click refresh. And now the background is starting to make the content come out and stand out more. Gradients, if use appropriately, can really provide a nice visual appeal to the end-users of your site. Now, I'm going to add another gradient. The entire purpose for this one is just to provide a reference for you so that you can see what it would look like if you really want to target as many browsers as possible. Now, there is a class name that's used in the HTML, and if I scroll down, you'll be able to see where it is. It's in the section of contact, it's class equals grad. The reason why I have it there it because I knew eventually I was going to apply a gradient to this section, and that's what I'm going to do now. It's not going to be typed out, but I am going to explain what's going on here so that you can appreciate how you'd really want to do this if you're going to target as many browsers as possible. First of all, you'll notice I set the backgrounds to a white color. This is my fallback. Then I'm going to try to apply a filter. At the end here, I specify I'm trying to go after IE6 and IE7; the next one, IE8; the next one, webkit; next one IE10; or future CSS3 browsers without any prefix whatsoever. So I wanted you to see this. I didn't involve some of the other vendor prefixes, but this is a good understanding of if I really want to go after the depth of browsers that are out there, this is what you'd have to do. So it's more of a reference than anything. But just to prove that the reference is worthwhile, I'll go ahead and save that, and I'm going to return to our site, and let's go ahead and go over to the contact page, and I'm going to hit the key to refresh the browser. And you can now see that I do have kind of a reversal of that color now as a gradient for the contact page specifically.

Summary In summary, we learned there's a lot about colors. We learned how to set the opacity and transparency using opacity and transparent keywords; tried to understand our color options; there's some predefined color names, such as current color; and we know the hex values, but we also saw how to convert that hex value into an RGB. RGBA and HSLA are just other means or methods to drawing out the color that we want. If it's easier for you to find a color by its hue, by its saturation, and by its lighting, then you would use HSLA. If you think in terms of RGG and you understand the 0 to 255 for each one of those, then you would use RGB. Of course, the A refers to the opacity. And then finally, we learned how to create gradients, and we saw an example of that by applying it to the body of our site. And we also created a little gradient inside the contact page. So I hope you enjoyed learning all this about colors, and this concludes this module on colors in our CSS3 course.

Borders Introduction Hi, this is Michael Palermo. In our course on CSS3, this module is completely dedicated to something simple; borders. Now the overview is as follows. We're going to understand how we can make them resizable; we're going to see how to round them; and we're going to see how to provide some shadowing to them. This is not a trivial thing because let's just face it these are highly sought after features in many of the new and modern websites today. So you're definitely going to want to pay attention to each one of these. Let's start with the first.

Resizable Borders The resizable capabilities in CSS3 allows you to target a particular element so that we can make it smaller or bigger. Let's see an example of this. We have a class name dot box and we're going to provide some definitions for it. First, we're going to say that it can be resized. When we mention both, we're saying it can be done horizontally and vertically. Of course, the other options would just be either one of those or none. This is very important. If you just do the first one and nothing works, it might be because of this. You must set your overflow to something other than visible. Most elements are visible in the overflow by default. So, setting it to auto would allow you, therefore, to take advantage of the resize. What's optional but a good practice is to specify your max width and height. Let's say you don't want them to exceed a particular height or width. Likewise you could also specify a minimum but keep in mind anything in the box if there's contents in it it's already going to to some extent already do that for you, but you could specify a minimum as well and if you really want to make the user happy, give them a cursor that says you know what you can move me.

Rounded Corners Let's take a look at another very sought out feature. Some might even joke that you can't even have a new modern HTML website unless it has a rounded corner in there somewhere. Now, in times past, you may have had to accomplished this through complex rules and imagines, let's take a look now how simple it can be to introduce rounded corners the way you like it in your site. Here we have an example of applying a class name called soft corners and we're using the border radius property and setting it to 5%. Where this has an advantage in using this approach with the percentage is that whatever we're applying to it however big it is or we're using a percentage to say I wanted to be a soft corner. The other alternative is to give it a specific size. So in this example, 2EM, which would be about the equivalent of 32PX. Now that is a fixed size for the corner and notice these are the two simplest ways that you can add a border radius and this is going to apply to all corners. Now if I wanted to do the round up one and be more explicit, then I can use the longer syntax and apply that value to each one of the corners individually, but if you're going to apply the same exact value, you might as well use the simple shortcut as we did in round up.

DEMO: Borders I can't wait to show you how cool these things are as we go back to our CSS3 demos website. Now as we return to our site that we've been building upon from the previous modules, we can see it's starting to come to life but, again, lots of opportunities for us to apply some subtle rounded corners. Let's find a really simple example to start. Maybe in our contact area. Maybe I can make some of these things in here rounded. Let's see a simple example of that here by just applying it to an input. Returning to Visual Studio I'm going to create a definition for that, a rule, so the input is simply going to have a border radius that is going to equal just one EM. I'm going to save that, return to the browser and refresh. So now my inputs are rounded. This could be desirable. As we learned before, I could even go and specifically target certain corners if I really wanted to just have certain corners done. Let's tackle something a little bit more challenging now. I'm going to go over to the topics list and how about this whole unordered list. Maybe I can make this thing rounded. Let's see what we would have to do to make that work. Returning to Visual Studio, I'm going to create a rule here targeting the topics on ordered lists and I want to make sure that it has a border radius except I want this one to be 2. I will save that, return to our site and refresh. Well, I didn't see what I was hoping for. I wonder why. Let's examine this. I'm going to go now into the code and let's see if we can figure it out. Whenever we're applying a border radius to an element, we do have to be aware of the fact that at times depending on what the content is inside of that element, it may agree or disagree to be bordered along with it. If it disagrees as the case we had here, then we may need to target specific areas inside of that element to make sure that it's going to agree. So, let me show you what I'm talking about. By adding these rules here I'm now targeting specific line items. The first one, the fourth one, the ninth one, and the last one. These, of course, represent the various corners now that we have these separated columns in our list. By applying these here and saving this, if I return to the site now and hit refresh, I'll see the rounded corners now appear in those specific areas. The question could be asked did we actually need to have the border radius at the unordered list area since these seem to have done the job. The answer to that is perhaps not but in a future feature that we're going to discuss you're going to see where that's going to be an advantage to keep it that way. So I'll leave it there and let's look for our next opportunity to have a rounded corner. Let's apply it at a grander scale. How about at the content level? The content is essentially everything on the page. Let me provide a border radius of 2. Save that. And view it in the browser and, again, I didn't see the change. For the very same reason I had to do with the unordered list I'm now going to target specific corners of some of the inner contents so that it'll work. I'm going to look at the footer and I'm also going to need to look at the header. So back in Visual Studio I'm going to add a rule here. I'm going to target the titles ID, which is the top corners of our header section that they also have a border radius at the top right and top left. I'm going to do the same now for the footer. I also want to make sure to have a slightly rounded effect within the content area with my articles and sections. So, I'm going to do another one for articles and sections. I'll refresh. As you can see, we have rounded corners all the way around the content. If I go from the about or the contact is a good example where we can see a slightly rounded area here where the gradient was applied, just offer it a little softer touch here to our site.

Shadowing We're now going to turn our attention to shadowing and as mentioned here this really can if don't correctly provide depth and perspective to what we display. You can really draw attention to the things you want to. We've already discussed text shadows. Now we're going to see how to apply shadows to elements through box shadows. In this example, the class name, downright shady, has a box shadow of 4PX by 4PX by black. What does that mean? Well, the name of the class is the clue. It means down to the right corner we're going to be offset by 4 pixels down and right and we're going to use a black color for that. So, what if I wanted to go up and left? Well, we have the up and left shady class name that shows how you can use a negative number in those values to go in the reverse. This would give you the ability to go up and left. Shade with the fade introduces a third optional component and that is the blur. To what extent do I want a blur to appear along with the shadow. We can also introduce the distance. IN this example, I call this one glowing because notice that the first two numbers which reference the offset, they're not going up or down. In fact, they're going nowhere. When you set them to 0 but you also specify a distance, then what you're really saying is go in every direction 5 pixels and have a blur effect of 10 pixels using the color specified.

Complex Box Shadows You can get really complex with box shadows. In this example, notice how we have an offset in the very first line for this box shadow of 0s followed by a blur of 1, a distance of 5 EM and then black. So what we're saying is on all sides we would like to see something black and blurry, but then you can extend it. You could say in addition to that in the upper right I'd like to have a red color and in the lower right corner I could say I want to have a blurry looking green color that extends out a little bit and then in the lower left I could say I want to have a yellow color but there will be no blur and then finally in the upper left blurry looking blue color but it doesn't extend out any further than the rest of them. I talked a lot about it but this is what that would look like. This is a screen capture of this exact definition in play. Notice, again, the middle square which is the div that applied this box shadow, it has a black, blurry border and in addition to that in the upper right we have a red, lower right we have our green. Notice that the green extends out further because of the distance that was specified and then we have the yellow in the lower left. Notice how squared that one is with no blur just like the red in the upper right. Then we have the blue in the upper left that does have that blur effect. This gives you an example of the kind of power that you can have using these box shadows.

DEMO: Shadowing Of course the best way to see them in action is to do the demos and we're going to return now to our CSS3 demos website. Now as you may recall in our site, a question asked earlier in this module was why did we need to apply the rounded corner of the border radius to the unordered list when we also had to apply it to specific line items in here to get that rounded effect? Well, the reason for that was I knew I was going to add a shadow to the entire list and because I'm going to do that, I need the whole list to be rounded as well. If I had just done the list items, then the shadow would appear square not rounded, not desirable. So I'm going to go to Visual Studio and this is what I need to do in order to add shadow to the unordered list. That's the topics UL and I'm going to add a box shadow and specifically I want .5EM, .5EM so I have just established that I want a down right about 9 pixels or half of an EM and I will use a 5, 5, 5, 5, 5, 5 for the color. Let's look at that one first. So I'm going to save that. I'll go back over to the site. Let me go ahead and refresh it. So, you could see that a shadow appears. It's nice and crisp, it goes all the way around, now let's add a blur. For the blur, I just need to go into that next area and just do another .5EM. I'll save that and cruise back over to the site and hit refresh. Now there's a slight blur going around that unordered list. Let's look at another example where shadowing can be used. How about in our contact area? Whenever we have focus in a given area, let's apply that blur effect to these inputs when they have focus or anything for that matter that has focus. So what I want to do is I want to say if anything gets the focus, I'm going to apply a glow. That glow can be accomplished with a box shadow. Box shadow. I'm not going to provide many offsets so 0, space, 0, space, but I do want to have a blur. So 0.25 for my blur. I'm going to do a 0.125EM and I forgot the EM over here so I'm going to add that. So, I have established also a distance and I am also going to provide a color that is supported AA5500. So I want that color to appear as a glow around anything that receives the focus. Again, the glow is made possible when I don't specify a specific offset but I do specify a distance to go in every direction. I'm going to save this, go back over to the site, refresh. Let's see what happens when things get the focus. See how it pops out just a little bit more? It's going to even happen here for our little text area because the glow or the surrounding area is going to come into play every time something gets focused. Very cool. Now if I really want to have the content stand out on the page, maybe I can apply a little depth or a little shadowing to the entire content piece. So, I'm going to target content. I would like to provide this complex version of a box shadow. It's using the glow effect. I do have a blur in the distance and it's going to be gray but then I'm also specifying some offsets in different directions for the color blue. Let's see how this is going to look when I save this and view it now in the browser. I'll refresh. Now the entire content seems to really be coming alive and coming out of that backdrop with this special glow about it.

Summary So in summary, what we learned in this module we can give the users the ability to resize content. We can also smooth corners and of our choice and provide shadows any direction with a color of our choice. I hope you enjoyed this module as much as I did. That concludes our discussion on borders in CSS3.

Transforms Introduction Hi, there. This is Michael Palermo. In this course on CSS3 technologies. This module is all about transformers. So what does that mean? Transforms allow us to change things. How do we change them? Well, we're going to look at how we can rotate, skew, scale and translate things. We are going to see a demonstration of these at the end of this module and then we'll have a summary.

Rotate Now when you think of rotate, you think of usually changing thing or slanting something to a certain angle and that's exactly what we're going to be doing with rotate and transforms. Here's an example of rotate in syntax. We have a class name called Tilt. We're using the transform property now to say that if this class is applied to any element, let's rotate it 15 degrees. And if you wanted something completely upside down, you can create a class called upside down and apply it transform, rotate 180 degrees. Rotating things is fairly simple and easy to do. Just remember the syntax is transform the property, rotate the and inside you want to apply the degree of the rotation. You just put the number followed by DEG.

Skew Another way that you can alter the visual state of things is through skewing. Let's take a look at that example of that syntax. The twisted class name when applied the transform will skew the X and Y axis radius of 30 degrees by 30 degrees. If I want to have the effect of something leaning back and to the left, then I would transform with a skew X 30 degrees. If I wanted to stretch up right, transform skew Y 150 degrees. Skewing is when you want to you provide that perspective angle.

Scale Now, let's give attention to scale. When I think scale I think zoom, either zoom in or you zoom out. For example if I had a class called mini-me. I could apply a transform where this scale was at 50 percent, or if I wanted to apply the class name twice as nice then the scale would be the number two which represents 200 percent. If I would like to go on an instant diet, perhaps I'm applying this class to my picture. I would apply a transform scale X 75%. If I would like to suddenly become taller, I'll apply the transform, scale Y 1.2, which is increased by 25%. Scaling is all about size. You can increase it up, down, or in all directions very easy to use. Just remember, the number one means 100%. If you want to apply anything less then use the decimal point. To apply something that is related to itself as are suddenly taller one point and whatever degree you want it to go higher.

Translate I use this phrase so you moved, when you think of translate you might also think of transport because translating something with regard to transforms is all about position. Here are the examples that I provided; moving to the right. Literally moving that element and translating it means it'll move right the three EM. If I want it to go to the left I just add a negative and now I'm going in the other direction. I also want to move down and right then I can provide two positive numbers , or if all I want to do is move I can use a translate Y and again negative three.

DEMO: Transforms Of course that was a lot of talking about the syntax, let's apply some very simple applications to this in our CSS3 demo's website. As I'm looking at this site that we have developed through this course I'm looking for an opportunity to use some of these transform techniques and what better place to use it than perhaps right here in the topics page, right here in hovering over transformations. While I'm hovering over this I'm thinking what can I do to tweak that and demonstrate some of the features that we've talked about so far. Let's take a look at some ways that we can do our transforms of this transformations line item in visual studio. This is a nice little exercise because it's going to demonstrate some other features we've learned up to this point. I'm going to go against the topics list. I would like to go to the line item specifically I need to go to the child that is number nine while we're hovering over it and the H1 tag inside of that line item is what I would like to tweak. Now, I'd like to apply the transformation. And just like that I wanted to have multiple examples of that with the vendor prefixes of transforms and using the power of visual studio I'm going to put my cursor right here, hold the alt key and I'm pressing down with my mouse. I want to apply this same logic to all three of these. So I'm going to start typing. The first thing I'd like to do is showcase how we rotate a 180 degrees. This would essentially turn things upside down. So I'm going to save that, go back over to our website, refresh. Let's see what happens when I hover over transformations. And as you can see it is completely flipped upside down. Let's go back to the code. I'm going to hold that alt key down again and I'm going to apply something different. How about introducing a scale? A scale of 1.25. Let's grow up by 25% when we hover over it. And I took the rotate off so I'm going to save that, go back over to site, make sure it's refreshed and let's see what happens when we hover over it. So you can see the text is clearly bigger as we're hovering over it. Now, back over to visual studio -- what you can do with transforms is you can add more. So I'm going to hit space and say not only that let's also skew it 44 degrees, also negative four degrees. I'll save that. Return back to the site and make sure that it is refreshed and now let's see what the final impact is of both scaling and skewing the transformation. We have that new cool, groovy transformation effect. So what we've learned is that not only can you apply a transform, but you can apply multiple transforms at the same time.

Summary So in summary, what did we learn in this module? We learned we can change the visual presentation of any element by doing one or more of the following things; rotating it, skewing it, scaling it, or translating it. You're going to see these used in a clever way in a sneaky upcoming module regarding animations and transitions. This concludes this module on transformations.

Animations Introduction Hi. This is Michael Palermo. In this course on CSS3 technologies, we're now at the module regarding animations. In this module we're going to be covering what CSS3 refers to as animations. But at very related item to animations is called transitions. So we're going to understand what the difference between those two are, and you'll obviously be able to pick which one is best for your website. And then we're going to have a summary based on the things that we've learned.

Animations And the show starts now. Not because it's the first topic on the list, but it's also an hint as to how it's different than a transition. Animations are in effect when you define them. You'll see what I mean in just a moment. But first we need to understand a key concept.

KeyFrames KeyFrames are used in animations. Let's take a look at the syntax for this one here. We've established a keyframes with the name of "blushing" so that's what that is. It's a name, an animated name. The first line inside says from a background which would be a light gray color to another background which would be more of a blushing reddish pink background, thus the name. That in itself didn't do anything. It's just a definition for an animation. This one "still blushing" is just trickery. It's the same exact definition as above, but now we see instead of the "from" and the "to," it's a 0 percent to 100 percent. In actuality "from" is 0, and "to" is 100. So you can use either approach when you're creating your KeyFrames. Let's see another example of a key frame in action. This one's called "getGloomy." Now, notice that I don't have to have just a start and an end. I can have a journey as to how we got gloomy. So first we started with a white background which wasn't gloomy. At 25 percent of the animation, it's started to get gloomy. You can see the background is all Ds starting to become like a grayer color. And you can see it just descends down and finally at 100 percent, we're at black. But it does raise a question. If we have a 25 percent, 50 percent and 75 percent, of what? How did this journey come about and how do we know how long it is?

KeyFrames and Animations Key frames work with animations. So this is the definition. To understand those steps, we needs its counterpart which is an animation. Let's see how that works. Let's say we have an ID in the HTML called "target to animate." And we specify an animate property, we're saying this particular element whatever has the ID of "target to animate" I would like to use the animation. Let's go find the one called "getGloomy" and we're going to specify 5 seconds. So now we understand those percentages. 25 percent of 5 seconds. 50 percent of 5 seconds and so forth. Other things we can do. How long do we want the animation to go on for? We can specify that it goes on infinitely. We can also specify that once it reaches the end, we can have it alternate and go in reverse. And it just continues that loop and cycle.

DEMO: Animations As I always say, no better way to understand it then to see it for yourself. So let's go check out the CSS3 demo's website. Well, I'm in the starting solution for this module and you'll notice that as I look inside of Solution Explorer in Visual Studio, there is a demos folder. And in the demos folder, there are two new files, CSS3 Animations and CSS3 Transitions. I'm going to focus on the animations which is currently opened right now in the code editor. The only thing that has been specified with regard to a document level style and this box class name and those are the dimensions, the background, and a margin. And it's applied to all of these divs on the page. Inside of the browser it renders like this. So we have those four divs just sitting there. So what I want to do is introduce some animation concepts. To simplify this approach, I'm just going to be targeting one browser or specifically this vendor, prefix of web kit - keyframes and I will go with blushes as we talked about earlier. Now what that means I need to do is create my "from" background is what I'm going to be targeting in this animation. The background is going to be, you know, all those d's and then my "to" is also going to be referencing the background and I'll supply that somewhat blushing color, FF9999, and I have my first keyframe created. Now, in itself, it does nothing. Let me prove it. I'm going to save this. Go back over to the browser and make sure it's refreshed. And as you can see, nothing exciting here. What makes all of this exciting is when we apply the named keyframe, this here being blushing, and we want to apply this animation to something. So I'm going to say, hey, Mr. Div down there, the first box, I would like to do something special for you. I'm going to use the webkit-animation with the name of blushing on you. And I'm going to do so for, let's say, 5 seconds. I'll save that. Now, when I go over to the browser and when I hit refresh, the first box is animated. The 5 seconds have come and gone and as you can see at the end of the animation, it just restores itself to the state that it was at. Let's look at more examples. Now I've just collapsed that blushing animation here. It's still on the page. Just want to gain some real estate for this next one. It's an animation called "colorMe" where I've introduced now instead of "from" and "to," I have the 0, 25, 50, and 100 percent. I have my colors here that are going to change and I've applied this to the second box and I'm going to go for 6 seconds. I will save that, return to the page, refresh. So the animations work. Once again I've collapsed the definition here. And now I'm going to bring in the next example. This one's called "alterMe." What I want you to notice is that in addition to just changing the background colors notice after 25 percent, I introduce a box shadow. So your animations can become extraordinarily complex. Notice that I'm applying to the third div and I'm going to go for 10 seconds. I'll save this and go back to the web page. Now let me hit refresh. And we can see that the box shadow or the glow is starting to appear on that other box. And it's done. The final example, of course, it has to be a showstopper. So I'm going to bring that one into play. And I've called it "shockMe." And the reason for that is I really want to showcase what the possibilities are. In the last module we talked about transforms and now I'm applying some transforms in this journey along the way. Notice that I am scaling and rotating and translating and when these values change from 1 step to the next, it's going to groove itself away into each one of those and provide an amazing transformation. Also notice that when I apply this animation called "shockMe," I'm going to go for 12 seconds. But I'm going to apply the infinite and alternate which means keep doing this and when you're done with the animation, go ahead and go in reverse. Let's see how this looks. I'm going to save it and go back to the page. I'll hit refresh. Notice how awesome it is when we're applying the opacity, when we're applying the translate so that it can move, and the scale so it can shrink like that. We're getting a full scale benefit of some amazing animations, so easy to apply and, of course, this is just being done to a simple div. Just imagine what you can do with some of these animations. But this module isn't over yet. We still have transitions to get to. ( Pause )

Transitions So what are transitions? Think of them as reactive animations. They have a slightly different syntax than animations. But I think you're really going to enjoy the difference. Let's look at an example here. We have a class name called "changeBack." Now a transition is being applied to this element or to this class itself. And the transition is stating we're going to be focusing on the background for 2 seconds. But what's going to change about the background? This is how transitions are different. In the hover event the background is changed. Because a change occurred in the hover, the transition is going to make sure that it transitions to that color in 2 seconds. We can add other facets such as not only the background but the width as well for 2 seconds. And now you can see when I apply the hover, I change the background and the width. Another way that you can easily do this is just say let me transition all things for 2 seconds. So whatever is in my hover, whatever properties change that visually impact the user, that's what will transition for 2 seconds. It's a very simple syntax but very powerful as well. The key here is that the animation begins on the change of state that you requested in your transition property. So, for example, in this screen, every property that would change in the hover then that's visual, would apply the moment that the hover happened.

DEMO: Transitions But of course we must see this for ourselves. So let's go back to the CSS3's demo website and look at an example. I'm in Visual Studio and in Solution Explorer. I'm just showcasing that there is a file called SCC3 transitions. That file is open to the text editor right now and I already have the first transition on line 13 established. That for 2 seconds if the background should change for any reason, then go ahead and transition to that. Well, if we hover over it, then the background's going to change to a yellow color from a gray color. So with that stated, I'm going to go ahead and save this. And let's view that simple transition right now. So if I hover over any one of these boxes, then I'm going to see the change to that background. Let's see what happens if I make the transition longer. Let's say the background for 4 seconds. I'll save that and refresh. See how long that's taking and notice also when I leave, that it gracefully handles itself on those transitions. Pretty cool. Let's do some more. We change this back to 2 seconds. But let me also add a width down here. A width, let's say, for 200px and notice I have not specified that I'm targeting that in my transition, just the background. Let's see what happens. I'll save that and go back to the page and refresh. Let's see what happens here. So you'll notice that the width is instantly applied, although I still get this changing transition with the color. What if I want the width to grow as well? I can provide a common separated view like this. Save that, go back here and refresh. And now watch what happens when I hover. I get a very nice gradual growing transition for each one of these. Very cool. We could just specify that all things will be impacted and I could add something very cool like a border radius. And let's set it to 50 percent and now let's go back and see what happens. I'll hit refresh and let's see. We get that nice little rounded color look as it's trying to figure itself out with all the changes between the color, the width, and of course now applying those rounded corners. Now I'm curious to figure out where can I apply this in our CSS3 demos site, the main page. What I'd like to do right now is for the title of the page, I'm going to add to the title a transition that says anything that changes, any property that changes visually, we'll give it a 3 second transition. So although I'll note we've changed the opacity on the title on a previous module, I'm also going to add an additional thing to change when the title is hovered. And that's just going to be that its color will become an amazing beaming white. That's it. So with that very simple change, let's see how this is going to look in the browser. (pause) There is the title. Let me go ahead and hover over it. And I get that slow icy white look, and as I move away, it gracefully goes back. Think about what would stand out even more is if that thing kind of popped out a little bit. Back in Visual Studio I'm going to apply a transformation of scale and the scale is going to increase itself just by 15 percent. Let's see how that looks when we return to the page and refresh. Now it pops out a little bit. Provides that ooh-ahh factor and slowly goes back.

Summary So in summary this module was really about animations but we saw that there were two flavors. You can animate elements on a page via animations using KeyFrames. And remember those are immediate or we can apply transitions. Transitions happen when you target a property or all properties that are visual to change for a period of time when triggered such as in a hover event. You will see actually another example of this in an upcoming module. For now this concludes this module on animations.

Media Queries Introduction Hello, this is Michael Palermo. In this course on CSS3, this module is all about media queries. We're going to find out what those are and how they might benefit you. The first thing that we're going to do is have a very rough draft overview of what is "responsive design"; then we're going to look at more tactical things, such as how to adjust styles based on a viewing dimension, and then how to adjust styles based on device constraints; and then we'll have a summary.

Brief Overview of Responsive Design So when we hear this term responsive design, what does it really mean? You can kind of look at it this way: If something is rendered in one device or viewing area, wouldn't it be nice if it adapted or changed accordingly? That's what responsive design is; the ability to do that. Why did it come about? When you think about it, Web sites are created at certain dimensions, and, of course, our styles are usually in line with certain dimensions. But when we get to something that's smaller, like a phone, we don't know exactly if our site's going to look good in a different platform. Responsive design helps us to make sure that we intelligently utilize what's being presented based on that viewing area or the constraints of what that device can do. Let's focus on two different aspects in this module: Responding to the viewing dimension, and also responding to the device constraint.

Responding to Viewing Dimensions With regard to responding to the viewing dimensions, what we're talking about here is, let's say your site is opening in a browser and the browser itself resizes. Can you respond or can you create styles without any script and allow for it to actually change accordingly? Well, that's what media queries are all about. And in this example we're making a change to a style based on a change in the viewing area. Here's the example: The "at media query" is on screen, and the max width being 600 pixels. Another way to look at that is, as long as it is less than 600 pixels, let's have the background gray. And, of course, you can have more than one media query. In this example, we want to also have an in between; that is, if the screen is actually a minimum width of 600, but not greater than 900, then let's change it to a different color. This is responsive design. This is the ability to allow us to really fine tune how we want something to be displayed -- or not -- based on the viewing area itself. We're going to see a demonstration of that a little later on in this module.

Responding to Device Constraints Another thing that we can do is respond to the actual device constraints. For example, although on a computer screen we can easily resize a browser, on a mobile device we might be constrained to the actual viewing area itself; not really moving a browser around as much as just utilizing a what small real estate we have on the device as it is. Media queries allow us to query for that constraint, what is the maximum width in this device. In this example, 480px. Now, what that means is, it is giving us the maximum device width based on a landscape view 480px, the max width it can go. In this example, if this happens to be the case, so it's less than that, the device cannot go any higher than 480, then I want to change my background. Now, this is different than what we talked about earlier. What we talked about earlier was, what if we shrink a browser window down to this size. In this example what we're querying is, can the device even go any higher than that. So it's different but it's good because it allows us to target specific implementations.

DEMO: Site before changes Let's see a demonstration of these things. ( Pause ) So the first thing I want to do is showcase how this site looks without any media queries whatsoever. I'm no longer in full screen mode so I can do some resizing, and as you can see, as I start to resize, I'm just getting clipped, so nothing really is happening. If I go to my Topics area, again, I get clipped. If I go to my About area, same kind of thing, I'm not getting any value at this time because I haven't responded to these things. Let's see what we can do in the code to be responsive. ( Pause )

DEMO: Applying Media Queries The first media query I'm going to write is going to be targeting the screen and -- and this part is important -- what is the essence of the query itself. Well, I'm going to say max width of 800. You know, another way of saying that is, if the screen or the browser is less than 800, then apply. So one thing I can do right away, especially because I've been using em's not px's for a lot of my sizing, is identify at the body level that I want my font size to be at a -- 85 percent sounds good. I'm going to save that. And let's see what happens when I go back to the browser. I'm going to bring that back in. So we can see what the font size looks like now. If I start to -- well, let me refresh -- if I start to bring it in -- hmm, I can see that something changed but it really messed this area up in here. So that's not going to be good, but at least I can see that there is a little bit of resizing going on with that font size. Now I'll have to tackle these other issues that are happening as I'm experimenting. In that topics area, I want to set everything there to no longer allow any kind of border radius. So I'm going to put a zero and then mark that with an important which essentially overrides it. And same with box shadow; I don't want any kind of shadowing, none, and same thing, make sure that is important to me, too. And I'm going to save that right now. Let's see how that had an impact on the screen. I'll go ahead and bring this out and refresh. Now, take a good look to this area here, and let me bring it in. ( Pause ) So I no longer have the rounded areas, I still have this extension over here which I'm going to be able to fix, but the media query is starting to come through for me. Let's fix some of those other things so it will look even better. I think the columns are starting to affect me so I'm going to add this code in here, and what I'm doing here is I'm saying, I want the unordered list to no longer have a column count. And because I'm doing that, I want all the line items that are inside of this unordered list to just display inline block, float to the left, and give them some new padding instructions. Let's see if that fares well. I'll save that, go back to our browser, and refresh. So now I'm starting to see it look better. And here's the thing: As I shrink it in -- if I expand out, I still get my rounded corners and columns, but as I shrink in, I start to get something that's just a little bit closer or a little bit more compact to one another for the smaller viewing area. Let's see what else we can do. Going to bring in some more code. Now, what this code is going to do is change some font sizes in our titles. I'm also going to make it so that there's no transitions in the title. I also want to make it so that in the About box I'm going to display it standardly. I'm going to go into the background position and change the location of where some of those images are and also change their sizes. Notice that this will refer to the first image, this will refer to the second background image. Likewise for the sizes. I'm going to change the paragraph inside of the About box, and if we're going to go smaller, I'm going to do a little bit of a rotation here in a transform in order to show it in a different way. I want to set the content to a different width and all the article sections and footers to a different width. And I specifically want to add additional padding in the footer. Lots of stuff going on. I'm going to save that, and let's see what happens when we refresh in the browser now. I open this up and let me see what happens when we resize. So now I get a much smaller view screen. This is more conducive to someone having to work with a smaller screen. Let's see what else we can do. In the About, notice that I changed this title. When I expand it out, the shameless plug part of me seems to fill in the screen and that little tag line is so small that I reversed things around and even change the lobes of where the logo went simply by resizing it. Back in Visual Studio, I want to add another media query other than the one that I have, and the reason for this new one is going to be addressing what if it's even smaller dimensions than what I've been showing casing so far. In this example, what if it's 480px. So I even want to reduce things further. I'm still addressing some of the things I did in this first one, but I'm taking the numbers down. I'm making a slightly different type of transformation in the about page. And I'm changing some of the line item settings so that they're also going to be more compact in the topics page. I'll save that. And let's see that one in action. ( Pause ) Expand this out, save it, and as I come in, we'll find out first one appears when we're at about 800, and as I continue to go further, then you'll see yet again another transformation. When I go to the topics, expand out, you can see it grow here and then grow here. ( Pause ) In the previous module we were dealing animations, one of which I added to the title when we hover over it; and I have elected to now move that into a different area. That area is going to be another media query. So if the minimum width of the viewing area is 801, what I'm saying with that is, the screen is at least 801 pixels which would support this hover. So if it's that big, if I go over the title and hover over it, then I'll see the color jump to a white and, of course, the transform will take place. But this is only going to happen if the screen is big. So I have that saved, minimize that, bring back the browser, and I'm going to refresh it. You'll see if I hover over it now, I'm not getting that effect. If I hover here, I don't get the effect. Now, if I hover over it, now I get that transition that executes with the transformation and scaling it out and also turning the title white.

Summary So in summary, you learned that media queries allow us to respond to the things going on especially with regard to resizing or the size of a viewing area. Styles can be changed based on viewing dimensions or even based on device constraints. Although we touched on device constraints, we didn't look into it deeply. We might see that in the final module coming up next.

Script Introduction Hi, this is Michael Palermo. In this last and final module in the course CSS3, we're going to be focusing on script. And we have good reason to do this. Let's find out why. For this module, we're going to focus on how you can and why you would change styles programmatically in Java Script. We're also going to see a key reason why you might be in script is to do feature detection and browser support. When we're done, we're going to have a summary of what we've learned, but we're also going to have a review of resources and of the entire course to make sure you got the most out of this experience.

Managing Styles in Script One of the reasons why you may need to change your style in script is because you've tried everything else without using script, and you just simply have to do it this way. That's why the tag line: if all else fails, let's script it. It's amazing so far, in this course, we have not even attacked or mentioned script. So this is our opportunity to say, you could do so much with CSS3 without using script, but it's not evil if you use it. And in fact, there are very good reasons why you should. First let's look at some examples of how you can change styles in Java Script. Here's what I would say would be the raw or core way you can do it. Perhaps you're going to create a variable in Java Script called E that's going to grab an element with the ID of Output, and now you want to change the style, the program color of that to red. This could be accomplished also using a very popular Java Script library called J Query. And again, I'm referencing that Output element, and I'm going to the CSS function which says, here I want to change the color and make it red. So one liner, very easy, cross-browser supported as well. Other ways that you can manipulate styles in Java Script using J Query is by adding and removing class to that particular element and by doing so, of course that's going to change the way it appears in the browser.

Supporting Multiple Browsers What if the browser that must not be named, I dare say it, renders that page? We have to face the fact that all this cool stuff is not going to work in some of the older browsers. So we need to know how to support multiple browsers. I have painstakingly tried hard not to talk about browser issues in any of the previous modules. I wanted the focus to be on the features. Now we have to deal with the headache and the reality of, what do we do for those browsers that don't support all this cool stuff? Something I highly recommend is the use of Modernizer, an open source Java Script tool that makes it easy for you to check to see if certain things are going to be supported or not. One way that you can use it is in script. If you have a reference to it, you can ask the question like this, if CSS gradients are supported, but because it begins with a bang or an explanation point, it says if it's not supported, then we can write code that would handle something differently based on there not being any support. But what I love about Modernizer is the other way that you can use it. You can use it in a stylesheet and avoid writing script altogether. And the way this is possible is that when the page renders using Modernizer, it creates high level class names, such as in this example either no CSS columns or CSS columns. It'll only have one of the two at the very highest level of the HTML element level. So what this means is, you can write your style sheets almost like if statements: if no CSS columns, this is what I want to do with my container. However, if CSS columns, this is perhaps what I want to do. So very powerful feature, the only script you had to really add here was just to reference the Modernizer in the HTML page itself. And of course, I always feel like the best way to see these things in action is to go right into the demo code. So let's return for our final time for our final demos regarding the CSS3 demos website.

DEMO: Adding Scripts In the starting solution for this module, I want to showcase a few of the changes that have been made. First of all, a scripts folder has been added, three script files are already in there, J Query, Modernizer and a custom site dot js file. I have included all of them in this file. Because we're using Modernizer, I've also updated the HTML tag to have a class equals no dash js. You'll see how that plays a role in just a moment. The site dot js file currently has a custom function that has been been pre-written by myself to detect if there's a particular selector that's supported, and I'll be using that down here. And this function will be executed when the page is loaded, and I'm going to write some script to show how to handle some browser issues. Some other updates that have been made or changes to the file, in order to show how to use some of these browser support features, I wanted to make sure and take out from some of the previous modules, some of the items that are perfect candidates for manipulating in the style sheet so that they will work appropriately and provide the best user experience across multiple browsers. For example, this definition or rule is taken from the layout section, this was from borders, and the gradient class was taken from the colors. So we're going to make some changes to those in this module so that we can have that better user experience. For now, probably the best use of understanding what we're going to be doing for the rest of these demos, let's see how the site looks in other browsers.

DEMO: Viewing with Multiple Browsers We're familiar with using Chrome; we also would like to see what it looks like in another browser, such as Internet Explorer 10 in its platform preview. Now Internet Explorer 10 does actually support more features than what's showing here. This is an older version of the platform preview, so keep that in mind as we move forward because Internet Explorer 10 does in fact support all the things that we've been doing so far in this course. There are some concerns that I see, however. For example, where's my menu items? They seem to be gone. If I hover over them, they'll appear. This is because in this particular version of the platform preview, text shadow supports hasn't been added yet. And because we were using text shadow as a basis for, you know, showing those menu items, well now they're invisible if I don't have it. I also notice that my corners down here are kind of odd. Well, if I navigate my invisible menu item and go to Contact, see a gradient has been applied here but the corners are sticking out. And the border radius is not taking care if it. So that's an issue for me. Now let's see how it looks in another browser. Whoo. OK. Well, I love Internet Explorer 9. However, there are some CSS3 features that have not been included in Internet Explorer 9, but are in Internet Explorer 10. I'm having some challenges here with my topic list. So I have my work cut out for me, but I'm not too worried because CSS3 is going to do a great job working in harmony with Modernizer and Java Script to make sure that the user experience is going to be great. Let's see how we can start to tackle and fix some of these issues.

DEMO: Using Modernizr, No Support Returning to Visual Studio, I'm going to add the following definitions right here: dot no text shadow in two locations, and I'm targeting nav A and nav A hover. Why am I doing this? Where is there is a class called no dash text shadow? Well let me demonstrate something. I'm going to return back to Internet Explorer, and I'm going to press F12 which is going to pull up the developer tools. And you'll notice that the HTML tag has a js, a no flex box, canvas, canvas text. What it is doing is Modernizer went in and injected all the things that are supported or not supported into the HTML tag. So this is how we can now define the things that we want to do or not do in our CSS file. If the browser has a no dash text shadow in that HTML tag, then that means that it's going to contain the outer scope for this navigation and apply this rule if no text shadow is supported. It's really cool, it's like having an implied if statement in your CSS. Because we have no text shadow in that browser, I want to make sure and add a hover option for this so that when we hover over it we still get an effect. We didn't need that before, but now we do. I'm going to make that change. And let's go see how that had an impact on the browser. So I'm going to hit Refresh, and now I have my menu options showing. When I click on Contact, I want to now fix that little square region in this page. I'm going to back to Visual Studio. And of course there's probably a lot of different ways that you can solve this issue, but I'm going to take a route that, well, it might seem vindictive. But in essence what I want to say is, if you don't have a browser that supports these CSS gradients, instead of me doing a lot of work to try to make it look exactly the same, I'm going to compromise and not give you one of the other features. So in this example, everything that is a border radius is going to go away. It's shameful, if you think about it, because what I'm suggesting is you don't get a feature based on something else not being available. But it also gives me an opportunity to talk about this. If you do happen to set a border radius to zero, we've seen this earlier also in this course, but adding this important followed by this explanation point, means that we can override all settings that way. The entire site will now have no rounded corners. I will save that, and now what I want to do is see if that fixed the issue by going back to Internet Explorer, and I will hit Refresh. And as you can see, and if I go to the topics list, this will prove the point, nothing is rounded. Everything has been changed back to a square. Going back over to Visual Studio, we applied this for no CSS gradients. A valid concern would be what about browsers that do support CSS gradients? Are we going to be square? Well of course we want to prove that that's not the case, so I'm going to go over to Chrome and do a Refresh here, and you'll see, I still have my rounded corners everywhere. IE 10 supports CSS gradients. Let's take a look there. I'm going to do a page Refresh. Well that's interesting. We can obviously see the background supports a CSS3 gradient. Why do I still have this square edge in contact? I knew it was going to do this, and it gives me yet another reason to show you something that you can do when you find these kind of situations. Let's go back over to Visual Studio. When I scroll down to this class, which is the CSS rule for the gradient in the contact area, and what I'm trying to do is target all the different browsers out there, the old ones versus the new ones. But there can be occasions where two of these might be in conflict. For example, Microsoft may choose one of these filters over the CSS3. Well, I want them to do the one I want. One great way that we can utilize Modernizer in this example is by applying the definitions here, like dot no CSS gradients, and we'll have that version. And then I'm going to do another one down here called dot CSS gradients which means what if they are supported, dot grad. And the easy fix here is just to take these CSS3, move them down to this area, keep the ones that do not use CSS3 in the no CSS gradients. Now let's go over and check out Internet Explorer 10, go to Contact, and sure enough, because it does truly support CSS3, now it's utilizing the correct definition. I'm going to go back now over to IE 9.

DEMO: Using Modernizr, Supported it's pretty obvious what needs to be fixed here.I mean, the topic list is still clipping pretty badly from underneath here, and even when I go to that particular page, it just doesn't look right. So that's what we're going to fix. Right now I'm going to return to Visual Studio, and we'e going to solve this issue. We going to use the same approach we've been using with Modernizer with all of these class names that will be specified, something is not supported. The first thing I'm going to do is add a little bit of code here, much in line with what we had down here below. It's basically saying if no CSS columns are permitted in the browser, let's change the rule for a topic's line item. And I'm proceeding it from the media queries so that there won't be a conflict with something that's already in there. The other thing I can do is I can take the converse. And that's why I had these items here from the topics area placed at the end for this module. Because I want to also say, what I want to do only if something is supported. In other words, I don't want to do any of these CSS rules unless I know for sure that CSS columns are permitted. So I could do that easily by just adding dot CSS columns at the very beginning of each line. That's going to act like an if statement. It's saying if the CSS columns is true, it's supported in the browser, then go ahead and do this particular CSS rule. So I'll do that, and we're done. So when I go back over into IE 9 and hit Refresh on the page, what you're going to see is that I no longer have the conflict here with the clipping of these line items. What's really nice too is that if I go back over to IE 10, go back to the topics list, and of course if I hit Refresh, you'll see that we didn't hurt anything else. Also with Chrome, after our Refresh, everything is acting the way it's supposed to in the environment it's in. How Chrome and IE 10 look seems to be a lot better than what we have right now with IE 9. Now having said that, the main attraction here and the main focus is how we can in Visual Studio create branching logic in our CSS with the power of Modernizer to support us. And go back over to IE 9, I'm starting to feel really good, and maybe I'll start tackling how I want to address the older browsers.

DEMO: Script for Feature Detection So I'm going to go over here and click on the compatibility view in IE 9. And when I do that, you'll notice that of course the site looks radically different. I'm not interested in making the site look exactly the same in the older browsers as it does in the new modern browsers. But I do require that it's at least as functional as the others. What does the topics list look like here? What about About? What about Contact? I expected that to happen. And it gives me an opportunity to discuss with you how you can make sure that the functionality that could be a result of your CSS 3 stuff can still be supported in older browsers. See, the issue here is that this older version of IE does not understand the concept of the target selector, and because of that, it's not swapping these views. So how can I fix that? Well considering this course is about CSS3 and this module is about script, it shouldn't surprise us that we end up in a Java Script file eventually. We've benefitted from Modernizer being a script that we can use, and sometimes we have to write script ourselves. This is going to one of those scenarios. See, the first issue at hand is I need to detect whether or not a browser can support the target selector. Now typically I would go to Modernizer, and I just want to use their tool. However, at this time, Modernizer doesn't have a test to determine for certain selectors. So that's why I wrote my own, and that's what's in this region area up here. That's why it's here. How I'm going to use it is going to be down here. And this is what it's going to look like. I'm going to create an if statement that says if we do not have the support, I'll use my CSS3 demos, is selector supported, and the one I'm checking on is Target. So now that I know how to detect whether the target is supported or not, what do I want to do? Well, what I really need to do is make sure that if someone clicks on a menu item, it's going to take them to the respective page that they're looking for. If Target's not supported, which will do that for me easily, I need to write that code myself. So with that understanding, this is what the code looks like using J Query to examine what pages I want to navigate through. And if I happen to click on an anchor tag in the nav section, I want to go and change the Z index position manually to negative 1, set the Z index position to 2 for whichever menu option they selected. Now I'm going to try to see if the Topics works - yea. So at least I have functionality.

DEMO: Using jQuery to Change Style In the starting solution for this module, I made a modification. In the intro section, the DIV that contains the message that says, welcome to CSS 3 demos, you'll notice that I've added a transition. Now, are these changes currently available to us? Well, if I open up Chrome and I click on the intro, you'll see nothing's happening. So I'm going to go into the site dot js, and underneath this comment, I'll start writing the code that will make that possible. So first I'm going to create, I'll call it message. Something that's going to represent that particular DIV, and so I can use the CSS methodologies by saying it's going to be in the intro element, and I want that DIV. Now that I have a reference to that DIV, observe the following code. What I'm saying here is if I click the anchor tag and nav, specifically the one that has this value in the atra (assumed spelling), which is our intro menu item, what do I what to do? Notice I'm using that DIV, and using the J Query functionality of toggling the class. Which means if that element has an intro clicked class, remove it. If it doesn't have it, then add it. So in this example, if you click on any other anchor tag, all the ones but the one called intro, when they get clicked, remove the class intro clicked from our DIV. And to make sure it starts right away, I will do a toggle class of intro clicked, which again will turn it on right away. Let's see how this looks in the browser. I'll refresh, and whoa, so our animation is working. Now if I click on Intro again, that will restore it back to the way it was. Clicking on it again triggers the animation to appear and makes it possible for us to trigger either a transition or an animation with script. So finally I can say with pride, welcome to CSS3 demos.

Module Summary So now in summary for this module, we've learned this. We can, if needed, change style values in Script. But we also noticed that we can use an open source script file, such as Modernizer, to help simplify feature detection. And one of the benefits of Modernizer is that we can write that branching logic right in the CSS through those class names that indicate whether they do or don't support a feature. And if all else fails, we can still utilize script to get the job done.

Resources I really hope you've enjoyed this course. This page is a list of resources that I highly recommend you check out. The first link is to my website to a page that's dedicated to CSS3. It also contains all the other links you see here, plus much more. The second link is to the CSS branding page at W3. The third link is the HTML5 release, excellent resource, similar to caniuse.com in that it let's you know, what's the status of a particular feature with CSS3 and what's the support for it right now. Is there fallback support and so forth? Of course, after this module you may really appreciate Modernizer now. If you haven't been using it, you should. Just add a link to it in your page and benefit from it in your CSS3 file. There's another link to the CSS3 resources at MSDN. And the final link is a CSS3 Maker website, it's a utility to help you generate CSS3 rules.

Course Summary So for our course review, it has been an awesome journey. We've learned that the core of CSS3 is 2.1, we've learned some cool tricks with selectors, how you can add fonts. We've seen a variety of different layout capabilities through flex box, through columns. We've learned how to apply multiple images to a background, how to use opacity and transparency and colors, how to apply shadows and borders with shading. We learned how to do transformations, skew things, rotate them, scale them. We had animations. We applied media queries so we can have it work in a big screen or in a tiny screen such as a Windows phone. And we explored scripting specifically with the view that we could provide support for multiple browsers. All of this in this course, and we're just getting started. I hope you enjoy your journey with CSS3 as much as I have. And I want to say thank you for watching this video series. Please look at the other phenomenal video offerings that Pluralsight has to offer.