CSS shapes allow you to go beyond the box to reshape floated elements into circles, ellipses, polygons, and more. This cutting edge technology breaks the confines of the traditional CSS box.
- [Instructor] This entire course … is about the CSS Box Model, … and everything we've talked about … has been centered around boxes, … squares and rectangles with nice square corners. … What if I told you the box doesn't have to be a box anymore? … That the box part of the box model … is evolving into something more flexible. … That's what we get the shape-outside property. … To see how this works, we need to activate … the Firefox developer tools because here … we can actually work with shape-outside in the browser. … In this document, I have some paragraphs … and a div with a glyph inside it … and it's floated to the left. … Right now, the element floated to the left is a box, … so everything wrapping around it … has a hard vertical and horizontal border, … but look what happens if I apply … the shape-outside circle property to the floated element. … Now the content around the floated element … acts as if the box is a circle because it is, … and if we activate the developer tool here, …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes