Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Use CSS3 in your site today to your Wishlist.

Add to Wishlist

Use CSS3 in your site today

Add CSS3 features to your site and discover how we deal with browsers that lack CSS3 support.
3.5 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
18 students enrolled
Created by Brian Wood
Published 8/2012
English
$10 $50 80% off
21 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
Have a coupon?
What Will I Learn?
What is CSS3?
Can I use CSS3 today?
Understanding CSS methods
Box-shadow (drop shadow)
Border-radius (rounded corners)
Border-image
Applying multiple backgrounds
Background clip/ background origin
Background-size
Applying background gradients
Ways to describe color (rgb, rgba, hsl, hsla)
Applying opacity (transparency)
Rotate content using transform
Text shadow
Using your own hosted fonts with @font-face
CSS3 Selectors
Understanding box-sizing
Media queries for responsive design
CSS3 transitions
CSS3 animations
Using PIE for IE
Using Selectivizr to get selectors to work in IE
Working with conditional comments
Using Modernizr to detect CSS3 and HTML5
Using Respond.js for IE media queries
View Curriculum
Requirements
  • Basic knowledge of HTML and CSS required
Description

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

Who is the target audience?
  • Anyone interested in learning what is new with CSS
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 25 Lectures Collapse All 25 Lectures 04:51:37
+
My First Section
25 Lectures 04:51:37

This introductory section is intended to describe what CSS3 is and how it relates to CSS2. Is it brand new? Is everyone using it?

Preview 03:41

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.

Preview 11:38

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.

Preview 10:51

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.

Preview 12:18

Adding rounded corners to your design elements is made easy with the CSS3 border-radius property.

Border-radius (rounded corners)
07:09

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.

Border-image
14:33

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.

Applying multiple backgrounds
13:54

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.

Background clip/ background origin
06:30

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.

Background-size
07:24

Linear (and radial) gradients using the linear-gradient property can be used to add some impressive gradients to your elements.

Applying background gradients
20:14

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.

Ways to describe color (rgb, rgba, hsl, hsla)
08:45

Using the opacity property, you can add transparency to most anything on your pages.

Applying opacity (transparency)
04:25

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.

Rotate content using transform
06:19

Using CSS3 we can finally add drop shadows to our text without converting to an image.

Text shadow
07:03

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.

Using your own hosted fonts with @font-face
11:04

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 Selectors
29:30

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.

Understanding box-sizing
03:54

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.

Media queries for responsive design
30:16

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.

CSS3 transitions
14:28

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. 

CSS3 animations
22:29

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.

Using PIE for IE
08:52

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.

Using Selectivizr to get selectors to work in IE
07:42

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.

Working with conditional comments
12:30

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. That way, in certain projects, you can detect a feature, then apply a style depending on whether the browser the page is viewed in supports certain CSS3 or HTML5 features.

Using Modernizr to detect CSS3 and HTML5
11:45

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.

Using Respond.js for IE media queries
04:23
About the Instructor
3.8 Average rating
4 Reviews
58 Students
3 Courses
Web Developer/Trainer

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.

Report Abuse