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

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
21. .jpg
22. .js
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=“…”>
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
65. Without clip-path support: With clip-path support:
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
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