0 Compartilhamentos 1436 Views

Como fazer uma árvore de Natal… com CSS!

21 de dezembro de 2020

De última hora, seu chefe pediu para enfeitar o site com árvores de Natal. O que poderia ser um pedido apressado em meio a tantas outras demandas, pode se tornar uma oportunidade de aprendizado. Sim, é claro que você tem a opção de catar um PNG transparente ou uma imagem qualquer no Google Images e encerrar por hoje, mas por que não tentar fazer isso usando somente CSS?

Isso é possível graças ao poder do clip-path, o uso inteligente de sombras e uma pequena trapaceada com um emoji de estrela para enfeitar. O truque a seguir foi desmembrado por Simon Ramsay e é mais simples do que parece.

A grosso modo, iremos gerar algumas caixas em CSS, recortá-las com border-radius para formar um círculo e depois recortar novamente com clip-path para termos triângulos. Depois, esses triângulos são arranjados e temos uma árvore vetorial quase perfeita.

O HTML da solução é:

Como dá para perceber, serão necessárias apenas três classes de CSS para transformar essa pilha de DIVs em uma árvore de Natal. A primeira classe é um container para todo o resto, para facilitar o posicionamento:

Cada camada de nossa árvore será determinada com outra classe:

Para fazer a sombra entre as camadas, iremos basicamente repetir o conceito, mas trocando de cor e tornando mais fino:

Com cada um dos elementos determinados, agora é uma questão de “montar” a árvore, ou seja, posicionar cada uma de suas DIVs no lugar correto. Isso poderia ser feito usando IDs em cada DIV, mas foi utilizado aqui o conceito dos seletores nth-child:

Cada “camada” superior terá um z-index maior, assim como um translateY menor para formar a pilha do jeito que precisamos para simular a árvore de Natal.

O último toque é a estrela no topo de tudo, que pode ser conseguida com um emoji:

.clip-tree:before {
content: ‘⭐️’;
position: absolute;
left: 42px;
z-index: 10;
top: -9px;
}

Poderíamos ter utilizado desde o começo o emoji 🎄 para criarmos nosso projeto sem tanta complicação, assim como um PNG transparente usado como background. Todo mundo ficaria feliz no final do dia: seu patrão e os visitantes do seu site. Entretanto, isso invalidaria toda a proposta de se aprender coisas novas com o desafio…

O resultado final dessa dica é uma árvore natalina criada usando somente CSS:

Nessa página você encontra outros dois caminhos alternativos para atingir o mesmo objetivo, se aprofundando em propriedades pouco utilizadas do CSS, como o elemento pseudo. Continue aprendendo e Boas Festas!

Carregando...

Você pode se interessar

Rust é o futuro da infraestrutura JavaScript
Artigos
50 visualizações
Artigos
50 visualizações

Rust é o futuro da infraestrutura JavaScript

Carlos L. A. da Silva - 6 de dezembro de 2021

Lee Robinson explica como e por que o Rust está penetrando em cenários antes dominados pelo JavaScript.

Influenciadores digitais que não existem
Artigos
112 visualizações
Artigos
112 visualizações

Influenciadores digitais que não existem

Carlos L. A. da Silva - 2 de dezembro de 2021

Na era da pós-verdade, influenciadores que não são reais estão ganhando espaço para uma multidão que quer ser influenciada

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada
Artigos
252 visualizações
Artigos
252 visualizações

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada

Carlos L. A. da Silva - 23 de novembro de 2021

Aplicativo oficial do sistema educacional da capital Suécia era ruim demais, mas a lei é a lei...

Deixe um Comentário

Your email address will not be published.

Mais publicações

10 recursos HTML5 úteis que você pode não estar usando
Artigos
497 visualizações
497 visualizações

10 recursos HTML5 úteis que você pode não estar usando

Carlos L. A. da Silva - 6 de novembro de 2021
O Metaverso está vindo?
Artigos
560 visualizações
560 visualizações

O Metaverso está vindo?

Carlos L. A. da Silva - 1 de novembro de 2021
Por que eu decidi não migrar para o Windows 11 agora
Artigos
661 visualizações
661 visualizações

Por que eu decidi não migrar para o Windows 11 agora

Carlos L. A. da Silva - 19 de outubro de 2021