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/