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
$50
Take This Course
  • Lectures 25
  • Contents Video: 5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2012 English

Course 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

What are the requirements?

  • Basic knowledge of HTML and CSS required

What am I going to get from this course?

  • 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

What is the target audience?

  • Anyone interested in learning what is new with CSS

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: My First Section
03:41

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

11:38

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.

10:51

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.

12:18

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.

07:09

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

14:33

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.

13:54

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.

06:30

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.

07:24

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.

20:14

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

08:45

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.

04:25

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

06:19

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.

07:03

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

11:04

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.

29:30

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.

03:54

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.

30:16

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.

14:28

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.

22:29

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. 

08:52

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.

07:42

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.

12:30

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.

11:45

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.

04:23

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Brian Wood, 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.

Ready to start learning?
Take This Course