Obliterate Boxiness with CSS Shapes

By default, everything on a webpage is a box. But it doesn't have to be. CSS Shapes lets us flow content around circles, polygons, masks and other shapes. Jen shows you how using Firefox dev tools.

[milleniummoses]

WOW! There you go again with awesome content and presentation. I never knew this existed. Dev knowledge and soon-to-be skills just went up a notch.

[EndSub]

Somehow I refer to you as the Bob Ross of CSS

[freshpootube]

I like your delivery - such a welcome change from 'Youtuber' shouty sales people. I wish more people just spoke normally when presenting.

[crooker]

That's it! With css grid and css shapes... Web design technology is done. We can now do any kind of layouts for the Web. Magazine quality layouts are finally possible (without hacking). :) thanks!

[Mik]

Hi Jen, I love CSS-Shapes like you and I love you for your vdeos.
Anyway about images like grapes, instead of polygon, I prefer to use "shape-outside" passing in the img url and then using the property "shape-image-threshold" by a value from 0 to 1; 0.5 is pretty good and the result is perfect. It also works in Firefox

[SaleKnezevic]

Thank you. I love you. So much useful stuff spoken in such a wonderful manner.


Obviously not referring to just this video.

[crooker]

Love your videos, Jen. Just curious as to whether or not that Mozilla Polygon tool ready yet? Anyway, it's stuff like this that makes the web closer and closer to being 'finished' as a content delivery tool...! :)

[natelawrence]

Hi, Jen, is there any way in CSS to warp text to fill the bounds of a shape?
I'm trying to replicate the logo for the web series Chrontendo in HTML/CSS for a fansite I'm working on to present interactive transcripts of the episodes but can't seem to find a way to perform a barrel distortion on the Georgia Bold font that is necessary to complete the logo's appearance.
I want to keep the wordmark/logo as text, so that it can be transliterated into other scripts/writing systems if a user translates the page.
Thank you in advance for your answer.

[channadog]

Thank you! I am new to css/html, is there a way to use float in css grid? Thanks again!

[Anthony-wgfn]

is the firefox extension for the polygon editor available?

[denniskamonde]

Thanks a lot you're the best! This is amazing

[tonyclarke]

How did they float triangles on both sides in the last picture?

[sanjaybhatikar]

Very clever tips from the Goddess of Style 🙂🙏

[anisdabdi]

love your content, professsional, simple, and valuable

[hezekiahvaldez]

thanks a lot ma'am... you're my hero in web designing!

[minamishail_Tech]

Really looking forward from you, for a new amazing content & tutorials for the amazing CSS .

[mustafamahmud]

can you help, how can-- ' preference (needs to be set to true). To change preferences in Firefox, visit about:config.

[irwind]

Great content as always ... shape-outside: circle() does not work in Firefox 60.0.1 64 bit Windows 10. The simple example provided in the video does work in Chrome but not in Firefox.

[KrausBean]

This CSS and the one you did about "CSS Grid like you are Jan Tschichold" are awesome. Looks like the topic of your talk at Generate NYC (I was there and loved it) about making the web more beautiful like magazine layouts can come true now. AWESOME! Keep up the amazing work!

[filthymitch]

Not supported by Firefox, IE, or Edge as far as I know?