Laboratório Web 2013-2014 - CSS3

673 views

Published on

Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
673
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Laboratório Web 2013-2014 - CSS3

  1. 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. 2. 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.
  3. 3. 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; }
  4. 4. 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
  5. 5. 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.
  6. 6. 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).
  7. 7. 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.
  8. 8. 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);
  9. 9. 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; }
  10. 10. 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 */ }
  11. 11. 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;
  12. 12. 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;
  13. 13. 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;
  14. 14. 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; } }
  15. 15. 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 */ }
  16. 16. 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 */ }
  17. 17. 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);
  18. 18. 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; }
  19. 19. 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.
  20. 20. 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.
  21. 21. 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; }
  22. 22. 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.
  23. 23. 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 */ }
  24. 24. 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 */ }
  25. 25. 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 */ }
  26. 26. 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; } }
  27. 27. 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.
  28. 28. 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.
  29. 29. 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; }
  30. 30. 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/

×