By default every HTML element is viewed by the browser as a square or rectangle. In this video, take a look at using shape-based CSS properties to change the float area around an element.
- [Narrator] By default, every HTML element…is viewed by the browser as a square or a rectangle.…We've been able to get around this visually…by using images with transparent backgrounds.…But even if the element appears to be a shape…other than a square, the browser still views it as a square.…If you wrap text around an element by floating it,…it still follows a square or rectangular path.…But what if you wanted to wrap text around the actual shape?…There are shaped-based CSS properties that can be used…to change the float area around an element.…
Currently, on CANIUSE.COM,…it's showing that these properties are only supported…in Chrome, Safari and Opera.…Edge is under consideration…and Firefox is still in development.…So it's not standardized across all…modern browsers just yet, but it looks like it's on its way.…Let's take a look at an example.…If I add a float left to this red box,…the paragraph will wrap around it.…I can add a border-radius to turn the box…into a circular shape.…
But the browser still looks at it as a square shape.…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.