Neste guia, exibiremos o poder do CSS3 em formas complexas de desenho. Magicamente criaremos ornamentos de árvore de Natal usando apenas CSS3 e HTML (sem imagens). Em particular, estaremos desenhando enfeitesque são a ornamentação da Hallmark das árvores de Natal.
Observe que isso é apenas uma prova de conceito divertida que explora as possíveis aplicações do CSS3. Se você pretende usar isso na produção, deve estar ciente de que o que criaremos usaremos as especificações do W3C que ainda não são, ou nunca serão suportadas em muitos navegadores (como o IE6 ao IE8). Além disso, a marcação deve ser atualizada para evitar vazios div elementos.
Ingredientes CSS
Antes de começarmos, vamos repassar rapidamente o que estamos usando.
:beforee:afterPseudo-elementos: O uso de pseudo-elementos nos ajudará a reduzir a quantidade de HTML desnecessário que precisamos usar. Se você já trabalhou com cantos arredondados no CSS2 antes, provavelmente sabe que, para produzir cantos arredondados flexíveis que acomodam vários tamanhos de conteúdo, você teve que usar muitas divs vazias e tal. Ao usar esses elementos, teremos uma marcação mínima.Nesse caso, apenas um vazio
divpor bobagem, que, se você fosse empreendedor, preencheria com algum conteúdo de texto. Observe que esses pseudo-elementos estão em especificações CSS2.- CSS3 linear e radial gradientes: Para obter os preenchimentos de cores metálicos e brilha dos enfeites, usaremos gradientes de cores.
- Sombras de caixa, transformações, raio de borda, etc.: Para criar as formas, usaremos uma combinação de
box-shadowAssim,transformeborder-radius(para cantos arredondados).
Html
Primeiro, vamos criar a marcação. Como você pode ver abaixo, a estrutura é mínima e contém apenas a quantidade mínima de marcação necessária. Como os globos precisam ser elementos de bloqueio, eu escolhi ir com
display: block Par de propriedade/valor CSS. Eu os coloquei em uma lista não ordenada porque decidi que eles são um grupo de itens sem hierarquia específica (por exemplo red-bauble não é maior que green-bauble), e assim, para mim, a metáfora das listas não ordenadas é mantida.
Explanation of the IDs/classes:
#bauble-containeris our unordered list, which will be used for targeting the list items () with greater specificity..baubleis the main part of the ornament; the spherical shape..red-bauble,.blue-bauble,.yellow-baubleand.green-baubleare the classes used for adding color variations. It makes our work flexible so that, if you wanted various combinations, you’re not stuck with the color combinations I chose. For example, you could have two yellow baubles or no yellow baubles–that’s why we use classes, and not IDs, for these.
CSS
What follows are the style rules that will turn our boring unordered list above into a magical set of Christmas tree ornaments. For discussion, I have commented the CSS below so that you can see how it works to highlight the major parts of the CSS. Note that, in production, you would not want this much commenting in your stylesheet because it is over the top and because it can increase your stylesheet’s file size.
/* General */ html { background: #f2f5f6; /* Fallback background color if gradients are not supported */ background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6)); height: 100%; } #bauble-container { list-style: none; /* Remove bullets */ width: 568px; margin: 150px auto; /* Center it */ padding: 0; /* In production, this may not be needed if you reset your styles in your global stylesheet: https://www.MidiaPro.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/ */ } #bauble-container li { margin: 0 20px; /* let's add some space */ float: left; /* place them in line */ } /* This is the part where the Christmas bauble string is added */ #bauble-container li:before { content: ""; background: #dadada; /* Fallback */ background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) ); background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0))); height: 50px; width: 2px; display: block; margin: 0 auto; } /* Alernatively rotate them */ #bauble-container li:nth-child(odd) { -moz-transform: rotate(-5deg); /* Firefox */ -webkit-transform: rotate(-5deg); /* Chrome and Safari */ -o-transform: rotate(-5deg); /* Opera */ -ms-transform: rotate(-5deg); /* Surprise! IE9 with its own prefix */ } #bauble-container li:nth-child(even) { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); } /* Style the bauble */ .bauble { -moz-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0 0 5px #777777; box-shadow: 0 0 5px #777777; -webkit-box-shadow: 0 0 5px #777777; border: 1px solid rgba(0,0,0,0.3); position: relative; height: 100px; width: 100px; } /* Style the bauble head */ .bauble:before { content: ""; background: #fff; /* Fallback */ background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c ); background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c)); -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset; box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset; border: 1px solid #dadada ; height: 10px; width: 20px; position: absolute; left: 50%; top: -12px; margin-left: -10px; } /* Add bauble light reflection */ .bauble:after { content: ""; -moz-border-radius: 100px; border-radius: 100px; background: #fff; /* Fallback */ background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) ); background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1))); position: absolute; top: 0; left: 50%; margin-left: -40px; opacity: 0.15; height: 80px; width: 80px; } /* Colorize them */ .red-bauble { background: #c8171f; background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f); background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f)); } .blue-bauble { background: #00a1ee; /* Fallback */ background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee); background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee)); } .yellow-bauble { background: #fcb83d; /* Fallback */ background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d); background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d)); } .green-bauble { background: #4d8d00; /* Fallback */ background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00); background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00)); }Comparação de como os navegadores da web renderizam CSS3
Então, como parece nosso trabalho em vários navegadores? Vamos dar uma olhada, não é?
Mozilla Firefox 3.6
Google Chrome 6.0.4
No Google Chrome, você pode notar tons de cores ligeiramente diferentes devido à diferença na maneira como os gradientes CSS3 são renderizados.
Safari 5.02
Os ornamentos em Safari e Chrome são quase idênticos porque usam o mesmo mecanismo de layout (Webkit).
Opera 10.63
Embora os navegadores de ópera suportem a maioria das especificações do W3C CSS3, os gradientes de cores estão faltando para que eles se degradam para a cor sólida que definimos para o background propriedades. 
IE9 visualização
O IE9 se comporta de maneira semelhante à ópera, mas as últimas notícias sobre esse navegador são que ele suportará transformações 2D como o Webkit (com seu próprio prefixo de fornecedores, -ms-). 
Ie8
Mesmo se o IE8 tiver apoio para pseudo-elementos como :before e :afterFalta totalmente o suporte ao CSS3, então nossos enfeites parecem caixas.
Eu o incluí aqui apenas para você ver como nosso trabalho se degrada em navegadores que não têm suporte ao CSS3. Eles parecem Discos de disquete (Ligado porque nosso público mais jovem pode não saber quais são esses dispositivos antigos), para que possam ser adequados para a árvore de Natal de uma família nerd! 
IE6 e IE7 não poderiam se juntar à nossa festa de Natal por razões conhecidas: eles falta mais do que apenas as especificações do CSS3 suportam, mas também o :before e :after pseudo-elementos; Então, teríamos apenas quatro quadrados com cores diferentes nesses dois navegadores.
Espero que você tenha sido inspirado a aprender sobre o CSS3 neste guia e que descobriu um ou dois truques que pode usar em seus projetos. Desejo -lhe um Feliz Natal e Boas Festas!
Conteúdo relacionado
Presidente da MidiaPro. Bill tem mais de 25 anos de experiência no setor de marketing na Internet, especializado em SEO, UX, arquitetura de informações, automação de marketing e muito mais. A formação de William em computação científica e educação de Shippensburg e MIT forneceu a base para a ReveNuecloudfx e outros projetos importantes de pesquisa e desenvolvimento na MidiaPro.
O MidiaPro é uma agência de marketing de serviço completo, com mais de 1.100 análises de clientes e uma classificação de 4,9 estrelas na embreagem! Descubra como nossa equipe de especialistas e a receita que aceitam a tecnologia podem gerar resultados para você! Saber mais
Facilitar a estimativa dos custos da web de design
Os custos de design de sites podem ser complicados de pregar. Obtenha uma estimativa instantânea para um design de web personalizado com a calculadora de custos de design de site gratuita!
Experimente nossa calculadora de custos gratuitos de web design
Perguntas frequentes sobre o Guia de Desenho de Ornamentos de Natal com CSS3
1. Quais são os ingredientes CSS utilizados para criar os ornamentos de Natal?
Os ingredientes CSS utilizados incluem pseudo-elementos :before e :after, gradientes lineares e radiais do CSS3, sombras de caixa, transformações e raio de borda.
2. Por que é importante usar pseudo-elementos :before e :after?
O uso de pseudo-elementos ajuda a reduzir a quantidade de HTML desnecessário, resultando em uma marcação mais limpa. Além disso, ajuda a criar cantos arredondados flexíveis sem a necessidade de divs adicionais.
3. Como é feita a estilização dos ornamentos de Natal?
Os ornamentos são estilizados usando propriedades como border-radius, box-shadow e gradientes de cores. Cada ornamento possui uma classe específica para adicionar variações de cores.
4. Como os ornamentos de Natal são renderizados em diferentes navegadores?
Os ornamentos são renderizados de forma diferente em diferentes navegadores. Enquanto navegadores modernos como Firefox e Chrome exibem corretamente os ornamentos com todos os efeitos CSS3, navegadores mais antigos como IE8 podem não renderizá-los corretamente.
5. Posso usar esses ornamentos de Natal em produção?
Este guia é uma prova de conceito divertida que explora as possíveis aplicações do CSS3. Se você pretende usar esses ornamentos em produção, deve estar ciente de que nem todos os navegadores suportam as especificações do CSS3 utilizadas. Recomendamos fazer testes em diferentes navegadores antes de implementar em um projeto real.
