Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Laboratório Web 2013-2014 - CSS3

700 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
  • Be the first to comment

  • Be the first to like this

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/

×