Comments on CSS Shapes 101

55 Reader Comments

Back to the Article
  1. Loved the article Sara, really interested in where shapes is going. Definitely inspired to do some experimentation!

    Copy & paste the code below to embed this comment.
  2. Good article ;)

    Copy & paste the code below to embed this comment.
  3. Great article Sara. Love the idea of using CSS shapes. Can’t wait to experiment!

    Copy & paste the code below to embed this comment.
  4. Great article! Thanks for it. :)

    Copy & paste the code below to embed this comment.
  5. Sara mentions that there is no current support for text-fitting internally to a shape. In the mean time, I’ve actually just written an internal circular text-fitting algorithm for SVG.

    It can be modified to work for any shape without too much effort. It’s not extracted yet and it scales at O(n^2) but it’s on my list to improve.

    I mostly mention it in case people want to help me improve it. :)

    Copy & paste the code below to embed this comment.
  6. Thank you. I cannot wait for the different versions of IE to support this css to use it in my designs :-)

    Copy & paste the code below to embed this comment.
  7. We hope that everything will be fine and dandy on Crapdroid tablets, then off we go!

    Copy & paste the code below to embed this comment.
  8. Imagine when we get iOS support for this! Sweet layouts for hybrid apps :D

    Copy & paste the code below to embed this comment.
  9. Do transforms have any effect on text flow around a shape?  aka if you rotate(90deg), does the text stay in the same place?

    Copy & paste the code below to embed this comment.
  10. I always thought CSS shapes were too confusing and therefore not going to be successful but your example with the leaf and using an image as a shape is convincing this is the future of web design. Awesome article!

    Copy & paste the code below to embed this comment.
  11. This looks incredibly powerful, but as with all new features, I fear abuse. I fear the day polygonal, animated ads actually roll through an article as I read it…

    Either way, this looks badass and I’m looking forward to playing with and digging through the code of amazing new interfaces using shapes :)

    Copy & paste the code below to embed this comment.
  12. Very nice and usefull article. Thanks!

    Copy & paste the code below to embed this comment.
  13. Wow, this is really cool. I am going to to do some tinkering with this! Thanks for such an awesome article!

    Copy & paste the code below to embed this comment.
  14. Really nice article, cheers!

    Copy & paste the code below to embed this comment.
  15. What a game changer! Can’t wait for this and flexbox to be compatible for all browsers. Man!

    Copy & paste the code below to embed this comment.
  16. This article is a stimulus to imagination. The examples and explanations are really clear and brilliantly exposed.
    Thank you so much, Sara!

    Copy & paste the code below to embed this comment.
  17. Oh god, think of the amazing designs that can be achieved with this, holy crap.
    Thanks for the superb article Sara!

    Copy & paste the code below to embed this comment.
  18. Nice.

    However, in the wrong hands this will lead to some horrible websites.

    I can see a place for this too, circular wristwatches.

    Copy & paste the code below to embed this comment.
  19. Finally, the second of my two 2007 fantasy CSS features is a reality: http://blog.easy-designs.net/archives/wouldnt-it-be-nice/

    Copy & paste the code below to embed this comment.
  20. Looks awesome! I’m sold.

    Copy & paste the code below to embed this comment.
  21. Awesome, I’ve been waiting for something similar for years.

    Can text flow around both sides of an object?  I didn’t see an example of that.

    Copy & paste the code below to embed this comment.
  22. Just added this to a site I’m working on with lots of circular images. I realize 0.001% of users will see the text wrapping today, but it makes me happy for just 2 lines. No need for fall backs or (hopefully) future maintenance.

    Copy & paste the code below to embed this comment.
  23. Really great article. I learned a lot! Thanks!

    Copy & paste the code below to embed this comment.
  24. CSS shapes are awesome and all that, but when is CSS going to make it easy to center text and other things vertically? Do the authors of CSS design sites? Do they hear all the wailing and gnashing of beginner designers? I wonder.

    Copy & paste the code below to embed this comment.
  25. This is great! For me these are completely new features of CSS and I need some time to learn all about this. Thank you for sharing.

    Copy & paste the code below to embed this comment.
  26. Great in depth article Sara, It is a very interesting time for shapes, some amazing looking sites should be appearing soon!

    Copy & paste the code below to embed this comment.
  27. Great and very helpful article, thx for sharing this.

    Copy & paste the code below to embed this comment.
  28. Great article! I really inspire about your work. You have good knowledge of CSS design. My professional background also designing, like logo design for business and brand from our online network 10alogo. Your article very helpful for me. Thanks a lot Sara.

    Copy & paste the code below to embed this comment.
  29. Neat stuff! Interested to see where it goes.

    Copy & paste the code below to embed this comment.
  30. You might ask, “Why not use border-radius to round the image?” The answer is that the border-radius property has no effect on the flow of the content inside or around the element it’s applied to

    This is not entirely accurate. You can use the new box model values (margin-box, border-box, padding-box etc) for shape-inside/outside to make it follow the curvature of the respective box. Demo: http://dabblet.com/gist/11558395

    Also, (some of?) your demos don’t work on newer Chrome because you’re using the older syntax for the shape parameters (even though the code here uses the newer syntax).

    Copy & paste the code below to embed this comment.
  31. I think I may not be getting your point exactly because it seems that what you’re saying does not negate what I said at all.

    I see what you mean upon re-reading it, however the article seems to imply that without the circle() function, border-radius does not affect flow at all, whereas you can make it do so by using the box model values (which is preferable when possible, as it eliminates duplication). Also, by using the margin-box value you avoid having to encode the margin in the shape-margin property, making the whole thing degrade more gracefully.
    So, to sum up, yes, there is technically nothing incorrect there, but that particular example would be better for demonstrating box model values, as using circle() is not ideal there. Same goes for the inset() example, using margin-box greatly simplifies the code (and makes it more DRY). Using shape functions there makes the author/reader wonder “Couldn’t there be a simpler way to just make the flow follow the element’s existing shape, that I defined through border-radius?” when in fact, there is (and it was added to the spec exactly to simplify such use cases!).

    The syntax is there for stable Chrome, which currently still supports the old syntax because the new syntax hasn’t been shipped yet afaik.

    I don’t understand why you wouldn’t use both, like so:

    shape-outside: circle(50%, 50%, 50%);
    shape-outside: circle(50% at 50% 50%);

     

    Copy & paste the code below to embed this comment.
  32. I guess I should have added that the box model values can be used as values without needing to specify a shape function, but this would only be true if the border-radius property is used because it creates a circular shape without having to redefine it using a shape function. But, again, that would only be true in case border-radius is used as in my example here.

    Yup, and that in those cases it’s actually better to not use a shape function, as this way you are duplicating values (e.g. border radii). Also, since both the circle() and the inset() example don’t really need shape functions (since both use border-radius for the curvature), one is left wondering whether these functions are useful at all. So, an example that can’t be simplified with box model keywords would be preferable for demonstrating those. It doesn’t seem easy to come up with one though!

    The code on my website does use the old and new syntax the way you mentioned!

    I was talking about the codepens :)

    Copy & paste the code below to embed this comment.
  33. You might enjoy some samples in this eclectic mix of eye-candy:
    https://code.google.com/p/css3-graphics/

    Copy & paste the code below to embed this comment.
  34. Fantastic article! Really useful stuff here.

    Copy & paste the code below to embed this comment.
  35. Very useful article. Simple explanations are very helpful. Thank you.
    I’ll share these with my friends which works on eBlix Technologies.

    Copy & paste the code below to embed this comment.
  36. Great article Sara. We’ll surely do some experiments soon!

    Copy & paste the code below to embed this comment.
  37. Sorry if this was covered. I haven’t been through all the comments. I just tried this in Chrome Canary (JUST downloaded now for this) and I had an issue with the circle demo. Your codepen didn’t produce the pictured results. It showed the square edge of the circular image. When I played with it, this was what I used to get it to work:

    .shape{
      background-color: purple;
      float: left;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin: 10px;

      shape-outside: circle();
    }

    shape-margin didn’t work, but regular margin did. Was this a recent change?

    Copy & paste the code below to embed this comment.
  38. Awesome article! I’m going to have to and try and experiment with it.

    Copy & paste the code below to embed this comment.
  39. fantastic. thank you for shedding light on this topic as i’ve always been curious about css shapes! keep up the great work sara :)

    Copy & paste the code below to embed this comment.
  40. The last, blockquote example can be done today, with CSS 2.1, if I’m not mistaken.

    http://jsfiddle.net/ZUZ3L/ZuAg2/

    Or am I missing something?

    Copy & paste the code below to embed this comment.
  41. Creating an arrow with css

    http://mohammad-sabbagh.com/css-shapes-create-arrow/

    Copy & paste the code below to embed this comment.
  42. @Kenneth Brøgger-Luplau

    Maybe that exact blockquote example isn’t the best to illustrate CSS Exclusions. Imagine the quote wrapping content from two adjacent columns and that would be a clearer use case.

    Your jsfiddle example is good, but it requires positioning of the floated element in the DOM, between two other paragraphs. A floated element will align to with the top edge of the element it is floated against. With CSS Shapes it’s possible to get that effect without the explicit DOM position - it’s a case for using `inset()`.

    Copy & paste the code below to embed this comment.
  43. Inspiring.
    I’ve never heard “shape-outside” before, but the browser support is depressing. See: http://caniuse.com/#search=shape-outsi

    Copy & paste the code below to embed this comment.
  44. Very detailed breakdown and explanation of the present and future of shapes with text and images. The examples have opened my mind to new approaches to how I present data within my projects. Thanks for taking the time to share this valuable info.

    Copy & paste the code below to embed this comment.
  45. Fantastic article Sara. Totally implies that CSS Shapes are going to shape the future web. :)

    Copy & paste the code below to embed this comment.
  46. More css shapes:-

    http://findnerd.com/list/view/Create-shapes-using-css/1311/

    Copy & paste the code below to embed this comment.
  47. Nice article Sara, CSS Shapes are just something so helpful and beautiful in the browser. Now is time for some experiments.

    Copy & paste the code below to embed this comment.
  48. Great article - lots of potential with shapes.  One thing I disagree with though is suggesting people use Brackets…on a Mac it’s crap - always crashing.  Gave up on it last year.

    Copy & paste the code below to embed this comment.
  49. Spectacular read. Very insightful and full of actionable items. One thing to always keep in mind - “responsive” and “mobile friendly” are not the same thing. This is why Google created the mobile friendly testing tool. SEO received a big shakeup when the search results changed due to mobile.

    At the end of the day, design should never be taken lightly. This is an excellent explanation.

    Copy & paste the code below to embed this comment.
  50. Sorry, commenting is closed on this article.