Post on 07-Jul-2015
Cascading Style Sheets
Level 3
Introdução
• As Cascading Style Sheets começaram a ser desenvolvidas em 1994, pela necessidade de se formatar a informação do HTML;
• Em 1996 apareceu a especificação das Cascading Style Sheets Level 1 (CSS 1) e, em 1998, das CSS Level 2;
• CSS 3 ainda está em desenvolvimento, porém deve demorar menos que seus antecessores para ser implantado, devido ao suporte dos novos navegadores;
• A especificação do CSS 3 foi dividida em módulos, tornando mais rápida a aprovação e implementação dos elementos. A lista dos módulos pode ser vista aqui.
Compatibilidade
• Em CSS 3, cada motor de renderização é declarado de uma forma diferente:
• Webkit (Safari / Chrome):-webkit-atributo
Gecko (Firefox / Flock):-moz-atributo
Trident (Internet Explorer):atributo
Bordas
• border-color
– utiliza uma cor para cada 1px de borda
• Exemplo de border-color
– http://www.css3.info/preview/colored-border/
• border-image
– permite o uso de imagens na borda
• Exemplo de border-image
– http://www.css3.info/preview/border-image/
• border-radius
– controle de curvatura da borda
• Exemplo de border-radius
– http://www.css3.info/preview/rounded-border/
• box-shadow
– cria uma sombra no elemento HTML
• Exemplo de box-shadow
– http://www.css3.info/preview/box-shadow/
Backgrounds
• background-origin
– determina qual o ponto inicial de onde o background-position é calculado
• background-clip
– indica se o background aplica-se também na área da borda ou não
• background-size
– determina o tamanho da imagem de background
• múltiplos backgrounds
– agora é possível adicionar diversas imagens de background em um único elemento HTML
• Exemplo de múltiplos backgrounds
– http://www.css3.info/preview/multiple-backgrounds/
Texto
• text-shadow
– determina uma sombra para um texto
• Exemplo de text-shadow
– http://www.css3.info/preview/text-shadow/
• text-overflow
– maneira de demonstrar quando o texto ultrapassar a largura do elemento que o envolve
– existem dois valores: ellipsis e clip
• Exemplo de text-overflow
– http://www.css3.info/preview/text-overflow/
Outras novas propriedades
• resize– http://www.css3.info/preview/resize/
• outline– http://www.css3.info/preview/outline/
• font-face– http://www.css3.info/preview/web-fonts-with-font-face/
• múltiplas colunas– http://www.tableless.com.br/css3-columns
• recursos de voz– http://www.css3.info/preview/speech/
Seletores
• seletores CSS nos permitem manipular um ou vários elementos HTML sem a necessidade de IDs ou classes.
Seletores de Substring
• E[att^=“val”]
– Representa um elemento com o atributo att que começa com o prefixo “val”
• E[att$=“val”]
– Representa um elemento com o atributo att que termina com o sufixo “val”
• E[att*=“val”]
– Representa um elemento com o atributo att que contém ao menos uma instância do da substring“val”
Pseudo classes estruturais
• E:nth-child(n)– O valor (n) representa o enésimo filho do elemento pai
• E:first-child– Representa o primeiro filho do elemento pai
• E:last-child– Representa o último filho do elemento pai
• E:first-line– Refere-se a primeira linha do elemento
• E:first-letter– Refere-se a primeira letra do elemento
• Outros seletores
– http://maujor.com/tutorial/seletores-css3.php
– http://www.mateussouza.com/css/iniciando-com-css3
CSS Transformation eCSS Animation
• CSS Transformation permite a transformação de elementos HTML, como escala, rotação e translação.
• CSS Animation permite movimentar elementos HTML com a ação do usuário (click, hover, focus, etc).
• Exemplos de CSS Transformation e CSS Animation
– http://www.the-art-of-web.com/css/css-animation/
Gostaram? Agora imaginemas possibilidades comHTML 5 + CSS 3...
Obrigado :)Alexandre Romero Rodrigues