There are so many cool new things happening on the web today (like every day). CSS3 is the newest flavor of CSS and is something that most sites can't do without. In this CSS3 Web Design course, you will learn what CSS3 is,CSS3 New Features, CSS3 Browser Compatibility, how you can use it, and learn the most widely used features such as round corners, drop shadows, media queries, @font-face, animations, and more. Towards the end of the course, you'll also explore the different options for getting older browsers to either apply the new CSS3 content or create fallbacks.
Note: This course is intended to cover the new features in CSS3 and not the entire spec.
Intended Audience: Web designers, Front-end web developers, designers
Requirements: Some basic CSS and HTML knowledge are suggested
This introductory section is intended to describe what CSS3 is and how it relates to CSS2. Is it brand new? Is everyone using it?
As cool as some of the new CSS3 features are, we need to look at the browser landscape and see what is supported in our favorite (and least favorite) browsers. This section will give you an idea of how to approach using CSS3 in your designs today.
In this section, you will get a birds-eye view of the different ways that we can use to either force the older browsers (IE) to display the new CSS3 features or degrade gracefully.
One of the more used CSS3 features includes the box-shadow property. In this section, you will discover it’s basic syntax and learn about the IE filter.
Adding rounded corners to your design elements is made easy with the CSS3 border-radius property.
Border images are a great way to add some design flair to your pages. With this feature you can define an image to be used instead of the normal border of an element.
CSS3 allows us to easily apply multiple background images to box elements, using nothing more than a simple comma-separated background property. This is a great way to be able to layer images within a content area.
The background-origin property is used to determine how the background-position of a background in a certain box is calculated. The background-clip property is used to determine whether the backgrounds extends into the border or not. In this video you'll learn how you can use this to your design advantage.
Another new CSS3 property is background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.
Linear (and radial) gradients using the linear-gradient property can be used to add some impressive gradients to your elements.
With CSS3, we can describe color to the browser in a number of ways: rgb, rgba, hsb, hsba, and more. In this video, you'll understand the syntax and learn how to add transparency to your colors.
Using the opacity property, you can add transparency to most anything on your pages.
The CSS3 transform property can be used to tranform elements in a page, such as rotating an object by a specified angle, or skewing/scaling an image.
Using CSS3 we can finally add drop shadows to our text without converting to an image.
Using CSS3 @font-face, you can host your own fonts and use them in your designs. In this video you'll see the proper syntax and font formats to use if you want to use your own fonts.
CSS3 has introduced a series of new selectors that can make applying styling much easier. In this video you'll learn about selectors like attribute selectors (a[title]), new pseudo-classes (p:first-letter), combinators (h1 ~ p) and more.
CSS3 offers a new property, called box-sizing which let’s you change the behavior of the browser in calculating the width of an element.
Looking to apply responsive design to your site? One of the building blocks necessary is to apply CSS3 media queries. By using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.
One of my favorite new features of CSS3 has to be transitions. CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
Another of my favorite CSS3 features is animations. Animations animate the values of CSS properties over time, using keyframes. These keyframe animations can be controlled by specifying their duration, number of repeats, repeating behavior, and more.
In this video, you'll learn how to use one of the first "fixes"—PIE, for getting Internet Explorer 6–8 to display some CSS3 properties like border-radius.
Another "fix" that you'll explore is selectivizr. This polyfill gets IE 6–8 to display a number of the new selectors that we all want to use.
Conditional comments are something that have been around for a while and are used to hide content from non-IE browsers. In this video, you'll learn the syntax and see some great uses to help versions of Internet Explorer use different styles.
If you decide to use media queries for responsive web design, you will quickly learn that IE 6–8 doesn't support media queries. Using the respond.js polyfill, you can easily enable media queries in those browsers like IE that don't support them.
Brian Wood is a web developer and an Adobe Certified Instructor in Dreamweaver CS5, Acrobat 9 Pro, Illustrator CS5, and the author of seven training books (Illustrator, Muse, and InDesign), all published by Peachpit Press, as well as numerous training videos and DVDs on Adobe Muse, Dreamweamver & CSS, InDesign, Illustrator, Acrobat, including Acrobat multimedia and forms, Expression Web and others. In addition to training clients like Nordstrom, REI, Boeing, Costco, Starbucks, Nintendo, NBBJ and many, many others, Brian speaks regularly at national conferences, such as Adobe MAX, CSS for Designers tour, The InDesign Conference, The Web Design Conference, The Creative Suite Conference, as well as events hosted by AIGA, GAG, STC, CASE and other industry organizations. Brian has a free tips blog at askbrianwood.com/tips.