5 efeitos CSS3 legais que você verá mais

Propaganda

CSS3 (combinado com o poder do HTML5) está sendo rapidamente suportado por todos os principais navegadores (leia - qualquer coisa, exceto o Internet Explorer), então eu pensei que agora seria um bom momento para ver alguns dos efeitos interessantes de CSS que podemos obter usando o poder do seu navegador e um pouco de código CSS. Você poderá ver todos os efeitos demonstrados neste artigo se estiver usando o navegador Chrome, Safari ou Firefox mais recente.

Primeiro - O que é CSS?

Se você está lendo este artigo porque está intrigado, mas não tem ideia do que significa CSS, deixe-me explicar rapidamente. CSS é a linguagem de codificação usada para decorar páginas da web. Ele significa Cascendente Style Se basicamente adiciona estilo e talento a um site. Os sites certamente são legíveis sem o CSS, mas são hediondos, como todos os sites em 1995. Enquanto os arquivos HTML descrevem a estrutura e o conteúdo textual de uma página, o CSS os exibe da maneira que o designer pretendido e determine tudo, desde o layout da página, tamanho e cores do texto, e agora vários efeitos interessantes com a introdução do CSS3.

No passado, atingir o mesmo tipo de efeito descrito neste artigo significaria baixar CSS volumoso ou gráficos ainda maiores. Agora, o CSS pode apenas descrever para o seu navegador como ele gostaria que a página aparecesse, e o navegador manipulará o processamento. É como se eu estivesse lhe entregando os planos de construir sua própria casa em vez de vender a casa toda - é significativamente mais barato!

Cantos arredondados

O código para cantos arredondados é realmente fácil:

.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / raio da borda: 20 px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Sombra de texto

Aqui está o código para algumas sombras de texto:

.box_textshadow {text-shadow: 1 px 1 px 3 px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

Gradientes

Aqui está o código para gradientes de CSS:

.box_gradient {background-color: # 3f9fe3; imagem de fundo: -moz-linear-gradient (parte superior, # 3f9fe3, #white); / * FF3.6 * / background: -moz-linear-gradient (superior, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (parte superior, # 3f9fe3, #white); / * IE10 * / background-image: -o-linear-gradiente (parte superior, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, de (# 3f9fe3) a (#white)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (parte superior, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / background-image: gradiente linear (parte superior, # 3f9fe3, #white); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }

Rotação

Aqui o código para girar algo:

.box_rotate {-moz-transform: rotate (7.5deg); / * FF3.5 + * / -o-transform: rotate (7.5deg); / * Opera 10.5 * / -webkit-transform: rotate (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotate (7.5deg); / * IE9 * / transform: rotate (7.5deg); filter: progid: DXImageTransform. Microsoft Matriz (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, sizingMethod = 'auto expand'); zoom: 1; }

Animação

Você precisará do código de transição como este para qualquer elemento que queira alterar. Você também precisará usar algumas pseudo classes CSS (como: passe o mouse para alterar as propriedades que deseja animar, como cor, tamanho ou rotação)

.box_transition {-moz-transit: todos os 0,5s diminuem; / * FF4 + * / -o-transição: todos os 0.5s diminuem; / * Opera 10.5+ * / -webkit-transição: todos os 0.5s facilitam; / * Saf3.2 +, Chrome * / -ms-transição: todos os 0.5s diminuem; / * IE10? * / transição: todos os 0.5s diminuem; } 

Incompatibilidades entre navegadores

Embora a maioria dos navegadores modernos ofereça suporte a todo o CSS3 de alguma maneira, alguns ainda exigem código ou hacks ligeiramente diferentes para fazê-lo funcionar com sua implementação específica do padrão. No código acima, por exemplo, você verá muitas instâncias de -moz- ou -webkit- precedendo algumas das propriedades CSS, relacionadas a navegadores baseados em Mozilla ou Webkit. Escrever essas linhas extras pode ser uma dor, então confira o gerador css3 para escrevê-los para você.

Conclusão

A web ficará muito mais emocionante com as novas extensões CSS3 e HTML5. É verdade que veremos outro surto de texto intermitente e uma alta proporção de whiz-bang e conteúdo real (exatamente como fizemos quando GIFs animados foram “descobertos”), mas a longo prazo, aprenderemos como usar as ferramentas do CSS3 para tornar a Web mais interessante interfaces. E ei, você sempre pode desligar tudo!

Se você é um designer ou desenvolvedor da Web, lembre-se de que o CSS3 nunca deve ser a única opção. Se o seu site não funcionar sem CSS3, você não o usou corretamente. CSS deve ser usado para aprimorar a experiência, não a funcionalidade do programa.