Primeira parte sobre o CSS 3
Upcoming SlideShare
Loading in...5
×
 

Primeira parte sobre o CSS 3

on

  • 1,167 views

Apresentando um pouco do que há de novo no CSS3

Apresentando um pouco do que há de novo no CSS3

Statistics

Views

Total Views
1,167
Views on SlideShare
1,167
Embed Views
0

Actions

Likes
0
Downloads
18
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Primeira parte sobre o CSS 3 Presentation Transcript

  • CSS3 e HTML5 Flávia Siqueira BluesoftLabs
  •  
  • Novas propriedades do CSS3 Bordas
    • Border-color: ajusta a cor dos 4 lados de um elemento
    • Border-image: podemos adicionar imagens as bordas
    • Border-radius: possibilidade de criar bordar arredondadas
    • -moz-border-radius: é o comando que fará o border-radius funcionar no Firefox ou em outro navegador da Mozilla.
    • -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.
  • 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
    • 60 - amarelo
    • 120 - verde
    • 180 - ciano
    • 240 - azul
    • 300 - púrpura
    • 360 - vermelha
  • 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 */
    • 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.
  • 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
  • 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
  • Box
    • Box-shadow: declaração: adicionar sobras em qualquer elemento como box, imput e button.
  • Cuidado com os exageros...
  •  
  •