SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
Laboratório Web
CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE
DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT
CSS3
Tecnologias Web: Introdução às CSS3
!
• Propriedades: border-radius, text-shadow, box-shadow,
columns, transform, transitions, animation e @keyframes; 

• Opacity;

• RGBA;

• Gradients;

• Múltiplos backgrounds e background-size;

• Selectores: :first-letter, :first-line; :nth-child (child);

• @font-face;

• Media Queries;

• Meta tag “viewport”.
AGENDA
Logotipo desta nova
versão das CSS.
TECNOLOGIAS WEB
CSS3 - Compatibilidade
!
• Nem todas as propriedades e selectores CSS3 são
suportadas por todos os browsers.

• Para garantir essa compatibilidade por vezes é necessário
utilizar os seguintes prefixos:
PREFIXOS
-moz- Firefox
-webkit- Chrome, Android, Safari, iOS
-ms- Internet Explorer
-o- Opera
!
#div {
columns: 100px 3;
-webkit-columns: 100px 3;
-moz-columns: 100px 3;
}
TECNOLOGIAS WEB
CSS3 Propriedade: border-radius
!
• Define o raio da curvatura de uma borda de um elemento.

• Utiliza-se em elementos que tenham a propriedade border
ou background definida.
EXEMPLO BORDER-RADIUS
border-radius: 10px 20px 10px 20px;
!
Canto Superior Direito: 10px
Canto Superior Esquerdo: 20px
Canto Inferior Direito: 10px
Canto Inferior Esquerdo: 20px
TECNOLOGIAS WEB
CSS3 Propriedade: text-shadow
!
• Permite adicionar sombra a um texto.
EXEMPLO TEXT-SHADOW
text-shadow: 1px 1px 2px #999;
(text-shadow: h-shadow v-shadow blur color;)
!
h-shadow: posição horizontal da sombra.
v-shadow: posição vertical da sombra.
blur: distância do “blur”.
color: cor da sombra.
TECNOLOGIAS WEB
CSS3 Propriedade: box-shadow
!
• Permite adicionar sombra a um elemento.
EXEMPLO BOX-SHADOW
box-shadow: 10px 10px 5px #888888;
(box-shadow: h-shadow v-shadow blur spread color inset;)
!
h-shadow: posição horizontal da sombra.
v-shadow: posição vertical da sombra.
blur: distância do “blur”.

spread: tamanho da sombra.
color: cor da sombra.

inset: transforma a sombra em sombra interior (default:
outset).
TECNOLOGIAS WEB
CSS3 Propriedade: columns
!
• Permite criar múltiplas colunas de texto.
EXEMPLO COLUMNS
#div {
comuns-count: 3;
comuns-width: 100px;
}
!
Propriedades relacionadas:
column-count: número de colunas.
column-gap: espaço entre as colunas.
column-width: largura das colunas.
TECNOLOGIAS WEB
CSS3 Propriedade: transform
!
• Permite transformar elementos HTML de diferentes formas.
TRANSFORM
transform: tipo_de_transformação (valores);
!
Exemplos:
transform: rotate (45deg);
transform: rotateX (45deg);
transform: rotateY (45deg);
transform: skew (45deg);
transform: scale (0.5, 1);
transform: skew (30deg) scale(2,1.3) rotate(40deg);
TECNOLOGIAS WEB
CSS3 Propriedade: transitions
TRANSITIONS
Propriedades relacionadas:
transition-property: propriedade css.
transition-duration: tempo em segundos.
transition-timing-function: tipo de transição.
transition-delay: delay de transição em segundos.
!
Geral:
transition: propriedade tempo tipo delay;
!
Exemplo:
.box {
transitions: width 2s linear 0;
}
!
.box:hover {
width: 200px;
}
TECNOLOGIAS WEB
CSS3 Propriedade: transitions
MÚLTIPLAS TRANSITIONS
Exemplo:
.box {
transitions: width 0.3s, margin-top 0.3s;
}
!
.box:hover {
width: 200px;
margin-top: 20px;
}
!
Geral:
.box {
transitions: all 0.3s; /* Anima todas as propriedades */
}
TECNOLOGIAS WEB
CSS3 Propriedade: animation
!
• Permite criar animações e controlar os tempos da animação
através de keyframes.
ANIMATION
animation: name duration timing-function delay iteration-
count direction play-state;
!
name: nome da animação.
duration: duração da animação em segundos.
timing-function: tipo de movimento.
delay: o tempo de espera antes de iniciar a animação.
iteraction-count: número de vezes que se repete a
animação.
direction: direcção da animação.
play-state: estado da animação.
!
Exemplo:
animation: my_anim 3s linear 0 infinite forward running;
TECNOLOGIAS WEB
CSS3 Propriedade: animation
ANIMATION-TIMING-FUNCTION
animation-timing-function: tipo;
!
!
Exemplo:
animation-timing-function: linear;
animation-timing-function: ease; /* default */
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
TECNOLOGIAS WEB
CSS3 Propriedade: animation
ANIMATION-ITERATION-COUNT
animation-iteration-count: tipo;
!
Exemplo:
animation-iteration-count: 1; /* default */
animation-iteration-count: 3;
animation-iteration-count: infinite;
ANIMATION-DIRECTION
animation-direction: tipo;
!
Exemplo:
animation-direction: normal; /* default */
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
TECNOLOGIAS WEB
CSS3 @keyframes
!
• Permite declarar as instruções da animação.
@KEYFRAMES
Exemplos:
@keyframes my_anim {
from {margin-top: 0px; }
to {margin-top: 200px; }
}
!
@keyframes my_anim {
0% {margin-top: 0px; }
25% {margin-top: 150px; }
50% {margin-top: 75px; }
75% {margin-top: 150px; }
100% {margin-top: 0px; }
}
TECNOLOGIAS WEB
CSS3 Opacity
!
• Define a opacidade de um elemento.

