1. CSS3 e HTML5 Flvia Siqueira BluesoftLabs

2. 3. Novas propriedades do CSS3 Bordas

Border-color: ajusta a cor dos 4 lados de um elemento 4. Border-image: podemos adicionar imagens as bordas

5.

Border-radius: possibilidade de criar bordar arredondadas 6. -moz-border-radius: o comando que far o border-radius funcionar no Firefox ou em outro navegador da Mozilla.

7.

-webkit-border-radius: renderizador usados por diversos navegadores, dentre eles o Safari e o Google Chrome, e j algumas verses desses navegadores a propriedade do border-radius est disponvel.

8. Cor

Cores HSL

A declarao de cores com uso de HSL (hue, saturation, lightness) permite que voc declare as cores com uso dos seus trs componentes: hue = tom, saturation = saturao e lightness = luminosidade. Seletor { color: hsl (120, 75%, 50%) } O primeiro valor para o tom (hue) da cor.

0 - vermelho 9. 60 - amarelo 10. 120 - verde 11. 180 - ciano 12. 240 - azul 13. 300 - prpura 14. 360 - vermelha

15. O segundo valor para a saturao (saturation) da cor. O seu valor expresso em porcentagem. Um valor igual a 100% representa saturao total da cor e 0 um leve sombreado cinza de saturao. O terceiro valor para a luminosidade (lightness). O seu valor expresso em porcentagem. Um valor igual a 100% resulta em cor branca e 0 em cor preta, sendo 50% o valor normal. 1.* { color: hsl(0, 100%, 50%) } /* vermelho */ 2.* { color: hsl(120, 100%, 50%) } /* verde */ 3.* { color: hsl(120, 100%, 25%) } /* verde escuro */ 4.* { color: hsl(120, 100%, 75%) } /* verde claro */ 5.* { color: hsl(120, 75%, 75%) } /* verde pastel */ 16.

Cores HSLA

A declarao de cores com uso de HSLA (hue, saturation, lightness, alpha-opacity) uma maneira estendida da declarao HSL na qual um quarto argumento define a opacidade da cor. Este quarto argumento um nmero decimal entre 0 e 1. 17. Texto

Text-shadow: adicionar sobras em texto

#000 = cor 2px = distncia horizontal 3px = distncia vertical 2px = raio da sombra #000 = cor 0.2em = distncia horizontal 0.3em = distncia vertical 0.2em = raio da sombra 18. Mltiplas sombras e valores negativos text-shadow: #000 1px 1px 1px, #FFF -1px -1px 1px; -webkit-text-shadow: para Safari -moz-text-shadow: para Firefox At o momento o IE no suporta o CSS3 19. Box

Box-shadow: declarao: adicionar sobras em qualquer elemento como box, imput e button.

20. Cuidado com os exageros... 21. 22.