Skip to main content

ALL DAY LONG part 4: CSS

· 4 min read

This post covers the CSS used to style the animation.

ALL DAY LONG (7 part series)
  1. Introduction
  2. Concept
  3. Images
  4. HTML
  5. CSS
  6. JS
  7. Conclusion

Details​

The CSS defines the layout of the animation and establishes the 3D space in which the ribbon fragments exist.

Simple reset

A small reset ensures consistent sizing and spacing. Pseudo-elements are included because they are used to render the back face of each fragment.

style.css
*,*::before,*::after {  margin: 0;  padding: 0;  box-sizing: border-box;}

Background color

The animation's background color is set in the html element.

style.css
html {  background-color: #3b7cf3;}

.wrapper element

It has the viewport's height, so it can center the .container element.

style.css
.wrapper {  min-height: 100dvh;  display: grid;  place-content: center;}

.container element

The container is rotated along the X, Y, and Z axes so the ribbon can be perceived in three dimensions. Without this tilt, the animation would appear flat.

style.css
.container {  transform-style: preserve-3d;  position: relative;  /* width, height, and transform are applied by the script */}

.fragment-wrapper element

It receives the animation, as it will be explained in the next post. It also sets that its children (.fragment) are positioned in the 3D space.

style.css
.fragment-wrapper {  position: absolute;  transform-style: preserve-3d;  /* width, and height are applied by the script */  /* animation (and its duration, delay, and iterations) is also applied by the script */}

.fragment elements

They receive their own background position for the front.png image. By adjusting the background-position, every fragment shows a different vertical section of the image, creating the illusion of a continuous ribbon. Their backface is hidden so it does not appear when flipped. It also sets that its children (.fragment::after) are positioned in the 3D space.

style.css
.fragment {  position: absolute;  transform-style: preserve-3d;  background-image: url("/img/all-day-long/front.png");  background-size: 100% auto;  backface-visibility: hidden;  /* width, height, transform, and background position are applied by the script */}

.fragment::after pseudo-elements

The ::after pseudo-element renders the back face of the ribbon. Instead of creating another DOM element, the pseudo-element duplicates the fragment's dimensions and background positioning. The only major differences are:

  • a different background image (back.png)
  • a rotateY(180deg) transform so it faces the opposite direction
style.css
.fragment::after {  content: "";  position: absolute;  top: 0;  left: 0;  transform: rotateY(180deg);  background-image: url("/img/all-day-long/back.png");  /* these properties are inherited from `.fragment` */  width: inherit;  height: inherit;  background-position-y: inherit;  background-size: inherit;  backface-visibility: inherit;}

Result​

In this post I defined the CSS rules that create the 3D space and visual appearance of each fragment. In the next post I will generate the fragments and animate them using JavaScript.

style.css
*,*::before,*::after {  margin: 0;  padding: 0;  box-sizing: border-box;}html {  background-color: #3b7cf3;}.wrapper {  min-height: 100dvh;  display: grid;  place-content: center;}.container {  transform-style: preserve-3d;  position: relative;  /* width, height, and transform are applied by the script */}.fragment-wrapper {  position: absolute;  transform-style: preserve-3d;  /* width, and height are applied by the script */  /* animation (and its duration, delay, and iterations) is also applied by the script */}.fragment {  position: absolute;  transform-style: preserve-3d;  background-image: url("/img/all-day-long/front.png");  background-size: 100% auto;  backface-visibility: hidden;  /* width, height, transform, and background position are applied by the script */}.fragment::after {  content: "";  position: absolute;  top: 0;  left: 0;  transform: rotateY(180deg);  background-image: url("/img/all-day-long/back.png");  /* these properties are inherited from `.fragment` */  width: inherit;  height: inherit;  background-position-y: inherit;  background-size: inherit;  backface-visibility: inherit;}

Recommended reading​