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

CSS Shapes: upgrade your page layouts - FEL

nicky
January 25, 2018

CSS Shapes: upgrade your page layouts - FEL

Grids are great, but we can do better. Progressively enhance your layout and break out of the grid.

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

nicky

January 25, 2018
Tweet

More Decks by nicky

Other Decks in Technology

Transcript

  1. CSS Shapes: upgrade
    your page layouts
    Progressively enhance your layout
    @knotnicky
    and break out of your grids!
    Grids are great, but we can do more…

    View full-size slide

  2. CSS Shapes: upgrade
    your page layouts
    Progressively enhance your layout
    @knotnicky
    and break out of your grids!
    Grids are great, but we can do more…

    View full-size slide

  3. Why are grids so
    great, anyway?

    View full-size slide

  4. http://www.graphics.com/article-old/brief-history-grids
    14th century manuscript

    View full-size slide

  5. 16th century Bible
    http://www.graphics.com/article-old/brief-history-grids

    View full-size slide

  6. Josef Müller-Brockmann’s Grid Systems in Graphic Design
    http://www.graphics.com/article-old/brief-history-grids

    View full-size slide

  7. Massimo Vignelli’s Unigrid
    https://www.flickr.com/photos/20745656@N00/3022709268/

    View full-size slide

  8. https://twitter.com/jongold/status/694591217523363840

    View full-size slide

  9. https://twitter.com/jongold/status/694591217523363840

    View full-size slide

  10. http://www.novolume.co.uk/blog/all-websites-look-the-same/

    View full-size slide

  11. http://www.novolume.co.uk/blog/all-websites-look-the-same/

    View full-size slide

  12. “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
    http://alistapart.com/event/web-typography-layout-past-present-future

    View full-size slide

  13. “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
    http://alistapart.com/event/web-typography-layout-past-present-future

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. shape-outside: circle()

    View full-size slide

  17. shape-outside: circle()

    View full-size slide

  18. https://codepen.io/knotnicky/pen/Lerqgz
    .circle {
    float: left;
    width: 120px;
    height: 120px;
    background-color: #FD5605;
    border-radius: 50%;
    }


    We’re Berlin!
    ...

    View full-size slide

  19. https://codepen.io/knotnicky/pen/Lerqgz
    .circle {
    float: left;
    width: 120px;
    height: 120px;
    background-color: #FD5605;
    border-radius: 50%;
    shape-outside: circle();
    }


    We’re Berlin!
    ...

    View full-size slide

  20. With
    shape-outside support:
    Without
    shape-outside support:

    View full-size slide

  21. shape-outside: polygon()

    View full-size slide

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

    View full-size slide

  23. shape-outside: polygon(0px -40px, //a
    0px 180px, //b
    220px 180px); //c
    a
    b
    c
    https://codepen.io/knotnicky/pen/LerqKe
    shape-outside: polygon()

    View full-size slide

  24. .triangle {
    border-style: ...
    border-color: ...
    }


    We’re Berlin!
    ...

    View full-size slide

  25. .triangle {
    border-style: ...
    border-color: ...
    shape-outside: polygon(...);
    }


    We’re Berlin!
    ...

    View full-size slide

  26. With
    shape-outside support:
    Without
    shape-outside support:

    View full-size slide

  27. shape-outside: polygon()

    View full-size slide

  28. //polygon(a, b, c, d);
    shape-outside: polygon(0px 0px, 288px
    0px, 466px 240px, 0px 240px);
    https://codepen.io/knotnicky/pen/VyEwJG
    shape-outside: polygon()
    a
    d
    b
    c

    View full-size slide

  29. shape-outside: polygon()

    View full-size slide

  30. //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 …
    https://codepen.io/knotnicky/pen/xpQygm
    shape-outside: polygon()

    View full-size slide

  31. https://vimeo.com/250359252

    View full-size slide

  32. shape-outside: url()

    View full-size slide

  33. shape-outside: url()

    View full-size slide

  34. https://codepen.io/knotnicky/pen/xpJZvb
    img {
    shape-outside: url(image.png);
    shape-image—threshold: 0.5;
    shape-margin: 16px;
    }

    In an age of…

    View full-size slide

  35. shape-inside: WIP
    https://drafts.csswg.org/css-shapes-2/
    shape-inside

    View full-size slide

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

    View full-size slide

  37. Things to
    remember

    View full-size slide

  38. Firefox Nightly has the CSS Shapes editor in
    dev tools, coming to Firefox soon

    View full-size slide

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

    View full-size slide

  40. https://stuffandnonsense.co.uk/help

    View full-size slide

  41. what will you make?
    share your shapes

    View full-size slide

  42. Thanks
    • twitter.com/knotnicky - share your shapes!
    • More ideas: http://labs.jensimmons.com/
    • Firefox nightly tools: https://vimeo.com/250359252
    • Icons by nounproject, AlfredoCreates.com

    View full-size slide