CSS & SVG in 2019
Lea Verou @leaverou
&
Chris Lilley @svgeesus

SVG Basics

CSS Variables

Clipping

▼ 0 0, 50% 100%, 100% 0 ▲ 0 100%, 50% 0, 100% 100%

  • clip-path makes clipping to arbitrary shapes a piece of cake!
  • It supports any basic shape, as well as SVG-based clip paths
  • polygon() is especially useful, because it can use any CSS length, even calc and can be animated!
  • 0% 0% is the top left corner and 100% 100% the bottom right one.
Kitten resting
😳
Does this look like a speech bubble?

Blending & Filters

Filters
  • We apply filters with the filter property.
  • There are many useful filters, such as grayscale(), saturate(), hue-rotate(), blur(), drop-shadow() for shadows that actually follow the shape of the element and take transparency into account, and many others.
  • You can chain multiple filters and they are applied in order.
  • You can also link to SVG filters which are much more powerful, but also harder to define.

Web Fonts in 2019

Flexbox

  • display: flex enables Flexbox layout on an element. This element becomes the Flex Container and its children are called Flex Items.
  • flex: N defines the proportion that a flex item spreads over.
  • flex-direction: column on the flex container makes the items flow from top to bottom
  • align-items and justify-content on the flex container specify alignment in each direction. Which direction depends on the value of flex-direction
    • A
    B
    C
    D
    E
    F

    Grid Layout

    Grid Layout
    • display: grid enables Grid layout on an element. This element becomes the Grid Container and its children are called Grid Items.
    • display: grid doesn’t do much on its own, you also have to define the Grid template. There is a number of properties to do that, such as:
      • grid-template-rows
      • grid-template-columns
      • grid-template
      • …and many more
    • The 1fr unit allows us to distribute the available space in fractions without having to do any math with percentages.
    • The grid-gap property allows us to set spacing between the grid cells.
    • The grid-row and grid-column properties allow us to place items on specific rows and/or columns. Note that multiple items can be placed in the same cell, and then they will overlap!
    • grid-template-areas allows you to define named areas in your grid.
    • grid-area allows you to assign an element to a named area.
    • You can use the browser developer tools to inspect your grid.