CSS GEOMETRY

A Multidimensional Journey

Chapter #1

The Second Dimension

Don't be a square.

The Second Dimension

Basic polygons

Using a single element and clever styling, we can now draw multiple polygons with CSS.

Thanks to the border-radius property, we can even give our polygons some curves.

#square {
    width: 100px; height: 100px;
    background: rgba(255,255,255,.5);
}

#trapezoid {
    width: 140px; height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 100px solid rgba(255,255,255,.5);
}

#triangle {
    width: 0; height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgba(255,255,255,.5);
}
#rounded-square {
    width: 100px; height: 100px;
    background: rgba(255,255,255,.5);
    border-radius: 30px;
}

#oval {
    width: 140px; height: 100px;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
}

#circle {
    width: 100px; height: 100px;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
}

The Second Dimension

Complex polygons

Using CSS pseudo-selectors like ::after and ::before we can create auxiliary shapes and achieve even more complex geometry.

.rhombus::after {
    content: "";
    position: absolute;
}

#rhombus-narrow {
    border: 40px solid transparent;
    border-bottom: 60px solid rgba(255,255,255,.5);
    
    &::after {
        top: 60px; left: -40px;
        border: 40px solid transparent;
        border-top: 60px solid rgba(255,255,255,.5);
    }
}

#rhombus-wide {
    border: 90px solid transparent;
    border-bottom: 60px solid rgba(255,255,255,.5);

    &::after {
        top: 60px; left: -90px;
        border: 90px solid transparent;
        border-top: 60px solid rgba(255,255,255,.5);
    }
}

#hexagon {
    width: 100px; height: 55px;
    background: rgba(255,255,255,.5);
    
    &::before {
        content: "";
        position: absolute;
        top: -25px; left: 0;
        width: 0; height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid rgba(255,255,255,.5);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -25px; left: 0;
        width: 0; height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid rgba(255,255,255,.5);
    }
}

The Second Dimension

Use cases

Modern web applications were heavily influenced by the new possibilities in CSS geometry.

The multitude of shapes we can draw using CSS allows us to keep our image use under control while heavily reducing the number of HTTP requests.

John Doe

John Doe

I have something to say and I'm saying it!

Space Explorer

Galactic Ninja

Teacher's Pet

figure {
    width: 60px;
    
    border: solid 4px turquoise;
    border-radius: 50%;

    overflow: hidden;
}

figure img {
    max-width: 100%;
}

article {
    border-radius: 3px;
}

article i {
    position: absolute;
    display: block;
    top: 23px; left: -9px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent; 
    border-right: 9px solid #343434;
}

#badge-2 > div {
    width: 105px; height: 105px;
    background: #343434;
    border: solid 6px turquoise;
    border-radius: 50%;
}

Chapter #2

The Third Dimension

Initiate Megazord sequence!

The Third Dimension

Basic polyhedra

With the introduction of CSS3, we get a whole new dimension to play with.

Finally able to move and rotate on the X, Y and Z axes, our polygons can now unite to form a polyhedron.

#small-cube {
    width: 200px; height: 200px;
    margin: 25px 70px 0 0;
    transform: rotateY(-60deg) rotateX(-10deg) rotateZ(10deg));
    transform-style: preserve-3d;
    perspective: 3500px;
}

#small-cube > div {
    position: absolute;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    perspective: 3500px;
}

#small-cube > div div {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(255,255,255,.2);
}

#small-cube .top { background: rgba(255,255,255,.1); }
#small-cube .right { background: rgba(255,255,255,.05); }

#small-cube .back { transform: translateZ(-200px); }
#small-cube .bottom { transform: translateY(100px) translateZ(-100px) rotateX(90deg); }
#small-cube .top { transform: translateY(-100px) translateZ(-100px) rotateX(90deg); }
#small-cube .left { transform: translateX(-100px) translateZ(-100px) rotateY(90deg); }
#small-cube .right { transform: translateX(100px) translateZ(-100px) rotateY(-90deg); }

The Third Dimension

Complex polyhedra

Thankfully, we are not limited to drawing cubes.

We can create a polyhedron from any 2D shape. The icosahedron on the right, for example, was created from 20 carefully positioned triangles.

Chapter #3

The Fourth Dimension

Shall we dance?

The Fourth Dimension

Shapeshifting

A polyhedron's faces can be individually positioned and styled.

Animation is allowed for most properties.

@keyframes animateLeft {
    
    to {
        transform: translateX(-100px) translateZ(-100px) rotateY(90deg);
        background: rgba(255,255,255,.2);
    }
}

.left {
    animation: animateLeft 4000ms ease-out infinite alternate;
}

The Fourth Dimension

Through time and space

Complete polyhedra can be rotated and moved around in space. Faces mantain their relative positions to each other.

Opacity and other properties can be animated and will affect descendants as usual.

@keyframes spin {
  
  0% { transform: translateZ(-500px) translateX(-50px) rotateY(0deg) rotateX(-20deg); }

  50% { transform: translateZ(-50px) translateX(50px) rotateY(180deg) rotateX(-20deg); }

  100% { transform: translateZ(-500px) translateX(-50px) rotateY(360deg) rotateX(-20deg); }
}

@keyframes spinOpacity {
    
    0% { opacity: .5; }

    50% { opacity: 1; }

    100% { opacity: .5; }
}

.spin {
    animation: spin 6000ms linear infinite, spinOpacity 6000ms ease-in-out infinite;
}

The Fourth Dimension

Spacetime exploration

So now that we went through the game rules… it's time to play!

Just for today, we'll pretend that Google Chrome is the only browser in the world.

We'll also add a cool tune. Using a song with fixed BPM is a great way to give the animation some rhythm and keep things in sync.

Experiment goals

  • Explore CSS geometry
  • Create interesting visuals
  • Acquire fun
Launch experiment

Questions?

Now is a great time to ask them.

Thank you :)

Credit where credit is due

Presentation framework is reveal.js with a modified meny.js menu, both by the wonderful Hakim El Hattab. X-wing Starfighter based on a model from Tridiv. Music is Hate or Glory by Gesaffelstein and it's powered by the Soundcloud API. Webfont is Roboto and it's served by Google Fonts. Background picture from NASA Image of the Day Gallery, captured by NASA astronaut Reid Wiseman and featuring the view from the ISS on Sept. 28 2014. Interstellar was pretty cool and may have subconsciously influenced this presentation.

No polygons were harmed in the making of this presentation. However, some reported feeling a bit dizzy.