Arthur Emanuel de O. Carosia
 Padrão mais recente para CSS.
 Compatível com versões anteriores do CSS.
 A maioria das novas propriedades CSS3 já
estão implementadas em navegadores
modernos.
 Módulos mais importantes do CSS3:
◦ Selectors
◦ Box Model
◦ Backgrounds and Borders
◦ Image Values and Replaced Content
◦ Text Effects
◦ 2D/3D Transformations
◦ Animations
◦ Multiple Column Layout
◦ User Interface
 Permite adicionar múltiplas imagens de fundo
em um elemento
 Valores de cor RGBA são uma extensão dos valores
de cor RGB com um canal alfa - que especifica a
opacidade de uma cor (valor entre 0 e 1).
 Gradientes CSS3 permitem exibir transições
suaves entre dois ou mais modelos
especificados cores.
 Anteriormente, feito por imagens
 CSS3 define dois tipos de gradientes:
◦ Lineares: (para baixo / para cima / esquerda /
direita / diagonal)
◦ Radiais: (definido pelo seu centro)
 Adicionar sombras a texto e elementos HTML.
 Espalhamento horizontal, vertical e cor da
sombra
 Sombra com “borrão”
 Sombras em elementos
 Permitem que altere os valores de
propriedade durante um determinado
período.
 Transições em diversas propriedades, com
tempos diferentes
 Continuando a página do portal de notícias
esportivas, faça as seguintes adições à
página:
◦ Utilize divs com bordas arredondadas para cada
notícia;
◦ Adicione efeitos de transição nas divs que julgar
adequado
◦ Utilize sombras na div do conteúdo principal
◦ Utilize divs com gradiente linear ou radial
◦ Crie fundos com mais de uma imagem
◦ Utilize cores em RGBA
Arthur Emanuel de O. Carosia

CSS 3

  • 1.
  • 2.
     Padrão maisrecente para CSS.  Compatível com versões anteriores do CSS.  A maioria das novas propriedades CSS3 já estão implementadas em navegadores modernos.
  • 3.
     Módulos maisimportantes do CSS3: ◦ Selectors ◦ Box Model ◦ Backgrounds and Borders ◦ Image Values and Replaced Content ◦ Text Effects ◦ 2D/3D Transformations ◦ Animations ◦ Multiple Column Layout ◦ User Interface
  • 6.
     Permite adicionarmúltiplas imagens de fundo em um elemento
  • 7.
     Valores decor RGBA são uma extensão dos valores de cor RGB com um canal alfa - que especifica a opacidade de uma cor (valor entre 0 e 1).
  • 8.
     Gradientes CSS3permitem exibir transições suaves entre dois ou mais modelos especificados cores.  Anteriormente, feito por imagens  CSS3 define dois tipos de gradientes: ◦ Lineares: (para baixo / para cima / esquerda / direita / diagonal) ◦ Radiais: (definido pelo seu centro)
  • 11.
     Adicionar sombrasa texto e elementos HTML.  Espalhamento horizontal, vertical e cor da sombra  Sombra com “borrão”
  • 12.
     Sombras emelementos
  • 13.
     Permitem quealtere os valores de propriedade durante um determinado período.
  • 14.
     Transições emdiversas propriedades, com tempos diferentes
  • 15.
     Continuando apágina do portal de notícias esportivas, faça as seguintes adições à página: ◦ Utilize divs com bordas arredondadas para cada notícia; ◦ Adicione efeitos de transição nas divs que julgar adequado ◦ Utilize sombras na div do conteúdo principal ◦ Utilize divs com gradiente linear ou radial ◦ Crie fundos com mais de uma imagem ◦ Utilize cores em RGBA
  • 16.