Primeira parte sobre o CSS 3

1,026
-1

Published on

Apresentando um pouco do que há de novo no CSS3

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,026
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Desde que CSS começou passaram muitos anos e já vamos pela especificação de CSS3, que incorpora uma série de novidades que vou tratar de resumir neste artigo.
  • Primeira parte sobre o CSS 3

    1. 1. CSS3 e HTML5 Flávia Siqueira BluesoftLabs
    2. 3. Novas propriedades do CSS3 Bordas <ul><li>Border-color: ajusta a cor dos 4 lados de um elemento
    3. 4. Border-image: podemos adicionar imagens as bordas </li></ul>
    4. 5. <ul><li>Border-radius: possibilidade de criar bordar arredondadas
    5. 6. -moz-border-radius: é o comando que fará o border-radius funcionar no Firefox ou em outro navegador da Mozilla. </li></ul>
    6. 7. <ul><li>-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. </li></ul>
    7. 8. Cor <ul><li>Cores HSL </li></ul>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. <ul><li>0 - vermelho
    8. 9. 60 - amarelo
    9. 10. 120 - verde
    10. 11. 180 - ciano
    11. 12. 240 - azul
    12. 13. 300 - púrpura
    13. 14. 360 - vermelha </li></ul>
    14. 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 */
    15. 16. <ul><li>Cores HSLA </li></ul>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.
    16. 17. Texto <ul><li>Text-shadow: adicionar sobras em texto </li></ul>#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
    17. 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
    18. 19. Box <ul><li>Box-shadow: declaração: adicionar sobras em qualquer elemento como box, imput e button. </li></ul>
    19. 20. Cuidado com os exageros...

    ×