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

Sir Clive Sinclair, o homem adiantado no tempo
Artigos
64 visualizações
Artigos
64 visualizações

Sir Clive Sinclair, o homem adiantado no tempo

Carlos L. A. da Silva - 18 de setembro de 2021

O inglês Clive Marles Sinclair nasceu de uma família de engenheiros. Seu avô foi engenheiro, assim como o seu pai. Com um talento natural pela Matemática e um forte interesse em eletrônica, ele se tornaria uma página importante da popularização da computação em diversas partes do mundo, construindo um legado que se perpetuará por anos […]

A cibersegurança por trás das vacinas
Artigos
180 visualizações
Artigos
180 visualizações

A cibersegurança por trás das vacinas

Carlos L. A. da Silva - 7 de setembro de 2021

Vacinas contra o coronavírus contam com aparato sofisticado de cibersegurança que bateu de frente com tentativa de ação de hackers.

Top 25 comandos do Git
Artigos
315 visualizações
Artigos
315 visualizações

Top 25 comandos do Git

Carlos L. A. da Silva - 28 de agosto de 2021

Git é uma mão na roda para source control, mas pode ficar melhor ainda conhecendo os comandos certos.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Dez anos de Kotlin: origens e futuro
Artigos
373 visualizações
373 visualizações

Dez anos de Kotlin: origens e futuro

Carlos L. A. da Silva - 20 de agosto de 2021
10 jogos que todo programador deveria conhecer
Artigos
689 visualizações
689 visualizações

10 jogos que todo programador deveria conhecer

Carlos L. A. da Silva - 1 de agosto de 2021