What is CSS?

And what can it do?

CSS stands for Cascading Style Sheets and they're responsible for adding colour, format and fonts to our webpages, and so much more.

They're more capable than some people might think.

We're going to push the boundaries beyound typical uses of CSS and stretch its legs a bit by exploring:

• Fast and fluid animations
• What's possible in a single element?
• What are the practical uses of these techniques?

There's too much cool stuff to cover in a short talk, but hopefully this will whet your appetite!

Practical uses

Some inspiration

Here we have 4 loading spinners which you might recognise from the Internet.

Each of these were created with pure CSS.

The first 3 with a single element each.

.circle-loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-top: 10px solid rgba(255, 255, 255, 0.2);
  border-right: 10px solid rgba(255, 255, 255, 0.2);
  border-bottom: 10px solid rgba(255, 255, 255, 0.2);
  border-left: 10px solid rgba(255, 255, 255, 1);
  transform: translateZ(0);
  animation: circle-loader-spin 1s infinite linear;
}

@keyframes circle-loader-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
          

Using simple, every day CSS primitives, we are able to create more complex shapes by tweaking parameters.

Animating DOM elements with CSS should provide a smoother, more fluid animation than with JavaScript.

Pseudo Elements

Secret weapon for single element CSS

The ::before and ::after pseudo elements give us 2 extra canvases to work with as well as the main element:

.gift {
  /* Box styles */

  &::before {
    /* Top ribbon styles */
  }

  &::after {
    /* Other top ribbon styles
  }
}

There are special rules governing what can and can't be done with pseudo elements. This can be quite restrictive and adds to the challenge!

PROTIP: Use a CSS pre-processor like LESS or SASS to save writing heaps of repetitive code. More on that in a minute.

Gradients

Lots and lots of gradients...

This Wall-E is a single div. Animations and all.

<div class="wall-e"></div>

The secret, alongside pseudo elements, is extensive use of linear and radial gradients to produce shapes you see.

// Main body background
linear-gradient(
  to bottom,
  transparent 0px,
  $c-electronics 0px, $c-electronics 20px,
  darken($c-body-edge, 40%) 20px, $c-body-edge 31px,
  $c-body-edge 31px, darken($c-body-edge, 20%) 57px,
  $c-sump 57px, darken($c-sump, 5%) 62px,
  transparent 62px
),

How to get started?

If you're asking this question, great!

First things first, you need:

• Time. Lots and lots of time...
• Patience. Like you would not believe.
• Inspiration.
• A real-time editor.
• A CSS Pre-processor.

Or, you know, use SVG? Nah, where's the fun in that!

It's important to remember that using CSS to create these sorts of animations is a great learning exercise.

The things you learn while trying to work out how to make a box look like a scarf is remarkable.

Start small

One drop at a time.

Simple is often better:

1. Take a basic shape, a box.
2. Round the corners to create a circle.
3. Animate it with a bezier curve and diminishing width and height.
4. Use a squashed circle with a border for the splashes
5. Attach one to each pseudo element and animate them.

For this one simple animation, you'll learn a whole bunch about some useful CSS features that you can use when building user interfaces and other features on your websites and applications.

Cheers!

Oh and by the way: No JavaScript here!

This presentation was created with just HTML and CSS. No JavaScript.

Presentation source available on GitHub: github.com/pbutcher/nwt-css-abuse-talk

Pure CSS Slideshow available on CodePen: codepen.io/pbutcher/pen/yLLKbNo

I'll happily take questions.