• O valor 1 significa que o elemento está completamente
opaco e o valor 0 significa que o elemento está totalmente
transparente.
OPACITY
.elemento {
opacity: 0.5; /* 50% de transparência */
}
TECNOLOGIAS WEB
CSS3 RGBA
!
• Não é uma propriedade CSS mas sim um novo modelo para
declarar as cores introduzido nas CSS3.

• Permite especificar o nível de opacidade num valor RGB.
RGBA
.elemento {
color: rgba(0, 0, 0, 0.75);
/* A cor preta com 75% de opacidade */
}
TECNOLOGIAS WEB
CSS3 Gradients
!
• Permite adicionar gradientes ao background dos elementos.
GRADIENTS
background: linear-gradient (direcção, cor_1, cor_2 …);
background: radial-gradient (cor_1, cor_2 …);
background: repeating-linear-gradient (direcção, cor_1
width, cor_2 width …);
!
!
Exemplos:
background: linear-gradient (to top, #FFF, #000);
!
background: linear-gradient (to left, #333, #000);
!
background: radial-gradient (to left, #FFF, #333, #000);
!
background: repeating-linear-gradient (45deg, #CCC
0px, #CCC 5 px, #FFF 10px, #FFF 15px);
TECNOLOGIAS WEB
CSS3 Múltiplos Backgrounds e background-size
MÚLTIPLOS BACKGROUND
Exemplos:
#div {
background: url(imagem1.jpg), url(imagem2.jpg);
}
!
body {
background: url(imagem1.jpg) no-repeat top left,
url (image2.jpg repeat-x bottom left,
url (image3.jpg) repeat-y top right;
}
BACKGROUND-SIZE
#div {
background-size: 300px 150px;
}
TECNOLOGIAS WEB
CSS3 Selectores: :first-letter, :first-line, :nth-child()
SELECTORES
:first-letter Selecciona a primeira letra de um texto.
:first-line Selecciona a primeira linha de um texto.
:th-child (child) Selecciona um determinado elemento
filho.!
!
Exemplos:
:th-child (3) Selecciona o terceiro elemento filho.
:th-child (even) Selecciona todos os elementos filhos em
posição par.
:th-child (odd) Selecciona todos os elementos filhos em
posição impar.
TECNOLOGIAS WEB
CSS3 @font-face
!
• Permite importar fontes para utilizarmos num documento.
@FONT-FACE
@font-face {
font-family: “MyWebFont”;
/* nome da font na nossa CSS */
src: url (‘webfont.eot’); /* IE9 */
src: url (‘webfont.woff’) format (‘woff’);
src: url (‘webfont.ttf’) format (‘truetype’);
/* Safari, Android, iOS */
src: url (‘webfont.svg#svgFontName’) format (‘svg’);
/* iOS */
}
WOFF - Web Open Font
Format (Desenvolvido
pelo Mozilla e outras
organizações).
!
SVG / SVGZ - Scalable
Vector Graphics Font.
!
EOT - Embedded Open
Type (Desenvolvido pela
Microsoft).
!
OTF / TTF - Open Type
Font e Tru Type Font.
TECNOLOGIAS WEB
CSS3 @font-face
EXEMPLO
@font-face {
font-family: Gentium;
src: url (http://example.com/fonts/Gentium.woff)
format (‘woff’);
}
!
p {font-family: Gentium, serif; }
TECNOLOGIAS WEB
CSS3 media queries
!
• Permite declarar propriedades especificas para
determinados dispositivos (para larguras diferentes /
Responsive Web Design).
SINTAXE DE MEDIA QUERIE PARA CHAMAR UMA FOLHA DE ESTILO EXTERNA
<link rel=‘stylesheet’ media=‘ screen and
(min-width: 701px) and (max-width: 900px)’
href=‘css/medium.css’ />
ATRIBUTO @MEDIA
@media (max-width: 480px) {
/* estilos */
}
!
Podemos usar o atributo @media para escrever, dentro de
uma folha de estilo, regras para aplicar a larguras
especificas.
TECNOLOGIAS WEB
CSS3 media queries
EXEMPLOS MEDIA QUERIES COM ATRIBUTO @MEDIA
/* Smartphones (portrait e landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Estilos */
}
!
/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Estilos */
}
!
/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
/* Estilos */
}
TECNOLOGIAS WEB
CSS3 media queries
EXEMPLOS MEDIA QUERIES COM ATRIBUTO @MEDIA
/* iPads (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Estilos */
}
!
/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Estilos */
}
TECNOLOGIAS WEB
CSS3 media queries
EXEMPLOS MEDIA QUERIES COM ATRIBUTO @MEDIA
/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Estilos */
}
!
/* Desktops e laptops */
@media only screen
and (min-width : 1224px) {
/* Estilos */
}
!
/* Large screens */
@media only screen
and (min-width : 1824px) {
/* Estilos */
}
TECNOLOGIAS WEB
CSS3 media queries
EXEMPLO PRÁTICO DE USO DE MEDIA QUERIES
#menu ul li a {
color: #900;
text-decoration: none;
padding: 3px ;
display: block;
}
!
@media all and (min-width: 1001px) {
#menu ul li a:after {
font-size: 11px;
font-style: italic;
color: #666;
}
}
TECNOLOGIAS WEB
CSS3 meta tag “viewport”
!
• Uma meta tag criada pela Apple para os primeiros modelos
do iPhone. O padrão foi rapidamente adoptado pelos
browsers.

