Muitos de vocês podem ter ouvido muitos rumores sobre CSS3, mas quais são algumas técnicas de CSS3 que podemos realmente usar hoje? Neste artigo, mostrarei algumas técnicas CSS3 distintas que funcionam bem em alguns dos principais navegadores (como Firefox, Chrome, Safari, navegadores Opera). Esses efeitos degradarão a renderização em navegadores não suportados (como o Internet Explorer). Muitos dos estilos CSS3 propostos podem ser usados imediatamente usando declarações específicas do navegador..jpg)
Se você não sabe quais são as declarações específicas do navegador, basta lembrar que todas são prefixos específicos antes das propriedades de estilo CSS relacionadas ao provedor do kernel. Como o CSS3 ainda não é totalmente suportado, precisamos usar essas declarações específicas. O formulário específico é o seguinte:
* Prefixo do navegador Mozilla/Firefox/Gecko: -moz-
* Prefixo do navegador Webkit (Safari/Chrome): -webkit- (Observação: alguns prefixos Wbkit só podem ser usados no Safari e não são suportados pelo Chrome.)
Como você deve ter visto, uma desvantagem de usar essas declarações é que se quisermos obter efeitos CSS3 no Firefox, Safari e Chrome, precisaremos usar todos os prefixos acima. Não é de surpreender que o Internet Explorer não suporte CSS3 e, portanto, não tenha uma declaração de prefixo específica como outros navegadores importantes.
Ok, chega disso, vamos tentar imediatamente. Nota: As declarações de estilo menos esses prefixos são as propostas de especificação reais do padrão W3.
Descrição de demonstração (exemplo) sobre esta página
Todos esses exemplos estão nesta página. Se você não consegue visualizar os efeitos dos exemplos normalmente (ou só consegue visualizar parte deles), significa que o navegador que você está usando não suporta esses efeitos CSS3.
efeito de sombra
Os efeitos de sombra aceitam vários valores de parâmetros. O primeiro é a cor da sombra, que também aceita quatro outros valores de comprimento (comprimento). Os dois primeiros valores de comprimento são o deslocamento X (horizontal) e o deslocamento Y (vertical). O próximo parâmetro é um valor que reflete a imprecisão. O quarto e último valor é usado para definir a propagação do desfoque.
sombra da caixa: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;
.gif)
Demonstração de efeito de sombra
efeito gradiente
Os estilos de gradiente CSS3 podem ser confusos no início, especialmente as diferenças entre os gradientes -moz e -webkit. Em -moz, primeiro você precisa definir a direção do gradiente e, em seguida, definir as cores inicial e final. O gradiente de -webkit é um pouco mais complicado. Primeiro você precisa definir o tipo de gradiente, depois os próximos dois valores definem a direção e os dois últimos valores definem a cor inicial e a cor final. do gradiente.
-moz-gradiente linear(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, superior esquerdo, inferior esquerdo, from(#1aa6de), to(#022147));
.gif)
Demonstração do efeito gradiente
Modo de cor RGBA
A definição real de cores do RGBA não é tão complicada quanto parece. Ele aceita quatro valores de parâmetros: valor vermelho, valor verde, valor azul e transparência. Não usamos valor hexadecimal hexadecimal da cor. Definimos a cor no modo RGB, onde a transparência pode definir o efeito transparente da cor. A transparência varia de 0 a 1, sendo 0 totalmente opaco e 1 totalmente transparente. A transparência dos exemplos de demonstração a seguir é de 0,5, a transparência do elemento é de 50%, rgba não requer nenhuma declaração específica de prefixo do navegador.
cor de fundo: rgba (0, 54, 105, 0,5);
.gif)
Modo de cor HSL (Matiz H, Saturação S, Luminosidade L)
Além do RGBA, o CSS3 também oferece suporte ao modo de cores HSL. Isso nos dá muita liberdade na escolha de cores e tons. No modelo de cores HSL, H significa matiz, S significa croma e L significa brilho. Matiz é o valor do ângulo na roda de cores, enquanto saturação e brilho são valores percentuais da cor.
cor de fundo: hsl(209,41,2%, 20,6%);
.gif)
Exemplo de demonstração HSL
cor da borda
Para usar este estilo CSS, você precisa definir border-top, border-right, border-bottom e border-left respectivamente para obter os seguintes efeitos. Você percebe que uma borda de 8 pixels está definida, e então a borda é definida em 8 cores diferentes. Isso ocorre porque o número de cores da borda deve corresponder ao valor da largura em pixels da borda.
borda: 8px sólido #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
.gif)
Demonstração de cores de borda
Configurações de cores de seleção de texto
Devo dizer que a definição da cor da seleção de texto é um novo recurso bastante interessante. Quando vi isso pela primeira vez no CSS Tips, achei muito atencioso. Com o par de pseudoelementos ::selection, você pode alterar a cor e o plano de fundo quando o usuário seleciona um elemento de texto. Se você está pedindo uma opinião, acho muito bonito. Embora ::selection tenha sido removido do rascunho CSS3 atual, esperamos adicioná-lo mais tarde.
::seleção {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0;
.gif)
Demonstração de cores de seleção de texto
deformação
Com estilos de transformação, você pode fazer um elemento parecer maior ao passar o mouse. Defina o valor da Escala para um valor maior que 1 e o elemento diminuirá. Por outro lado, se o valor for menor que 1, o tamanho do elemento é reduzido. Além da Escala, existem muitas outras deformações diferentes disponíveis. Você pode visitar a página do desenvolvedor do Firefox para ver o que eles podem alcançar
-moz-transform: escala (1,15); -webkit-transform: escala (1,15);
.gif)
Demonstração do efeito de deformação
layout de várias colunas
Com este novo estilo de layout de múltiplas colunas, você pode dar ao seu texto um efeito de layout de “jornal”. Comparado com o método de implementação em CSS2, em CSS3 é muito mais simples conseguirmos esse tipo de efeito. Abaixo, especifico o número de colunas que a ave precisa, bem como o tipo de regras de separação e o tamanho dos espaços entre as colunas. É fácil de usar, certo?
-moz-column-count:3;-moz-column-rule: sólido 1px preto;-moz-column-gap: 20px;
.gif)
Resumir
Espero estar tão entusiasmado quanto estou com esses recursos do CSS3. Dá mais poder aos web designers e desenvolvedores e simplifica muitos aspectos. Agora só temos que esperar que todos os navegadores o suportem. É claro que o conhecimento que demonstro aqui é apenas a ponta do iceberg dos novos recursos do CSS3. Se quiser mais informações, dicas e ajuda, recomendo que visite os seguintes sites.