Principais técnicas CSS3: guia essencial

Muitos de vocês provavelmente já ouviram todo o burburinho em torno do CSS3, mas exatamente quais técnicas podemos usar hoje? Neste artigo, vou te mostrar alguns diferentes técnicas CSS3 Isso funciona muito bem em alguns dos navegadores principais (ou seja, Firefox, Chrome, Safari, Opera) e como eles se degradam bem nos navegadores não apoiados (por exemplo

Internet Explorer). Usando extensões específicas do navegador, muitos dos estilos CSS3 propostos podem ser usados ​​hoje! Essas técnicas são usadas pelas melhores agências de web design!

Se você não conhece as extensões do navegador, esses são estilos CSS com um prefixo específico do fornecedor. Como o CSS3 ainda não está totalmente suportado, devemos usar essas extensões. Eles são os seguintes:

• Mozilla/Firefox/Gecko: -moz-
• Webkit (Safari/Chrome): -webkit- (Nota: alguns prefixos do WebKit funcionam apenas no Safari, e não no Chrome)

Como você deve ter adivinhado, uma das desvantagens do uso dessas extensões é o fato de que devemos usar todos os prefixos acima para obter o estilo CSS3 para renderizar em Firefox, Safari e Chrome. E não é surpresa para ninguém, ou seja, não suporta CSS3 ou eles têm extensões como os outros navegadores líderes. Tudo bem, chega de falar, vamos mergulhar bem!

Nota: Os estilos sem prefixo são a proposta de especificação W3 real.

Uma nota sobre demos nesta página

Os exemplos estão todos nesta página; portanto, se você não está vendo alguns exemplos corretamente (ou não), o navegador que você está usando não suporta a técnica CSS3 específica.

Drop Shadows

O efeito de sombra de queda aceita vários valores. Primeiro é simplesmente a cor da sombra. Vai aceitar quatro length Os valores, e os dois primeiros são o deslocamento X (horizontal) e o deslocamento Y (vertical).

O próximo valor é a quantidade de desfoque adicionada à sombra. O quarto e último valor é a quantidade de spread do desfoque. Box Shadow também aceitará um inset palavra -chave que criará uma sombra inserida.

box-shadow: #333 3px 3px 4px; -moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px;

Demoção de Shadow Drop:

Gradientes

Os gradientes podem ser bastante confusos a princípio, especialmente ao comparar as diferenças entre -moz e -webkit. Com -moz Você primeiro define a direção do gradiente e depois determina a cor inicial e final. -webkit Os gradientes levam um pouco mais de código.

Primeiro, você define o tipo de gradiente. Os próximos dois valores definem a direção. Finalmente, os dois últimos valores definem a cor inicial e final do gradiente.

-moz-linear-gradient(-90deg,#1aa6de,#022147); -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

Demonstração de gradientes:

RGBA

O método de cor RGBA é realmente mais fácil do que pode parecer primeiro. São necessários quatro valores e, para que sejam: a quantidade de vermelho, quantidade de verde, quantidade de azul e o nível de opacidade. Em vez de usar um hexadecimal (#) Color, você define a cor no modo RGB, enquanto o nível de opacidade pode dar à cor uma aparência transparente.

A opacidade aceita valores entre 0 e 1com 0 sendo totalmente opaco e 1 sendo a cor definida real. O exemplo abaixo tem um valor de opacidade de .5fazendo com que o elemento seja 50% transparente. rgba Na verdade, não requer nenhuma das extensões do navegador.

background-color: rgba(0, 54, 105, .5);

BUMO Sentir:

Hsl

Juntamente com o RGBA, o CSS3 pode disponibilizar o modelo de cores HSL para nós. Isso pode nos dar um arsenal inteiro de cores e tons. Neste modelo de cores, HSL significa matiz, saturação e leveza.

A matiz é um diploma na roda de cores, enquanto a saturação e a leveza são valores percentuais das cores.

background-color: hsl(209,41.2%, 20.6%);

Demo HSL:

Cor da borda

Com este estilo, você deve definir border-topAssim, border-rightAssim, border-bottome border-left separadamente para obter o efeito abaixo. Você notará que eu defini uma borda de 8px, juntamente com 8 cores diferentes para cada estilo de cor da borda.

Isso porque a mesma quantidade de cores precisa corresponder à quantidade de pixels no border definição.

border: 8px solid #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;

Demoção da cor da fronteira:

Cor de seleção de texto

Devo dizer que acho que alterar a cor da seleção de texto é um novo recurso bastante emocionante. Eu vi isso pela primeira vez em CSS-Tricks E pensei que era muito doce.

Com o ::selection pseudo-elemento, você pode alterar o color e background Quando o usuário destaca um elemento de texto. Muito bacana se você me perguntar. ::selection foi removido de formar o draft atual do CSS3, mas esperamos que eles o adicionem de volta mais tarde!

::selection { background: #3C0; /* Safari */ color: #90C; } ::-moz-selection { background: #3C0; /* Firefox */ color: #90C; }

Demoção de cores de seleção de texto:

Transformar

Com o transform Estilo, você pode fazer com que os elementos pareçam “crescer” quando pairados. Com um valor acima 1 adicionado a scaleo elemento aumentará de tamanho. Por outro lado, um valor abaixo 1 fará com que o elemento diminua de tamanho.

Juntamente com scalesão muitas transformações diferentes disponíveis para uso. Visite a página do desenvolvedor do Firefox para ver o que mais você pode usar.

-moz-transform: scale(1.15); -webkit-transform: scale(1.15);

Demonstração de transformar:

Layout de várias colunas

Com este novo estilo de layout de várias colunas, podemos dar ao nosso texto uma aparência do tipo “jornal”.

Isso é muito simples de implorar em comparação com a maneira normal de fazer isso através do CSS. Abaixo, especifiquei quantas colunas eu quero, que tipo de regra eu quero separá -las e quão grande eu quero entre as colunas. Simples hein?

-moz-column-count:3; -moz-column-rule: solid 1px black; -moz-column-gap: 20px;

Demoção de layout de várias colunas:

Resumo

Espero que todos estejam tão empolgados com o CSS3 quanto eu. Isso nos dá muito mais poder como designers e desenvolvedores da web e torna muitos aspectos muito mais simples. É ótimo usar para todos os setores e tipos de site, desde os sites da faculdade a pequenos restaurantes.

Agora, se pudéssemos conseguir TODOS Navegadores para apoiá -lo! Claro, o que eu apenas mostrei a você é apenas alguns dos novos recursos potenciais do CSS3. Se você quiser mais informações, dicas e ajuda, encorajo você a visitar todos e quaisquer sites abaixo:

Conteúdo relacionado