Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Primeira parte sobre o CSS 3

1,223 views

Published on

Apresentando um pouco do que há de novo no CSS3

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

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...

×