• A parte visível do nosso website.

• Permite controlar o layout mais indicado para o tamanho do
viewport (ecrã).

!
• Ex.: Num desktop o padrão de viewport é a largura, em
pixels, do browser (se redimensionarmos o browser iremos
ver menos do website - o viewport será menor).

!
• Se usarmos media queries para trabalhar o website de
forma responsiva, quando modificamos a largura do viewport
começamos a assistir à transformação operada por esta
tecnologia.
Declarar o viewport é
fundamental para o
correcto funcionamento
das media queries.
!
Ex.: Quando declaramos
que uma media querie
irá funcionar com a
“max-width: 400px”, é à
largura do viewport que
nos estamos a referir.
Quando o viewport for
menor que 400px, ele irá
ler os comandos de CSS
da media querie.
TECNOLOGIAS WEB
CSS3 meta tag “viewport”
VIEWPORT
<meta name=“viewport” content=“width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no “>
!
width: define o tamanho do viewport. O valor device-
width adapta o viewport ao tamanho do dispositivo.
!
initial-scale: define o zoom inicial da página.
!
maximuml-scale: define o zoom máximo permitido.


user-scalable: permissão para fazer zoom.
TECNOLOGIAS WEB
CSS3 meta tag “viewport”
!
• Ao assumir que esta meta tag está directamente relacionada
com o layout do website e não à marcação de conteúdo, faz
mais sentido que ela seja um elemento das CSS e não do
HTML. E é este o caminho que está a ser seguido pelo W3C
através da regra @viewport.
@VIEWPORT
@viewport {
width: device-width;
zoom:1;
min-zoom: 0.5;
max-zoom: 4;
user-zoom: fixed;
orientation: portrait;
}
BIBLIOGRAFIA
• Cederholm, D. (2010) CSS3 For Designers. A Book Apart.

