Overview
You can make shapes in HTML and CSS. Sometimes it involves some trickery, like exploiting how borders connect to make a triangle, extreme border-radius to make circles, or layering pseudo elements and transforms to make more complex shapes.
But there are also some shape functions right in CSS. Things like circle(), polygon(), and path(). But where can you use them? And how? And for what? That’s exactly what Chris will be looking at in this talk. He’ll have some fun building a fan site and using four different shape-related properties in CSS.
Objective
To let folks know about some newish CSS properties, what they are capable of, and what to watch out for.
Target Audience
Front-end designers and developers
Assumed Audience Knowledge
Basic knowledge of HTML, CSS, and the concept of design.
Five Things Audience Members Will Learn
- What shape-outside is for and how to use it
- What offset-path is for and how to use it
- What clip-path is for and how to use it
- The fact that you can change some SVG shapes right in CSS
- How to animate many of these things
