Documente Academic
Documente Profesional
Documente Cultură
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. 2. 3. 4. 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: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.
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.
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; }
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
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.
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.