!
REFERÊNCIAS ONLINE:
!
Especificações W3C para @fontface
http://www.w3.org/TR/css3-webfonts/#font-face-rule

!
Especificações W3C para Media Queries
http://www.w3.org/TR/css3-mediaqueries/

!
Especificações W3C para a meta tag Viewport
http://www.w3.org/TR/css-device-adapt/

Mais conteúdo relacionado

Semelhante a Laboratório Web 2013-2014 - CSS3

MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebRogério Moraes de Carvalho
 
Responsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelResponsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelSérgio Lima
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEERIvan Banov
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
 
Internet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesInternet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesGabriel Fernandes
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdfRubenManhia
 
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)Guilherme Serrano
 
Responsive web design
Responsive web designResponsive web design
Responsive web designTersis Zonato
 

Semelhante a Laboratório Web 2013-2014 - CSS3 (20)

MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
Responsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelResponsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possível
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
 
Pew2012
Pew2012Pew2012
Pew2012
 
Webstandards
WebstandardsWebstandards
Webstandards
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Html5
Html5Html5
Html5
 
SVG como exemplo de XML
SVG como exemplo de XMLSVG como exemplo de XML
SVG como exemplo de XML
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Internet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesInternet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websites
 
Psd to html
Psd to htmlPsd to html
Psd to html
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Criando sites com estilos
Criando sites com estilosCriando sites com estilos
Criando sites com estilos
 
Canvas element
Canvas elementCanvas element
Canvas element
 
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 

Mais de Ricardo Pereira Rodrigues

Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoRicardo Pereira Rodrigues
 
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de InformaçãoLaboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de InformaçãoRicardo Pereira Rodrigues
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaRicardo Pereira Rodrigues
 
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...Ricardo Pereira Rodrigues
 
Laboratório Web 2013-2014 - Introdução e Enquadramento
Laboratório Web 2013-2014 - Introdução e EnquadramentoLaboratório Web 2013-2014 - Introdução e Enquadramento
Laboratório Web 2013-2014 - Introdução e EnquadramentoRicardo Pereira Rodrigues
 

Mais de Ricardo Pereira Rodrigues (7)

2021 pontuario
2021 pontuario2021 pontuario
2021 pontuario
 
Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de InformaçãoLaboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
Laboratório Web 2013-2014 - Etapas na Produção: Arquitectura de Informação
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
 
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
 
Laboratório Web 2013-2014 - Introdução e Enquadramento
Laboratório Web 2013-2014 - Introdução e EnquadramentoLaboratório Web 2013-2014 - Introdução e Enquadramento
Laboratório Web 2013-2014 - Introdução e Enquadramento
 

