0 Compartilhamentos 115 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

Como planejar e construir um projeto de programação
Artigos
31 visualizações
Artigos
31 visualizações

Como planejar e construir um projeto de programação

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

O desenvolvedor full stack Peter Lynch revela seu método de preparação para qualquer projeto, de forma simples e direta para iniciantes e veteranos.

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
165 visualizações
Artigos
165 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

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

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
162 visualizações
Artigos
162 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021

Serviço do My Heritage permite "animar" fotos do passado, trazendo vida para seus antepassados. Como isso é possível?

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como se tornar um Engenheiro DevOps em 2021
Artigos
148 visualizações
148 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021
Seus dados vazaram. E agora?
Artigos
128 visualizações
128 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021
Entendendo o elemento time em HTML 5
Artigos
145 visualizações
145 visualizações

Entendendo o elemento time em HTML 5

Carlos L. A. da Silva - 5 de fevereiro de 2021