CSS Shapes & Exclusions

CSS Shapes & Exclusions

Transforming the Shapes with Eva Ferreira

117

Web pages are visually and technically a pile of boxes. By default, all those boxes are rectangles and squares. But they don't have to be any longer. With CSS we can now transform those rectangles into parallelograms, rhombuses, skewed boxes, circles, and elephants — or any shape we want. Eva Ferreira joins Jen Simmons to talk about what's possible and how to do it.

Thanks to An Event Apart. Use discount code AEAAHEAD for $100 off any two- or three-day event in 2016. Thanks to Squarespace. Use JENSENTME to get 10% off your first purchase. Thank you to Audible. Visit audible.com/webahead to get a free 30-day trial membership and a free audiobook. And thank you to Casper. Use code WEBAHEAD for $50 towards any mattress purchase.

List of Contents: 
  • transforms
  • rotation
  • scaling
  • skewing
  • perspective
  • translation
  • clip-path
  • shape-outside
  • how CSS is born
  • Duration: 
    4 170

    Predicting the future with Rachel Andrew, Eric Meyer, and Jeffrey Zeldman

    115

    The landscape of what's possible in web page layout is changing. Jen has a theory that this change will be a big one — perhaps the biggest change to graphic design on the web in over 15 years. Rachel, Jeffrey, and Eric join her to debate if that's true or not, and to surmise what the future might bring. This special episode was recorded live at An Event Apart Nashville.

    Thanks to ImageEngine for supporting the show. Check out their free service at scientiamobile.com/webahead. And thank you An Event Apart. Use discount code AEAAHEAD for $100 off any two- or three-day event in 2016. And thank you to Casper. Use code WEBAHEAD for $50 towards any mattress purchase.

    You can't layout blobs.

    Duration: 
    4 897

    Laying Out the Future with Rachel Andrew

    114

    Everything about web page layout is changing. New CSS specifications will make it possible to do designs we've never seen before. Rachel Andrew joins Jen Simmons to talk about what's happening.

    Thank you An Event Apart for sponsoring the show! Use discount code AEAAHEAD for $100 off any two- or three-day event in 2016. And thanks to Squarespace. Use JENSENTME to get 10% off your first purchase.

    List of Contents: 
  • The radical change that's coming to layout on the web
  • Grid, Flexbox, Alignment, Multicolumn, and more
  • What we've had to do for the last 15 years because we have not had proper tools for doing layout in CSS
  • Why we started using 960 Grid, Bootstrap, Foundation and other such layout frameworks
  • What can Grid do that floats cannot do
  • How is Grid different than Bootstrap
  • What's the difference between Grid and Flexbox? Why do we have two specs for layout?
  • How can we learn all these things?
  • Duration: 
    6 444

    Changing the Shapes with Sara Soueidan

    81

    So far, page layout on the web has predominantly consisted of a lot of boxes stacked on top of boxes — rectangular columns everywhere. That's about to change. New specifications, including CSS Shapes and CSS Exclusions, are about to change the shape of the “page.” Sara Soueidan joins Jen Simmons to explain.

    Thanks to MailChimp for sponsoring today's show. Head over to mailchimp.com/5by5 to learn about easy email newsletters. Send 12,000 emails per month to 2,000 subscribers for free, forever.

    We're not duplicating print design on the web. This is not the goal. But we will be able to use some features that we’ve always loved to have. It brings your designs to the next level.

    List of Contents: 
  • Creating non-rectangular layouts
  • The CSS Shapes Level 1 specification
  • How to contribute to everyone's learning and become an internet superstar along the way
  • The CSS Exclusions specification
  • The CSS Figures specification
  • What's newly possible in page layout?
  • The debate around CSS Regions
  • Alternatives to Regions
  • The CSS Fragmentation specification
  • The CSS Shapes Level 2 specification with SVG paths
  • Duration: 
    4 125
    Subscribe to RSS - CSS Shapes & Exclusions