10 efeitos com propriedades CSS3

Firefox, Safari e Chrome já implementaram propriedades do CSS3. Para que funcionem, é necessário adicionarmos os prefixos -moz (para renderização no Firefox) e -webkit (para renderização nos navegadores Chrome e Safari). Ambos são soluções proprietárias dos fabricantes. Veja abaixo 10 efeitos das folhas de estilos CSS3.

Recomendo que leia também os seguintes artigos:

• Dica para indexar páginas em minutos no Google
• SEO para WordPress e ferramentas úteis
• Usabilidade em formulários mobile
• Aplicando Progressive Enhancement no HTML
• Documentações, sites e guias para Front-Ends
• Como deixar seus vídeos responsivos

1. Arredondar cantos de divs

Com a propriedade border radius conseguimos arredondar cantos de dvis. Dessa forma muitos desenvolvedores podem deixar de lado a estrutura de tabelas complexas e imagens para alcançar tal efeito.

Como acontece com margens, bordas, etc. no CSS há propriedades individuais para cada canto que deseja arredondar, veja alguns exemplos abaixo:
-moz-border-top-right-radius: 3px; arredonda em 3px o canto superior direito
-moz-border-top-left-radius: 3px; arredonda em 3px o canto superior esquerdo.

#div1 {
border: 1px solid #699;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

2. Sombras em divs

Criamos sombras em CSS com uso da propriedade box-shadow. Um exemplo seria: box-shadow: 2px -3px 4px #000. Os quatros valores passados são respectivamente: deslocamento horizontal da sombra(2px), deslocamento vertical(-3px), faz um “borrão” na sombra, um esfumaçado(4px) e por último a cor da sombra(#000).

#div2 {
border:1px solid #699;
-moz-box-shadow: 5px 5px 5px #b6ebf7;
-webkit-box-shadow: 5px 5px 5px #b6ebf7;
}

3. Transparência

Para fazer o efeito utilizamos a propriedade background-color mais o valor rgba() que é uma extensão do famoso modo de cores RGB. O comando rgba() é composto por 4 valores, por exemplo, rgba(255, 125, 0, 0.5); os três primeiros são valores em RGB que são respectivamente vermelho, verde e azul. Os valores podem ser de 0 a 255. O último valor é a transparência que varia de 0 até 1. Por exemplo, 0 seria totalmente transparente, 1 seria totalmente opaco e 0.5 seria uma transparência do 50%.

#div3 {
background-color: #6e8eb9;
}
body:last-child #div3 {
background-color: rgba(110, 142, 185, .4);
}

4. Colunas

Segundo pesquisas de usabilidade as pessoas têm dificuldades de ler textos onde as linhas são muito longas. Portanto, para aproveitar uma tela maior nada melhor que fazer seus textos em colunas, iguais aos jornais. E o melhor, com CSS isso já é possível. As colunas podem ser substituidas por divs flutuadas. Aqui algumas propriedades.

column-count:define o número de colunas
column-gap: cria um espaço entre as colunas (padding)
column-rule: define a estilização da borda que ficará entre as colunas.

#div4 {
/* borda inserida para facilitar o entedimento */
border: 1px solid #699;
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #6e8eb9;

-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #6e8eb9;
}

5. Várias imagens de fundo

Trabalhar com imagens de fundo sempre foi um pouco restrito quando se trata de CSS, devido ao fato de podermos inserir uma imagem de cada vez no fundo dos elementos. Isso não ocorre com CSS3. O uso de CSS3 permite ao desenvolvedor inserir múltiplas imagens por elemento simplesmente separando por vírgula a propriedade background.

Observe o exemplo abaixo:

background:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;

Os valores depois de no-repeat significam a posição da imagem. O primeiro representa a posição da imagem na horizontal, já o segundo valor é a posição da imagem na vertical.

#div5 blockquote{
/* retira qualquer imagem de fundo e adiciona espacamento de 20px
na na parte superior e inferior do elemento */
background:none;
padding:0 20px;
}

body:last-child #div5 blockquote p{
background:none
}

/*  hack para navegadores Microsoft*/
/* inserindo as imagens */
body:last-child #div5 blockquote{
background:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;
}

6. Box-sizing – box model

Box model especifica quais propriedades da folha de estilo serão somadas para definir o tamanho do elemento. Ao aplicar a largura(width) em uma div e depois uma borda, ou um espaçamento (padding) esse valores são somados ao tamanho inicial do elemento tornando ele maior.

Ao usar o box-sizing o uso da propriedade padding, por exemplo, pode ser aplicado dentro do tamanho definido no width. A propriedade é aplicada para dentro do elemento e não para fora. Ao invés de somar com o valor definido no width ele diminui. Recomendo observar os exemplos para um melhor entendimento da propriedade box-sizing.

#div6 {
background:#b6ebf7;
width: 200px;
padding: 10px;
-moz-box-sizing: content-box;
/* para o IE8 */
box-sizing: content-box;
-webkit-box-sizing: content-box;
}

#div6b {
background:#b6ebf7;
width: 200px;
padding: 10px;
-moz-box-sizing: border-box;
/*para o  IE8 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

7. Outline

Utilizado para aplicar um espaçamento em volta de um elemento HTML. Sua vantagem é de não alterar o tamanho do Box Model fazendo com que o elemento acabe ocupando mais espaços por causa da borda. Isso acontece quando utilizamos a propriedade border.

outline: cria uma borda adicional
outline-offset: utilizado para mover o contorno para dentro ou fora. Valores negativos movem para dentro do elemento.

#div7 {
border: 1px solid #000;
/*borda adicional*/
outline: 1px solid #FF0000;
/*utilizado para mover o contorno para dentro ou fora*/
outline-offset: -9px;
}

8. Fundo com gradientes

Já imaginou criar um fundo gradiente sem usar imagens? Com CSS3 isso é totalmente possível. Perceba que para usar o efeito no Safari e no Chrome foi necessário alterar um pouco o código.

Um exemplo de uso pode ser visto abaixo:
linear-gradient(bottom, #b6ebf7, #fff 50%). linear é o tipo do gradiente, bottom é o inicio do nosso gradiente, #b6ebf7 e #fff são as cores usadas, 50% quanto que o gradiente ocupara do elemento.

Para o efeito funcionar no Chorme temos que alterar algumas coisas como mostrado abaixo:

gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));

linear é o tipo, left e bottom é o inicio do gradiente, left e top o final, color-stop define a cor de inicio e fim.

#div8 {
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}

9. Rotacionando elementos

rotate: permite a rotação de elementos. O valor passado rotaciona o elemento em sentido horário.

#div9 {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}

10. Animação

O efeito funciona apenas para usuários do Firefox ou Safari 4. Aqui podemos trabalhar com transição e rotação podendo definir quantas vezes o elemento fará isso.

No exemplo abaixo primeiramente definimos uma cor para o link. Depois definimos uma cor e a propriedade que será animada. Por último quanto tempo deve ter a animação. Ao colocar o mouse sobre o link perceba que o fundo aparece de uma forma mais sutil.

.div a {
color: #0f0;
}

#div10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
}

#div10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}


#div10 a:hover {
color:#31801f;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

Este artigo foi escrito baseado no original Top 10 CSS3 commands com algumas alterações.

Recomendo a leitura do artigo Aplicando Progressive Enhancement no CSS para tirar mais proveito das propriedades CSS.

Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.