> For the complete documentation index, see [llms.txt](https://howtocode.trek.io/topics/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://howtocode.trek.io/topics/deep-dives/html-css/css-basics/css3.md).

# CSS3

## Introduction

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.

## Learning Outcomes

* 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?

## Assignment

* Read about [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions), stop at the Javascript section.
* Peruse through these [CSS Animated Loading Icons](http://tobiasahlin.com/spinkit/) for some animation inspiration.
* Glance at [canIuse](http://caniuse.com/), a compatibility 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.

* [W3Schools on Border Radius](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)
* [W3Schools on Box Shadow](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp)
* [W3Schools on Transforms](https://www.w3schools.com/cssref/css3_pr_transform.asp)
* [Using `::before` and `::after` Pseudo-Elements](https://css-tricks.com/almanac/selectors/a/after-and-before/) and

  [a bunch of cool things they can be used for](https://css-tricks.com/pseudo-element-roundup/)
* [MDN Web Docs on Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)