# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://howtocode.trek.io/topics/deep-dives/html-css/css-basics/css3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.