O documento resume novas propriedades do CSS3 como bordas arredondadas, cores HSL e HSLA, sombreamento de texto e caixas, e fornece exemplos de como implementá-las.

1. CSS3 e HTML5 Flávia Siqueira BluesoftLabs

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 versões desses navegadores a propriedade do border-radius está disponível.

8. Cor Cores HSL A declaração de cores com uso de HSL (hue, saturation, lightness) permite que você declare as cores com uso dos seus três componentes: hue = tom, saturation = saturação 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 - púrpura

14. 360 - vermelha

15. O segundo valor é para a saturação (saturation) da cor. O seu valor é expresso em porcentagem. Um valor igual a 100% representa saturação total da cor e 0 é um leve sombreado cinza de saturação. 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 declaração de cores com uso de HSLA (hue, saturation, lightness, alpha-opacity) é uma maneira estendida da declaração HSL na qual um quarto argumento define a opacidade da cor. Este quarto argumento é um número decimal entre 0 e 1.

17. Texto Text-shadow: adicionar sobras em texto #000 = cor 2px = distância horizontal 3px = distância vertical 2px = raio da sombra #000 = cor 0.2em = distância horizontal 0.3em = distância vertical 0.2em = raio da sombra

18. Múltiplas 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 não suporta o CSS3

19. Box Box-shadow: declaração: adicionar sobras em qualquer elemento como box, imput e button.

20. Cuidado com os exageros...