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

CSS Shapes & Friends (LRUG)

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

nicky

July 09, 2018
Tweet

More Decks by nicky

Other Decks in Technology

Transcript

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

    shapes & clip-path • Gotchas & things to remember
  2. “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
  3. “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
  4. .js

  5. .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
  6. .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
  7. .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
  8. 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 …
  9. 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()
  10. img { clip-path: url(#svgPath); } <img src=“paint.jpg”> <svg …> <clipPath

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

    <clipPath id="svgPath"> <circle … /> <circle … /> … https://codepen.io/knotnicky/full/WJZaQd
  12. 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