$30 off During Our Annual Pro Sale. View Details »

CSS Shapes & Friends - Design Exchange

CSS Shapes & Friends - Design Exchange

I presented this talk at Design Exchange in Nottingham on 9th May 2018.

---

Grids are great, but we can do better. Progressively enhance your layout and break out of the grid with CSS Shapes and clip-path.

---

This is the longer version of the previous CSS Shapes talk - now with added clip-path excitement!

Here's a link to the PDF with speaker notes: http://symphonicknot.com/css-typography/css-shapes-and-friends-with-speaker-notes.pdf

nicky

May 09, 2018
Tweet

More Decks by nicky

Other Decks in Technology

Transcript

  1. CSS Shapes & Friends Upgrade your page layouts Nicky Thompson

  2. CSS Shapes & Friends Upgrade your page layouts Nicky Thompson

  3. • Web design is getting boring • Practical tips -

    shapes & clip-path • Gotchas & things to remember
  4. Why are grids so great, anyway?

  5. None
  6. None
  7. Image © National Library of Medicine

  8. Image © http://olympiagraphics.com/book-review-grid-systems-raster-systeme/

  9. Image © https://twitter.com/vignellicenter/status/768922129911914496

  10. Image © National Park Service

  11. Image © @jongold

  12. Image © @jongold

  13. Image © http://www.novolume.co.uk/blog/all-websites-look-the-same/

  14. Image © http://www.novolume.co.uk/blog/all-websites-look-the-same/

  15. “There’s a way in which we can use graphic design

    unlike we’ve ever seen on the web before—the power of the entire 20th century brought to the web” Jen Simmons, speaking at A List Apart in Dec 2017 Image © jensimmons.com
  16. “We’re copying each other’s work too much. Too many things

    look like Medium; too many things look like web design out of 2007. Too many things look like copies of each other. Everybody’s bored.” Jen Simmons, speaking at A List Apart in Dec 2017 Image © jensimmons.com
  17. None
  18. None
  19. None
  20. None
  21. .jpg

  22. .js

  23. None
  24. None
  25. CSS Shapes

  26. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes shape-outside: circle() polygon() url() inset() ellipse() shape-outside

  27. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes shape-outside shape-outside: circle() polygon() url() inset() ellipse()

  28. shape-outside: circle()

  29. shape-outside: circle()

  30. .circle { float: left; width: 120px; height: 120px; background-color: #FD5605;

    border-radius: 50%; } <div class="circle"></div> <div class=“content”> <h1>We’re Berlin!</h1> ... </div> https://codepen.io/knotnicky/pen/Lerqgz
  31. .circle { float: left; width: 120px; height: 120px; background-color: #FD5605;

    border-radius: 50%; shape-outside: circle(); } <div class="circle"></div> <div class=“content”> <h1>We’re Berlin!</h1> ... </div> https://codepen.io/knotnicky/pen/Lerqgz
  32. With shape-outside support: Without shape-outside support:

  33. https://codepen.io/knotnicky/pen/LerqKe shape-outside: polygon()

  34. https://codepen.io/knotnicky/pen/Lerqgz .triangle { border-style: ... border-color: ... } <div class=“triangle"></div>

    <div class=“content”> <h1>We’re Berlin!</h1> ... </div>
  35. .triangle { border-style: ... border-color: ... shape-outside: polygon(...); } <div

    class=“triangle"></div> <div class=“content”> <h1>We’re Berlin!</h1> ... </div> https://codepen.io/knotnicky/pen/Lerqgz
  36. https://codepen.io/knotnicky/pen/LerqKe shape-outside: polygon() c b a shape-outside: polygon(0 -40px, //a

    0 180px, //b 220px 180px) //c
  37. With shape-outside support: Without shape-outside support:

  38. shape-outside: polygon()

  39. https://codepen.io/knotnicky/pen/VyEwJG shape-outside: polygon() a d b c shape-outside: polygon(0 0,

    //a 288px 0, //b 466px 240px, //c 0 240px); //d
  40. shape-outside: polygon() PNG: https://codepen.io/knotnicky/pen/xpQygm & SVG: https://codepen.io/knotnicky/full/ELmKyZ/ //polygon(a, b, ...);

    shape-outside: polygon(17px 11px, 82px 42px, 133px 6px, 150px 62px, 157px 100px, 208px 125px, 244px 164px, 251px 200px, 247px 260px, 284px 263px, 325px …
  41. RUNNING HEADER https://vimeo.com/250359252

  42. https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp

  43. shape-outside: url()

  44. shape-outside: url()

  45. shape-outside: url()

  46. img { shape-outside: url(image.png); shape-image—threshold: 0.5; } <img src="image.png" />

    <p>In an age of…</p> PNG: https://codepen.io/knotnicky/full/xpJZvb/ & SVG: https://codepen.io/knotnicky/full/QrvNgW/ shape-outside: url()
  47. https://drafts.csswg.org/css-shapes-2/#propdef-shape-inside shape-inside: WIP

  48. http://superhumanclass.blogspot.co.uk/2010/03/idea-old-mazda-lamp-50-100-150-w-by.html shape-inside: WIP

  49. https://caniuse.com/#search=shapes

  50. https://twitter.com/jensimmons/status/565551927879270400

  51. CSS Clipping

  52. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path clip-path clip-path: circle() polygon() url() inset() ellipse()

  53. https://codepen.io/knotnicky/full/mLRXzb img { clip-path: polygon(25% 0, 100% 0, 75% 50%,

    100% 100%, 25% 100%, 0 50%) } <img src=“…”>
  54. None
  55. None
  56. clip-path: polygon(…)

  57. With clip-path support: Without clip-path support:

  58. img { clip-path: url(#svgPath); } <img src=“paint.jpg”> <svg …> <clipPath

    id="svgPath"> <text>Paint</text> … https://codepen.io/knotnicky/full/xjrYPg
  59. img { clip-path: url(#svgPath); } <img src=“paint.jpg”> <h1>Paint</h1> <svg …>

    <clipPath id="svgPath"> <circle … /> <circle … /> … https://codepen.io/knotnicky/full/WJZaQd
  60. https://caniuse.com/#search=clip-path

  61. It’s not all or nothing

  62. caniuse.com

  63. caniuse.com

  64. None
  65. Without clip-path support: With clip-path support:

  66. None
  67. Without margin: With margin:

  68. Without clip-path support, with margin: With clip-path support, with reset

    margins, both inside @supports:
  69. https://twitter.com/jensimmons/status/565551927879270400

  70. https://stuffandnonsense.co.uk/about

  71. None
  72. Image © Harpers Bazaar What will you make? Share your

    shapes
  73. Thank you @knotnicky - share your shapes @jensimmons, @rachelandrew &

    @SaraSoueidan - follow for CSS layout goodness More ideas: http://labs.jensimmons.com/ & CSS Layout News Layout Land - series of YouTube videos on CSS layout Interactive & animated clip paths: https://css-tricks.com/using-css-clip-path-create-interactive-effects/ Firefox Nightly tools: https://vimeo.com/250359252 Icons by nounproject, alfredocreates.com
  74. None