10 efeitos com propriedades CSS3

Ago.23, 2010 em CSS

CSS3
Firefox, Safari e Chrome j implementaram propriedades do CSS3 . Para que funcionem, necessrio adicionarmos os prefixos -moz (para renderizao no Firefox) e -webkit (para renderizao nos navegadores Chrome e Safari). Ambos so solues proprietrias dos fabricantes. Veja abaixo 10 efeitos das folhas de estilos CSS3.

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 alcanar tal efeito. Como acontece com margens, bordas, etc. no CSS h propriedades individuais para cada canto q ue deseja arredondar, veja alguns exemplos abaixo: -moz-border-radius-topright: 3px; arredonda em 3px o canto superior direito -moz-border-radius-topleft: 3px; arredonda em 3px o canto superior esquerdo.
view plaincopy to clipboardprint?

1. 2. 3. 4. 5.

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

2. Sombras em divs
Criamos sombras em CSS com uso da propriedade box-shadow. Um exemplo seria:boxshadow: 2px -3px 4px #000 . Os quatros valores passados so respectivamente: deslocamento horizontal da sombra(2px ), deslocamento vertical(-3px), faz um borro na sombra, um esfumaado(4px ) e por ltimo a cor da sombra(#000 ).
view plaincopy to clipboardprint?

1. 2. 3. 4. 5.

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

3. Transparncia
Para fazer o efeito utilizamos a propriedade background-color mais o valor rgba()que uma extenso do famoso modo de cores RGB. O comando rgba() composto por 4 valores, por

exemplo, rgba(255, 125, 0, 0.5); os trs primeiros so valores em RGB que so respectivamente vermelho, verde e azul. Os valores podem ser de 0 a 255. O ltimo valor a transparncia que varia de 0 at 1. Por exemplo, 0 seria totalmente transparente, 1 seria totalmente opaco e 0.5 seria uma transparncia do 50%.
view plaincopy to clipboardprint?

1. 2. 3. 4. 5. 6.

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

4. Colunas
Segundo pesquisas de usabilidade as pessoas tm dificuldades de ler textos onde as linhas so 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 possvel. As colunas podem ser substituidas por divs flutuadas. Aqui algumas propriedades. column-count:define o nmero de colunas column-gap: cria um espao entre as colunas (padding) column-rule: define a estilizao da borda que ficar entre as colunas.
view plaincopy to clipboardprint?

1. #div4 { 2. /* borda inserida para facilitar o entedimento */ 3. border: 1px solid #699; 4. -moz-column-count: 2; 5. -moz-column-gap: 20px; 6. -moz-column-rule: 1px solid #6e8eb9; 7. 8. -webkit-column-count: 2; 9. -webkit-column-gap: 20px; 10. -webkit-column-rule: 1px solid #6e8eb9; 11. } Lorem Ipsum is simply dummy text of the printing and typesetting industry.

5. Vrias 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 no ocorre com CSS3. O uso de CSS3 permite ao desenvolvedor inserir mltiplas imagens por elemento simplesmente separando por vrgula 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 posio da imagem. O primeiro representa a posio da imagem na horizontal, j o segundo valor a posio da imagem na vertical.
view plaincopy to clipboardprint?

1. #div5 blockquote{ 2. /* retira qualquer imagem de fundo e adiciona espacamento de 20px

3. na na parte superior e inferior do elemento */ 4. background:none; 5. padding:0 20px; 6. } 7. 8. body:last-child #div5 blockquote p{ 9. background:none 10. } 11. 12. /* hack para navegadores Microsoft*/ 13. /* inserindo as imagens */ 14. body:last-child #div5 blockquote{ 15. background:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) norepeat 100% 100%; 16. } Lorem Ipsum is simply dummy text of the printing.

6. Box-sizing box model

Box model especifica quais propriedades da folha de estilo sero somadas para definir o tamanho do elemento. Ao aplicar a largura(width) em uma div e depois uma borda, ou um espaamento (padding) esse valores so 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 no para fora. Ao invs de somar com o valor definido no width ele diminui. Recomendo observar os exemplos para um melhor entendimento da propriedade box-sizing.
view plaincopy to clipboardprint?

1. 2. 3. 4. 5. 6. 7. 8. 9.

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

view plaincopy to clipboardprint?

1. 2. 3. 4. 5. 6. 7. 8. 9.

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

O contedo da DIV tem uma largura de 250px e padding de 10px, ou seja, a largura total de 270px (largura do contedo mais espaamento esquerda e direita do padding) Largura de 250px e padding de 10px, mas o preenchimento agora dentro da rea de contedo, largura total 250px

7. Outline

Utilizado para aplicar um espaamento em volta de um elemento HTML. Sua vantagem de no alterar o tamanho do Box Model fazendo com que o elemento acabe ocupando mais espaos 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.
view plaincopy to clipboardprint?

1. 2. 3. 4. 5. 6. 7.

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

8. Fundo com gradientes

J imaginou criar um fundo gradiente sem usar imagens ? Com CSS3 isso totalmente possvel. Perceba que para usar o efeito no Safari e no Chrome foi necessrio alterar um pouco o cdigo. 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 so 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, #b 6ebf7), 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.
view plaincopy to clipboardprint?

1. #div8 { 2. background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%); 3. background: -webkit-gradient(linear, left bottom, left top, colorstop(0, #b6ebf7), color-stop(0.20, #fff)); 4. } Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

9. Rotacionando elementos
rotate: permite a rotao de elementos. O valor passado rotaciona o elemento em sentido horrio.
view plaincopy to clipboardprint?

1. 2. 3. 4.

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

10. Animao

O efeito funciona apenas para usurios do Firefox ou Safari 4. Aqui podemos trabalhar com transio e rotao 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 animao. Ao colocar o mouse sobre o link perceba que o fundo aparece de uma forma mais sutil.
view plaincopy to clipboardprint?

1. .div a { 2. color: #0f0; 3. } 4. 5. #div10 a:hover { 6. color: #0f0; 7. -moz-transition-property: color; 8. -webkit-transition-property: color; 9. } 10. 11. #div10 a:hover { 12. color: #0f0; 13. -moz-transition-property: color; 14. -webkit-transition-property: color; 15. -moz-transition-duration: 0.5s; 16. -webkit-transition-duration: 0.5s; 17. } 18. 19. #div10 a:hover { 20. color:#31801f; 21. -moz-transition-property: color; 22. -webkit-transition-property: color; 23. -moz-transition-duration: 0.5s; 24. -webkit-transition-duration: 0.5s; 25. -moz-transition-timing-function: ease; 26. -webkit-transition-timing-function: ease; 27. } Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Este artigo foi escrito baseado no original Top 10 CSS3 commands com algumas alteraes.