CSS3 offers a lot of interesting functionality in our sites. This functionality can really make our sites look special and unique. However be cautious of browser compatibility issues, since some of them aren’t supported in older browsers.
- How to round corners of a box
- How to add a shadow to a box
- What pseudo-elements are and what they are useful for
- Adding and customizing transitions
- Transforming, Scaling and Rotating an Element
- How to use CSS Variables
Watch this Recorded session
Peruse through these CSS Animated Loading Icons for some animation inspiration.
Glance at canIuse, a compatibility table for various elements in CSS and HTML5.
Watch one of these series of interactive screencasts at Scrimba and The Net Ninja to learn more about CSS
Total duration is about 2 hours, but you should add another 2 hours for practicing the concepts on your own code.
In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.
- Go through the Intro to CSS 3D Transforms tutorial and learn how to create amazing 3D effects like the one below. If you like this tutorial, don’t forget to star the author’s repo here.
- Make sure to check out this amazing Interactive Transform Viewer and play around with the different CSS transforms.
- If you really like 3D, then this article will definitely satisfy your apetite for CSS 3D effects!