Wow! You just teach hard staff in light and easy way, and i understood your explanation. i am always scared this clip-path and polygon things. but now i know how it works. it is awesome!
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!
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!
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
Yup, that works, too! I teach it less often because getting the image to work with the CORES security limitations can be frustrating. But if you can get the servers to behave, using an image as a mask is a great solution. Especially in a CMS.
Oh wow excellent. I totally forgot all about these things LOL I think the big reason is a lot of the designs for the website have forgotten that they could even do something like this. But you're totally right. It looks Way more fluid and visually interesting.
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...! :)
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.
Hi Jen goes in to a bit more detail about the staircase layout in this talk jensimmons.com/presentation/modern-layouts-getting-out-our-ruts (about 22 minutes in), I really recommend watching the whole presentation but you will want to pause it every couple of minutes to try out the things that she's talking about :) I found these two articles alligator.io/css/shapes-with-shape-outside/ and css-tricks.com/working-with-shapes-in-web-design/ along with bennettfeely.com/clippy useful in creating this test lottiehancock.co.uk/shapes/george.htm feel free to play around with it in Chrome using the CSS Shapes editor extension.
I didn't, either. This is the second one of her videos I've watched, and both left me wishing she'd explain things more. She's an excellent web designer, but in both videos she's talked more about how she thinks this or that is beautiful without explaining the code that was used to make the examples. I prefer tutorial videos that actually explain what the viewer needs to learn in order to recreate the example. I wish her videos were more instructional with less "meta-information".
You can point to a mask with shape-outside, and then the browser uses the alpha channel of that image to find the edge by which to flow the text. The examples in my video, however, are using defined shapes - polygons, circles, etc. And the browser is using the shape that's been defined to be the edge. For example, in the grape-photo demo, the CSS itself has a string of numbers that are a polygon. That defines the edge. In any case, no it never looks at the white background. Even when using an image as a mask, the alpha channel is used, not white.
I understand the polygon (grapes) example, and the alpha channel (as src), but ironically, I'm a bit confused about the simplest example: shape-outside:circle/oval. What determines the radius of the circle? How do we get a circle/oval nicely spaced around the object rather than too small and cropping in on the photo? Is the radius measured (and set as the min distance) from the center of the image to the edge (whereupon you could add margin if desired)? Thank you so much for your time. Pardon my density. I'm thrilled to have stumbled onto your videos!
Ah, those are good questions. I didn't go into all the detail. The default, I believe is that it's finding the center point of the image, and creating an oval where the widest points are at the edge of the image margin box which you can change to any other box, content / padding / border). You can also adjust the center point & edge points. There's far more information at developer.mozilla.org/en-US/docs/Web/CSS/shape-outside than in my head at the moment. We'll be fixing that page up soon, too. Making it more useful. You can also read the spec at: drafts.csswg.org/css-shapes/
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.
Is there a way we could create those triangles to be responsive. As in as the page becomes smaller so do the triangles thus manipulating the text within them? I've been trying to recreate them to no avail
Yes! If you create a polygon using percent units, instead of fixed sizes (like px or rem) they will resize with their containing block. The containing block (the element that wraps them) has to also be fluid, of course. If it's a fixed width, nothing will squish.
Well, CSS Shapes only works on an element that is floated. And you cannot float a Grid item or Flexbox item. So, no, you wouldn't be able to directly mix Flexbox and Shapes. However, you could create a layout that's using Flexbox, and float a child of a Flex item, and apply a Shape to that. Say:
This really something we as (originally) print-designers have been waiting for. Especially the decent tools for text-wrap. Is Mozilla going to do a Blog-post or screencast like this about the vector-outline tool when it's finished? Thanks for taking the time to explain and upload this wonderfull technique.
Gosh, they took down their examples after I made this video. I'll have to create some new demos this spring to better show what's possible with CSS Shapes.
I was trying to recreate the triangular white space example but couldn't seem to figure it out. Can you help me with that, please? I have a black on either side of a paragraph each with mirror image triangles facing each other. I put color in the divs just so I could see what I was doing. I used clippy.com to get the polygon numbers. Here's the codepen: codepen.io/pen/?editors=1100#
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.
Really looking forward from you, for a new amazing content & tutorials for the amazing CSS .
This channel is a treasure! Thanks!
Wow! You just teach hard staff in light and easy way, and i understood your explanation. i am always scared this clip-path and polygon things. but now i know how it works. it is awesome!
Thank you. I love you. So much useful stuff spoken in such a wonderful manner.
Obviously not referring to just this video.
I have learned a lor from your viseos. one of the best content. easy to understand. thanks
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!
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!
Somehow I refer to you as the Bob Ross of CSS
Hahaah! so true!
Very clever tips from the Goddess of Style 🙂🙏
Your videos are amazing. Thanks for all your contributions to the web community!
Nice work and editing!
love your content, professsional, simple, and valuable
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
Yup, that works, too! I teach it less often because getting the image to work with the CORES security limitations can be frustrating. But if you can get the servers to behave, using an image as a mask is a great solution. Especially in a CMS.
Oh wow excellent. I totally forgot all about these things LOL I think the big reason is a lot of the designs for the website have forgotten that they could even do something like this. But you're totally right. It looks Way more fluid and visually interesting.
Great info! Thanks for sharing you're know-how! The polygon shape can be so powerful.
Thanks for the simple and intuitive presentations. This is amazing!
Thank you for posting this video. It's very informative and inspiring. I look forward to experimenting with it.
thanks a lot ma'am... you're my hero in web designing!
how come I havent seen this video before...amazing approach :)
I'm amazed learned so many new stuff
This is awesome stuff! Thank you! Subscribed.
Thank you.
Layout Land you are very welcome
I always learn something from you. So amazing!
Youre videos are amazing! Thank you!
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...! :)
Thank you! I am new to css/html, is there a way to use float in css grid? Thanks again!
This was a good one, thanks for sharing
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.
Thanks a lot you're the best! This is amazing
Love it. Thanks.
I've been eating for this for soooooooo long... 😱
How did they float triangles on both sides in the last picture?
very important Tutorial
Damn. Where have you been? Great content. Thank you.
Very effective tip, thanks !
Please come back!!!
is the firefox extension for the polygon editor available?
Your videos are amazing. You take what would normally be about 50 lines of bootstrap garble and turn it into like 4 lines of CSS lol
I did not understand what she said about the magazine layout (George has rules) and using triangles. Can anyone explain?
Hi
Jen goes in to a bit more detail about the staircase layout in this talk jensimmons.com/presentation/modern-layouts-getting-out-our-ruts (about 22 minutes in), I really recommend watching the whole presentation but you will want to pause it every couple of minutes to try out the things that she's talking about :)
I found these two articles alligator.io/css/shapes-with-shape-outside/ and css-tricks.com/working-with-shapes-in-web-design/ along with bennettfeely.com/clippy useful in creating this test lottiehancock.co.uk/shapes/george.htm feel free to play around with it in Chrome using the CSS Shapes editor extension.
I didn't, either. This is the second one of her videos I've watched, and both left me wishing she'd explain things more. She's an excellent web designer, but in both videos she's talked more about how she thinks this or that is beautiful without explaining the code that was used to make the examples. I prefer tutorial videos that actually explain what the viewer needs to learn in order to recreate the example. I wish her videos were more instructional with less "meta-information".
Thank you for the video. Do you have a book or recommend a good one, about this subject?
Great video! How is the browser interpreting where the edge of the photo is? Is it just looking at white background color?
You can point to a mask with shape-outside, and then the browser uses the alpha channel of that image to find the edge by which to flow the text. The examples in my video, however, are using defined shapes - polygons, circles, etc. And the browser is using the shape that's been defined to be the edge. For example, in the grape-photo demo, the CSS itself has a string of numbers that are a polygon. That defines the edge. In any case, no it never looks at the white background. Even when using an image as a mask, the alpha channel is used, not white.
I understand the polygon (grapes) example, and the alpha channel (as src), but ironically, I'm a bit confused about the simplest example: shape-outside:circle/oval.
What determines the radius of the circle? How do we get a circle/oval nicely spaced around the object rather than too small and cropping in on the photo? Is the radius measured (and set as the min distance) from the center of the image to the edge (whereupon you could add margin if desired)?
Thank you so much for your time. Pardon my density. I'm thrilled to have stumbled onto your videos!
Ah, those are good questions. I didn't go into all the detail. The default, I believe is that it's finding the center point of the image, and creating an oval where the widest points are at the edge of the image margin box which you can change to any other box, content / padding / border). You can also adjust the center point & edge points. There's far more information at developer.mozilla.org/en-US/docs/Web/CSS/shape-outside than in my head at the moment. We'll be fixing that page up soon, too. Making it more useful. You can also read the spec at: drafts.csswg.org/css-shapes/
Perfect. Thank you.
Awesome tutorial
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.
Is there a way we could create those triangles to be responsive. As in as the page becomes smaller so do the triangles thus manipulating the text within them? I've been trying to recreate them to no avail
Yes! If you create a polygon using percent units, instead of fixed sizes (like px or rem) they will resize with their containing block. The containing block (the element that wraps them) has to also be fluid, of course. If it's a fixed width, nothing will squish.
Does this not work with flexbox?
Well, CSS Shapes only works on an element that is floated. And you cannot float a Grid item or Flexbox item. So, no, you wouldn't be able to directly mix Flexbox and Shapes. However, you could create a layout that's using Flexbox, and float a child of a Flex item, and apply a Shape to that. Say:
This really something we as (originally) print-designers have been waiting for. Especially the decent tools for text-wrap. Is Mozilla going to do a Blog-post or screencast like this about the vector-outline tool when it's finished? Thanks for taking the time to explain and upload this wonderfull technique.
Yes, I will be making videos about our Shape Path Editor once it's done. In the meanwhile, you can see a sneak peak at vimeo.com/250359252
Which editor u have used??
Jen Your are awesome ⭐
Thank you !
Uau! Amei. Incrível, de verdade.
great video
Thanks for that , way too cool.
Thanks!
There is no Adobe codepen.io
Gosh, they took down their examples after I made this video. I'll have to create some new demos this spring to better show what's possible with CSS Shapes.
Loved it!!!
HOLAY MOLAYY!! AMAZING!
I was trying to recreate the triangular white space example but couldn't seem to figure it out. Can you help me with that, please? I have a black on either side of a paragraph each with mirror image triangles facing each other. I put color in the divs just so I could see what I was doing. I used clippy.com to get the polygon numbers. Here's the codepen: codepen.io/pen/?editors=1100#
Awesome
thank u mam subscribed
Shape-outside circle property of css isn't working mam please reply i really need this code
Great content overall
:o