0 Compartilhamentos 27 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 cortar texto sem usar uma linha de script
Dicas
6 visualizações
Dicas
6 visualizações

Como cortar texto sem usar uma linha de script

Carlos L. A. da Silva - 11 de janeiro de 2021

Conheça o poder da propriedade text-overflow no CSS e nunca mais edite strings no braço.

Como começar a programar
Artigos
14 visualizações
Artigos
14 visualizações

Como começar a programar

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

Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.

Como cancelar qualquer conta online para sempre
Dicas
17 visualizações
Dicas
17 visualizações

Como cancelar qualquer conta online para sempre

Carlos L. A. da Silva - 30 de dezembro de 2020

Que tal fazer uma limpeza nas suas contas inativas ou finalmente largar aquela rede social que só dá desgosto?

Deixe um Comentário

Your email address will not be published.

Mais publicações

Retrospectiva (positiva) de 2020
Artigos
19 visualizações
19 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020
O que seria internet quântica?
Artigos
20 visualizações
20 visualizações

O que seria internet quântica?

Carlos L. A. da Silva - 23 de dezembro de 2020
Promoções de Jogos do Final de Semana (18/12) – Edição Natalina
Notícias
31 visualizações
31 visualizações

Promoções de Jogos do Final de Semana (18/12) – Edição Natalina

Carlos L. A. da Silva - 18 de dezembro de 2020
10 mitos sobre sua carreira em desenvolvimento
Artigos
26 visualizações
26 visualizações

10 mitos sobre sua carreira em desenvolvimento

Carlos L. A. da Silva - 16 de dezembro de 2020