Laboratório Web 2013-2014 - CSS3

  • 1. Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT CSS3
  • 2.
  • 3. Tecnologias Web: Introdução às CSS3 ! • Propriedades: border-radius, text-shadow, box-shadow, columns, transform, transitions, animation e @keyframes; • Opacity; • RGBA; • Gradients; • Múltiplos backgrounds e background-size; • Selectores: :first-letter, :first-line; :nth-child (child); • @font-face; • Media Queries; • Meta tag “viewport”. AGENDA Logotipo desta nova versão das CSS.
  • 4. TECNOLOGIAS WEB CSS3 - Compatibilidade ! • Nem todas as propriedades e selectores CSS3 são suportadas por todos os browsers. • Para garantir essa compatibilidade por vezes é necessário utilizar os seguintes prefixos: PREFIXOS -moz- Firefox -webkit- Chrome, Android, Safari, iOS -ms- Internet Explorer -o- Opera ! #div { columns: 100px 3; -webkit-columns: 100px 3; -moz-columns: 100px 3; }
  • 5. TECNOLOGIAS WEB CSS3 Propriedade: border-radius ! • Define o raio da curvatura de uma borda de um elemento. • Utiliza-se em elementos que tenham a propriedade border ou background definida. EXEMPLO BORDER-RADIUS border-radius: 10px 20px 10px 20px; ! Canto Superior Direito: 10px Canto Superior Esquerdo: 20px Canto Inferior Direito: 10px Canto Inferior Esquerdo: 20px
  • 6. TECNOLOGIAS WEB CSS3 Propriedade: text-shadow ! • Permite adicionar sombra a um texto. EXEMPLO TEXT-SHADOW text-shadow: 1px 1px 2px #999; (text-shadow: h-shadow v-shadow blur color;) ! h-shadow: posição horizontal da sombra. v-shadow: posição vertical da sombra. blur: distância do “blur”. color: cor da sombra.
  • 7. TECNOLOGIAS WEB CSS3 Propriedade: box-shadow ! • Permite adicionar sombra a um elemento. EXEMPLO BOX-SHADOW box-shadow: 10px 10px 5px #888888; (box-shadow: h-shadow v-shadow blur spread color inset;) ! h-shadow: posição horizontal da sombra. v-shadow: posição vertical da sombra. blur: distância do “blur”.
 spread: tamanho da sombra. color: cor da sombra.
 inset: transforma a sombra em sombra interior (default: outset).
  • 8. TECNOLOGIAS WEB CSS3 Propriedade: columns ! • Permite criar múltiplas colunas de texto. EXEMPLO COLUMNS #div { comuns-count: 3; comuns-width: 100px; } ! Propriedades relacionadas: column-count: número de colunas. column-gap: espaço entre as colunas. column-width: largura das colunas.
  • 9. TECNOLOGIAS WEB CSS3 Propriedade: transform ! • Permite transformar elementos HTML de diferentes formas. TRANSFORM transform: tipo_de_transformação (valores); ! Exemplos: transform: rotate (45deg); transform: rotateX (45deg); transform: rotateY (45deg); transform: skew (45deg); transform: scale (0.5, 1); transform: skew (30deg) scale(2,1.3) rotate(40deg);
  • 10. TECNOLOGIAS WEB CSS3 Propriedade: transitions TRANSITIONS Propriedades relacionadas: transition-property: propriedade css. transition-duration: tempo em segundos. transition-timing-function: tipo de transição. transition-delay: delay de transição em segundos. ! Geral: transition: propriedade tempo tipo delay; ! Exemplo: .box { transitions: width 2s linear 0; } ! .box:hover { width: 200px; }
  • 11. TECNOLOGIAS WEB CSS3 Propriedade: transitions MÚLTIPLAS TRANSITIONS Exemplo: .box { transitions: width 0.3s, margin-top 0.3s; } ! .box:hover { width: 200px; margin-top: 20px; } ! Geral: .box { transitions: all 0.3s; /* Anima todas as propriedades */ }
  • 12. TECNOLOGIAS WEB CSS3 Propriedade: animation ! • Permite criar animações e controlar os tempos da animação através de keyframes. ANIMATION animation: name duration timing-function delay iteration- count direction play-state; ! name: nome da animação. duration: duração da animação em segundos. timing-function: tipo de movimento. delay: o tempo de espera antes de iniciar a animação. iteraction-count: número de vezes que se repete a animação. direction: direcção da animação. play-state: estado da animação. ! Exemplo: animation: my_anim 3s linear 0 infinite forward running;
  • 13. TECNOLOGIAS WEB CSS3 Propriedade: animation ANIMATION-TIMING-FUNCTION animation-timing-function: tipo; ! ! Exemplo: animation-timing-function: linear; animation-timing-function: ease; /* default */ animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out;
  • 14. TECNOLOGIAS WEB CSS3 Propriedade: animation ANIMATION-ITERATION-COUNT animation-iteration-count: tipo; ! Exemplo: animation-iteration-count: 1; /* default */ animation-iteration-count: 3; animation-iteration-count: infinite; ANIMATION-DIRECTION animation-direction: tipo; ! Exemplo: animation-direction: normal; /* default */ animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse;
  • 15. TECNOLOGIAS WEB CSS3 @keyframes ! • Permite declarar as instruções da animação. @KEYFRAMES Exemplos: @keyframes my_anim { from {margin-top: 0px; } to {margin-top: 200px; } } ! @keyframes my_anim { 0% {margin-top: 0px; } 25% {margin-top: 150px; } 50% {margin-top: 75px; } 75% {margin-top: 150px; } 100% {margin-top: 0px; } }
  • 16. TECNOLOGIAS WEB CSS3 Opacity ! • Define a opacidade de um elemento. • O valor 1 significa que o elemento está completamente opaco e o valor 0 significa que o elemento está totalmente transparente. OPACITY .elemento { opacity: 0.5; /* 50% de transparência */ }
  • 17. TECNOLOGIAS WEB CSS3 RGBA ! • Não é uma propriedade CSS mas sim um novo modelo para declarar as cores introduzido nas CSS3. • Permite especificar o nível de opacidade num valor RGB. RGBA .elemento { color: rgba(0, 0, 0, 0.75); /* A cor preta com 75% de opacidade */ }
  • 18. TECNOLOGIAS WEB CSS3 Gradients ! • Permite adicionar gradientes ao background dos elementos. GRADIENTS background: linear-gradient (direcção, cor_1, cor_2 …); background: radial-gradient (cor_1, cor_2 …); background: repeating-linear-gradient (direcção, cor_1 width, cor_2 width …); ! ! Exemplos: background: linear-gradient (to top, #FFF, #000); ! background: linear-gradient (to left, #333, #000); ! background: radial-gradient (to left, #FFF, #333, #000); ! background: repeating-linear-gradient (45deg, #CCC 0px, #CCC 5 px, #FFF 10px, #FFF 15px);
  • 19. TECNOLOGIAS WEB CSS3 Múltiplos Backgrounds e background-size MÚLTIPLOS BACKGROUND Exemplos: #div { background: url(imagem1.jpg), url(imagem2.jpg); } ! body { background: url(imagem1.jpg) no-repeat top left, url (image2.jpg repeat-x bottom left, url (image3.jpg) repeat-y top right; } BACKGROUND-SIZE #div { background-size: 300px 150px; }
  • 20. TECNOLOGIAS WEB CSS3 Selectores: :first-letter, :first-line, :nth-child() SELECTORES :first-letter Selecciona a primeira letra de um texto. :first-line Selecciona a primeira linha de um texto. :th-child (child) Selecciona um determinado elemento filho.! ! Exemplos: :th-child (3) Selecciona o terceiro elemento filho. :th-child (even) Selecciona todos os elementos filhos em posição par. :th-child (odd) Selecciona todos os elementos filhos em posição impar.
  • 21. TECNOLOGIAS WEB CSS3 @font-face ! • Permite importar fontes para utilizarmos num documento. @FONT-FACE @font-face { font-family: “MyWebFont”; /* nome da font na nossa CSS */ src: url (‘webfont.eot’); /* IE9 */ src: url (‘webfont.woff’) format (‘woff’); src: url (‘webfont.ttf’) format (‘truetype’); /* Safari, Android, iOS */ src: url (‘webfont.svg#svgFontName’) format (‘svg’); /* iOS */ } WOFF - Web Open Font Format (Desenvolvido pelo Mozilla e outras organizações). ! SVG / SVGZ - Scalable Vector Graphics Font. ! EOT - Embedded Open Type (Desenvolvido pela Microsoft). ! OTF / TTF - Open Type Font e Tru Type Font.
  • 22. TECNOLOGIAS WEB CSS3 @font-face EXEMPLO @font-face { font-family: Gentium; src: url (http://example.com/fonts/Gentium.woff) format (‘woff’); } ! p {font-family: Gentium, serif; }
  • 23. TECNOLOGIAS WEB CSS3 media queries ! • Permite declarar propriedades especificas para determinados dispositivos (para larguras diferentes / Responsive Web Design). SINTAXE DE MEDIA QUERIE PARA CHAMAR UMA FOLHA DE ESTILO EXTERNA <link rel=‘stylesheet’ media=‘ screen and (min-width: 701px) and (max-width: 900px)’ href=‘css/medium.css’ /> ATRIBUTO @MEDIA @media (max-width: 480px) { /* estilos */ } ! Podemos usar o atributo @media para escrever, dentro de uma folha de estilo, regras para aplicar a larguras especificas.
  • 24. TECNOLOGIAS WEB CSS3 media queries EXEMPLOS MEDIA QUERIES COM ATRIBUTO @MEDIA /* Smartphones (portrait e landscape) */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Estilos */ } ! /* Smartphones (landscape) */ @media only screen and (min-width : 321px) { /* Estilos */ } ! /* Smartphones (portrait) */ @media only screen and (max-width : 320px) { /* Estilos */ }
  • 25. TECNOLOGIAS WEB CSS3 media queries EXEMPLOS MEDIA QUERIES COM ATRIBUTO @MEDIA /* iPads (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Estilos */ } ! /* iPads (landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Estilos */ }
  • 26. TECNOLOGIAS WEB CSS3 media queries EXEMPLOS MEDIA QUERIES COM ATRIBUTO @MEDIA /* iPads (portrait) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Estilos */ } ! /* Desktops e laptops */ @media only screen and (min-width : 1224px) { /* Estilos */ } ! /* Large screens */ @media only screen and (min-width : 1824px) { /* Estilos */ }
  • 27. TECNOLOGIAS WEB CSS3 media queries EXEMPLO PRÁTICO DE USO DE MEDIA QUERIES #menu ul li a { color: #900; text-decoration: none; padding: 3px ; display: block; } ! @media all and (min-width: 1001px) { #menu ul li a:after { font-size: 11px; font-style: italic; color: #666; } }
  • 28. TECNOLOGIAS WEB CSS3 meta tag “viewport” ! • Uma meta tag criada pela Apple para os primeiros modelos do iPhone. O padrão foi rapidamente adoptado pelos browsers. • A parte visível do nosso website. • Permite controlar o layout mais indicado para o tamanho do viewport (ecrã). ! • Ex.: Num desktop o padrão de viewport é a largura, em pixels, do browser (se redimensionarmos o browser iremos ver menos do website - o viewport será menor). ! • Se usarmos media queries para trabalhar o website de forma responsiva, quando modificamos a largura do viewport começamos a assistir à transformação operada por esta tecnologia. Declarar o viewport é fundamental para o correcto funcionamento das media queries. ! Ex.: Quando declaramos que uma media querie irá funcionar com a “max-width: 400px”, é à largura do viewport que nos estamos a referir. Quando o viewport for menor que 400px, ele irá ler os comandos de CSS da media querie.
  • 29. TECNOLOGIAS WEB CSS3 meta tag “viewport” VIEWPORT <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no “> ! width: define o tamanho do viewport. O valor device- width adapta o viewport ao tamanho do dispositivo. ! initial-scale: define o zoom inicial da página. ! maximuml-scale: define o zoom máximo permitido. 
 user-scalable: permissão para fazer zoom.
  • 30. TECNOLOGIAS WEB CSS3 meta tag “viewport” ! • Ao assumir que esta meta tag está directamente relacionada com o layout do website e não à marcação de conteúdo, faz mais sentido que ela seja um elemento das CSS e não do HTML. E é este o caminho que está a ser seguido pelo W3C através da regra @viewport. @VIEWPORT @viewport { width: device-width; zoom:1; min-zoom: 0.5; max-zoom: 4; user-zoom: fixed; orientation: portrait; }
  • 31. BIBLIOGRAFIA • Cederholm, D. (2010) CSS3 For Designers. A Book Apart. ! REFERÊNCIAS ONLINE: ! Especificações W3C para @fontface http://www.w3.org/TR/css3-webfonts/#font-face-rule ! Especificações W3C para Media Queries http://www.w3.org/TR/css3-mediaqueries/ ! Especificações W3C para a meta tag Viewport http://www.w3.org/TR/css-device-adapt/