10 efeitos com propriedades CSS3

Ago.23, 2010 em CSS

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.

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-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. #div1 { 
2. border: 1px solid #699; 
3. -moz-border-radius: 20px; 
4. -webkit-border-radius: 20px; 
5. } 

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: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).
view plaincopy to clipboardprint?

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
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%.
view plaincopy to clipboardprint?

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
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.
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. 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.
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) no-repeat 100% 10
0%; 
16. } 

Lorem Ipsum is simply dummy text of the printing.

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.
view plaincopy to clipboardprint?

1. #div6 { 
2. background:#b6ebf7; 
3. width: 200px; 
4. padding: 10px; 
5. -moz-box-sizing: content-box; 
6. /* para o IE8 */ 
7. box-sizing: content-box; 
8. -webkit-box-sizing: content-box; 
9. } 

view plaincopy to clipboardprint?

1. #div6b { 
2. background:#b6ebf7; 
3. width: 200px; 
4. padding: 10px; 
5. -moz-box-sizing: border-box; 
6. /*para o  IE8 */ 
7. box-sizing: border-box; 
8. -webkit-box-sizing: border-box; 
9. } 

O conteúdo da DIV tem uma largura de 250px e padding de 10px, ou seja, a largura total é de 270px
(largura do conteúdo mais espaçamento esquerda e direita do padding)
Largura de 250px e padding de 10px, mas o preenchimento agora é dentro da área de conteúdo,
largura total é 250px
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.
view plaincopy to clipboardprint?

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

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
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.
view plaincopy to clipboardprint?

1. #div8 { 
2. background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%); 
3. background: -webkit-gradient(linear, left bottom, left top, color-stop(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 rotação de elementos. O valor passado rotaciona o elemento em sentido horário.
view plaincopy to clipboardprint?

1. #div9 { 
2. -moz-transform: rotate(2deg); 
3. -webkit-transform: rotate(2deg); 
4. } 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
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.
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 alterações.