Pular para o conteúdo principal

ALL DAY LONG parte 4: CSS

· Leitura de 4 minutos

Esta postagem cobre o CSS usado para estilizar a animação.

ALL DAY LONG (série de 7 partes)
  1. Introdução
  2. Conceito
  3. Imagens
  4. HTML
  5. CSS
  6. JS
  7. Conclusão

Detalhes​

O CSS define o layout da animação e estabelece o espaço 3D no qual os fragmentos da fita existem.

Reset simples

Um reset pequeno garante dimensionamento e espaçamento consistentes. Os pseudo-elementos são incluídos porque são usados para renderizar a face traseira de cada fragmento.

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

Cor de fundo

A cor de fundo da animação é definida no elemento html.

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

Elemento .wrapper

Ele tem a altura do viewport, para poder centralizar o elemento .container.

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

Elemento .container

O container é rotacionado ao longo dos eixos X, Y e Z para que a fita possa ser percebida em três dimensões. Sem essa inclinação, a animação pareceria plana.

style.css
.container {  transform-style: preserve-3d;  position: relative;  /* width, height, e transform são aplicados pelo o script */}

Elemento .fragment-wrapper

Ele recebe a animação, como será explicado na próxima postagem. Também define que seus filhos (.fragment) são posicionados no espaço 3D.

style.css
.fragment-wrapper {  position: absolute;  transform-style: preserve-3d;  /* width, and height are applied by the script */  /* a animação (e sua duração, atraso, e iteração) também é aplicada pelo o script */}

Elementos .fragment

Eles recebem sua própria posição de fundo para a imagem front.png. Ao ajustar o background-position-y, cada fragmento mostra uma seção vertical diferente da imagem, criando a ilusão de uma fita contínua em movimento. Sua face traseira é ocultada para não aparecer quando girada. Também define que seus filhos (.fragment::after) são posicionados no espaço 3D.

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, e background-position-y são aplicados pelo o script */}

Pseudo-elementos .fragment::after

O pseudo-elemento ::after renderiza a face traseira da fita. Em vez de criar outro elemento do DOM, o pseudo-elemento replica as dimensões e o posicionamento de fundo do fragmento. As únicas diferenças principais são:

  • uma imagem de fundo diferente (back.png)
  • um rotateY(180deg) para que ele fique voltado para a direção oposta
style.css
.fragment::after {  content: "";  position: absolute;  top: 0;  left: 0;  transform: rotateY(180deg);  background-image: url("/img/all-day-long/back.png");  /* essas propriedades são herdadas do `.fragment` */  width: inherit;  height: inherit;  background-position-y: inherit;  background-size: inherit;  backface-visibility: inherit;}

Resultado​

Nesta postagem defini as regras CSS que criam o espaço 3D e a aparência visual de cada fragmento. Na próxima postagem vou gerar os fragmentos e animá-los com 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, e transform são aplicados pelo o script */}.fragment-wrapper {  position: absolute;  transform-style: preserve-3d;  /* width, and height are applied by the script */  /* a animação (e sua duração, atraso, e iteração) também é aplicada pelo o 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, e background-position-y são aplicados pelo o script */}.fragment::after {  content: "";  position: absolute;  top: 0;  left: 0;  transform: rotateY(180deg);  background-image: url("/img/all-day-long/back.png");  /* essas propriedades são herdadas do `.fragment` */  width: inherit;  height: inherit;  background-position-y: inherit;  background-size: inherit;  backface-visibility: inherit;}

Leitura recomendada​