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

Windows 11 vem aí?!
Artigos
71 visualizações
Artigos
71 visualizações

Windows 11 vem aí?!

Carlos L. A. da Silva - 15 de junho de 2021

Depois de mais de cinco anos, há claros sinais de que o Windows 10 será substituído por uma próxima versão do sistema operacional da Microsoft.

As “gambiarras” que os desenvolvedores de jogos utilizam
Artigos
221 visualizações
Artigos
221 visualizações

As “gambiarras” que os desenvolvedores de jogos utilizam

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

Não seja tão duro com você mesmo! O caminho da programação está lotado de "gambiarras" e até jogos conhecidos apelam para alguns truques.

Qual framework de PHP é o melhor para 2021?
Artigos
330 visualizações
Artigos
330 visualizações

Qual framework de PHP é o melhor para 2021?

Carlos L. A. da Silva - 27 de maio de 2021

A Theme Selection fez um comparativo das opções disponíveis no mercado e você vai bater o martelo sobre qual é o melhor framework para suas necessidades.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Adeus a Mandic, um dos “pais” da internet brasileira
Artigos
437 visualizações
437 visualizações

Adeus a Mandic, um dos “pais” da internet brasileira

Carlos L. A. da Silva - 18 de maio de 2021
O que é o FLoC e como ele afeta sua privacidade na internet?
Artigos
555 visualizações
555 visualizações

O que é o FLoC e como ele afeta sua privacidade na internet?

Carlos L. A. da Silva - 5 de maio de 2021
Como planejar e construir um projeto de programação
Artigos
793 visualizações
793 visualizações

Como planejar e construir um projeto de programação

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