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

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?
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
19. .jpg
20. .js
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=“…”>
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
60. With clip-path support: Without clip-path support:
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
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