desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das css3 Maurício Samy Silva

Transcrição

1 CSS3 desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das css3 Maurício Samy Silva Novatec

2 Copyright 2012 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. Editor: Rubens Prates Revisão gramatical: Marta Almeida de Sá Editoração eletrônica: Carolina Kuwabata Capa: Victor Bittow/Carolina Kuwabata Ilustração da capa: Roberto Coelho ISBN: Histórico das impressões: Dezembro/2011 Primeira edição Novatec Editora Ltda. Rua Luís Antônio dos Santos São Paulo, SP Brasil Tel.: Fax: novatec@novatec.com.br Site: Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec Dados Internacionais de Catalogação na Publicação (CIP) (Câmara Brasileira do Livro, SP, Brasil) Silva, Maurício Samy CSS3 : desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das CSS3 / Maurício Samy Silva ; [tradução Rafael Zanolli]. -- São Paulo : Novatec Editora, ISBN CSS (Linguagem de programação) 2. XHTML (Linguagem de programação) 3. Web sites - Criação 4. Web sites - Desenvolvimento 5. Web sites - Design I. Título CDD Índices para catálogo sistemático: 1. CSS3 : Linguagem de programação : Computadores : Processamento de dados VC

3 Sumário Agradecimentos Isenção de responsabilidade Sobre este livro Sobre o autor Introdução Capítulo 1 Fundamentos CSS Definições e conceitos CSS Definição Finalidade Histórico Regra CSS Categorias de valores CSS Tipos de valores CSS Vinculando folhas de estilo a documentos Estilos inline Estilos incorporados Estilos externos Módulos CSS Status dos módulos Capítulo 2 Módulo CSS Basic Box Model Box Model Bloco de conteúdo Box nível de bloco anônimo Box inline anônimo Diagrama do Box Model...50 Capítulo 3 Posicionamento CSS Esquemas de posicionamento CSS Esquema normal

4 8 CSS Esquema float Esquema absoluto Posicionamento com z-index Contexto para empilhamento...85 Capítulo 4 Seletores, cascata e herança Introdução Definições Seletor Árvore do documento Elemento-filho e elemento-pai Elemento descendente e elemento ancestral Elemento-irmão Elemento precedente Elemento subsequente Sintaxe para seletor Seletor universal Seletor tipo Seletor de atributo Seletor classe Seletor ID Seletor pseudoclasse Seletor pseudoelemento Seletor simples Grupamento de seletores Caracteres de combinação Sintaxe geral de um seletor Seletores por namespace Especificidade Herança CSS Efeito cascata Ordem de cascata Diretiva!important Capítulo 5 Background Introdução Propriedades background background-color background-image background-repeat background-attachment background-position background-clip background-origin

5 Sumário background-size Propriedade background Múltiplos backgrounds Capítulo 6 Bordas e sombras Introdução Propriedade border border-width border-style border-color border border-radius border-image Box Shadow Text Shadow Capítulo 7 Cores e opacidade Introdução Propriedade color hexadecimal e RGB transparent Palavra-chave currentcolor HSL HSLA RGBA Cores do SO Propriedade opacity Capítulo 8 Fontes Introdução Tipografia Fontes seguras Propriedade font-family Família serif Família sans-serif Família cursive Família fantasy Família monospace Propriedade font-style Propriedade font-variant Propriedade font-weight Propriedade font-size Propriedade font-stretch

6 10 CSS3 8.8 Propriedade font-size-adjust Propriedade font Obtendo fontes API fontes do Google Capítulo 9 Layout multicolunas Introdução Modelo multicolunas Propriedades CSS column-count column-width columns column-gap column-rule column-span column-fill break-* Overflow Capítulo 10 Media Queries Introdução Anatomia da media query Funcionalidades de mídia Exemplo Primeiro passo Segundo passo Terceiro passo Suporte Capítulo 11 Gradientes Introdução Gradiente linear Parâmetros da função gradiente Suporte a gradientes lineares Gradiente radial Repetição de gradientes Capítulo 12 Transformações 2D Introdução Sistema de coordenadas Transformações rotate() translatex()...296

7 Sumário translatey() translate() scalex() scaley() scale() skewx() skewy() skew() matrix() Múltiplas transformações Mudança da origem da transformação Exemplo Capítulo 13 Transformações 3D Introdução Propriedades transform-style perspective perspective-origin backface-visibility Funções perspective(n) rotate() translate() scale() skew() matrix() Capítulo 14 Transições CSS Introdução Propriedades transition-property transition-duration transition-timing-function transition-delay transition Exemplo Capítulo 15 Animações CSS Introdução Propriedades animation-name animation-duration animation-timing-function...363

8 12 CSS animation-iteration-count animation-direction animation-play-state animation-delay animation Exemplo Capítulo 16 Template Layout Introdução Visão geral Plugin CSS Template Layout Regra CSS para descrição do layout Propriedades display position ::slot() Exemplos Exemplo 1 Formulários Exemplo 2 Templates aninhados Exemplo 3 flutuando boxes Capítulo 17 Box Layout flexível Introdução Propriedades display flex-direction flex-order flex-pack flex-align Apêndice A Propriedades CSS Apêndice B Elementos da HTML Apêndice C Atributos da HTML Apêndice D Cores CSS Referências bibliográficas Índice remissivo