Pular para o conteúdo principal

DO IT parte 2: CSS

· Leitura de 3 minutos

Na segunda parte, defino os estilos CSS.

DO IT (série de 5 partes)
  1. Introdução
  2. HTML
  3. CSS
  4. JS
  5. Conclusão

Seções do CSS​

Separei o arquivo CSS em três seções:

  1. Theme variables: define variáveis de tema claro e escuro
  2. Soft reset: aplica um reset simples
  3. General styles: demais estilos

Theme variables​

Por padrão, as variáveis são iniciadas com as cores de tema claro. Porém, se for identificado pelo browser que existe preferência por tema escuro por meio da media query, as variáveis são redefinidas com as cores de tema escuro.

index.css
/* ========================================   Theme variables======================================== */:root {  --background-color: white;  --foreground-color: black;  --text-color: red;}@media (prefers-color-scheme: dark) {  :root {    --background-color: black;    --foreground-color: red;    --text-color: white;  }}

Soft reset​

Para facilitar a estilização, margin e padding são definidos com 0, e box-sizing com border-box para todos os elementos, por meio do seletor *.

index.css
/* ========================================   Soft reset======================================== */* {  box-sizing: border-box;  margin: 0;  padding: 0;}

General styles​

Demais estilos, sendo os destaques:

  • Linha 16: a propriedade perspective define a distância entre a tela e os olhos do usuário, dando perspectiva a um elemento posicionado em 3D, div.wrapper neste caso
  • Linha 20: a propriedade transform rotaciona div.container nos eixos x e y. De início, os valores rotacionam div.container para o topo esquerdo da tela
  • Linhas 29 e 30: a propriedade text-shadow desenha 50 sombras no elemento div.text, dando a impressão de que o texto é sólido e tridimensional, pois cada sombra fica próxima uma da outra. De início, as sombras apontam para o fundo direito da tela

Juntas, as propriedades perspective, transform e text-shadow criam o efeito tridimensional.

index.css
/* ========================================   General styles======================================== */html {  font-family: "Montserrat", sans-serif;  font-weight: 900;  background-color: var(--background-color);}.wrapper {  min-height: 100dvh;  display: flex;  justify-content: center;  align-items: center;  perspective: 1000px;}.container {  transform: rotateX(14.5082deg) rotateY(-14.9276deg);}.text {  font-weight: bolder;  font-size: 20vw;  text-transform: uppercase;  color: var(--text-color);  text-align: center;  text-shadow: 0.039806996381182146vw 0.038688524590163934vw var(--foreground-color),    /* outras 49 sombras */;}

Resultado atual​

Com os estilos definidos, obtive o seguinte resultado:

Conclusão​

Tendo o estilo definido, segui para a interação com JS: DO IT parte 3: JS.

Leitura recomendada​