Course List >> HTML5 and CSS3 >> Advanced CSS3 >> 1: Animations, Subtle Effects and Compatibility
Scroll up or hover over the breadcrumbs to view the navigation bar

Animations, Subtle Effects and Cross-Browser Compatibility

CSS3 offers a whole lot of interesting functionality that you didn't know about but will really help you make your sites into something special. Just be conscious of browser compatibility issues -- some of these aren't available on older browsers.

Points to Ponder

  • How do you round corners of a box?
  • How do you add a shadow to a box?
  • How do you rotate an element a specified amount?
  • What interesting animations can you use in CSS3?
  • What are pseudo-elements and what are they useful for?

Your Assignment

  1. Read about CSS Transitions from A List Apart
  2. Browse over the CSS3 Animation Cheat Sheet for an idea of what you can do.
  3. Just glance at canIuse, a compatability table for various elements in CSS and HTML5.

Additional Resources

This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150