Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Shapes & Friends (LRUG)

F2de4c4ac96affef15366d36ffd0f0d4?s=47 nicky
July 09, 2018

CSS Shapes & Friends (LRUG)

I presented this talk at LRUG on 9th July 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 - still with added clip-path excitement, and now with some extra exciting more ideas for improving layout, design and type on the web at the end, based on a great question from the Nottingham audience.

Here's a link to the PDF with speaker notes: https://www.dropbox.com/s/fhcs8sqs2015c9p/CSS%20Shapes%20%26%20Friends%20LRUG%20-%20with%20speaker%20notes.pdf?dl=0

F2de4c4ac96affef15366d36ffd0f0d4?s=128

nicky

July 09, 2018
Tweet

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. .jpg

  20. .js

  21. None
  22. None
  23. CSS Shapes

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

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

  26. shape-outside: circle()

  27. shape-outside: circle()

  28. .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
  29. .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
  30. With shape-outside support: Without shape-outside support:

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

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

    <div class=“content”> <h1>We’re Berlin!</h1> ... </div>
  33. .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
  34. https://codepen.io/knotnicky/pen/LerqKe shape-outside: polygon() c b a shape-outside: polygon(0 -40px, //a

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

  36. shape-outside: polygon()

  37. 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
  38. 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 …
  39. RUNNING HEADER https://vimeo.com/250359252

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

  41. shape-outside: url()

  42. shape-outside: url()

  43. shape-outside: url()

  44. 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()
  45. https://caniuse.com/#search=shapes

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

  47. CSS Clipping

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

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

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

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

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

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

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

  57. Finally

  58. # min It’s not all or nothing

  59. None
  60. With clip-path support: Without clip-path support:

  61. None
  62. Without margin: With margin:

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

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

  65. # min Remember inclusive design

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

  67. # min Use it or lose it

  68. None
  69. # min Ideas for more CSS Grid initial-letter writing modes

    Interactive & animated clip paths
  70. Image © Harpers Bazaar What will you make? Share your

    shapes
  71. 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 Icons by nounproject, alfredocreates.com
  72. None