2012, Casa do Cdigo Todos os direitos reservados e protegidos pela Lei n9.610, de 10/02/1998.

Nenhuma parte deste livro poder ser reproduzida, nem transmitida, sem autorizao prvia por escrito da editora, sejam quais forem os meios: fotogrcos, eletrnicos, mecnicos, gravao ou quaisquer outros. Casa do Cdigo Livros para o programador Rua Vergueiro, 3185 - 8 andar 04101-300 Vila Mariana So Paulo SP Brasil

Agradecimentos
Nothing of me is original. I am the combined effort of everybody Ive ever known. Chuck Palahniuk, Invisible Monsters () Tive a ajuda de muitas pessoas durante a criao deste livro, e sou extremamente grato a elas pela sua participao durante os meses em que trabalhei nele: Ao Adriano Almeida e ao Paulo Silveira pela oportunidade nica de escrever este livro, e a ajuda de todos da Casa do Cdigo e da Caelum. A minha famlia e a minha namorada, pela pacincia e ajuda durante estes meses, por todas as noites e finais de semana dedicados a este projeto. A incrvel equipe da Plataformatec, que muito boa no que faz. Por todos os projetos, apresentaes, cafs e chopps compartilhados at ento - que muitos outros venham no futuro! A todos os meus colegas e amigos de projetos e empresas passadas - devo muito a todos pelo conhecimento compartilhado ao longo dos anos, que sem dvida foi muito importante para eu chegar at aqui. E a voc, leitor, que est prestes a ler o meu livro. Muito obrigado por dedicar o seu tempo e a sua ateno a ele. Espero contribuir para que voc crie timos projetos e faa a sua parte para criar uma web melhor.

Sumrio
O desenvolvimento web hoje . Por qu voc deve aprender HTML e CSS . O estado dos navegadores . . . . . . . . . . A complicao dos prefixos proprietrios . A longa e sinuosa estrada deste livro . . . Os primeiros passos com o nosso site . Escrevendo HTML, de dentro para fora . Adicionando formataes bsicas . . . . . Bordas e margens . . . . . . . . . . . . . . Um pouco de cor sempre bom . . . . . . Primeiro contato com imagens . . . . . . . Adicionando elementos secundrios . . . Faa para sua cidade tambm! . . . . . . HTML: o que mudou? . Escrevendo menos e fazendo mais . . Atributos personalizados . . . . . . . Tags novas para elementos antigos . Refatorao da pgina de So Paulo . Seja pragmtico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

O que todo desenvolvedor precisa saber sobre CSS . A incompatibilidade dos browsers e a razo dos resets de CSS . Compreendendo o Box model . . . . . . . . . . . . . . . . . . . . Utilizando pseudo elementos . . . . . . . . . . . . . . . . . . . . . Desenhando uma faixa com before e after . . . . . . . . . . . Decorando mensagens . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

Sumrio

Casa do Cdigo

. . .

Criando contedo atravs de CSS . . . . . . . . . . . . . . . . . . . . . Arquitete o seu CSS para o futuro . . . . . . . . . . . . . . . . . . . . . Gere relatrios inteligentes e simples com os estilos de impresso . .

O que voc consegue fazer com CSS . . . . . . .

A regra @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como utilizar servios de distribuio de fontes . . . . . . . . . . . . . Substituio de cones por fontes . . . . . . . . . . . . . . . . . . . . . Explore novas possibilidades com bordas . . . . . . . . . . . . . . . . Manipulao de cores com rgba e gradientes . . . . . . . . . . . . . . . Trabalhe com sombras e crie menus elegantes . . . . . . . . . . . . . . Combinando tudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Tomando controle da estrutura visual . . . . . . . .

A propriedade display . . . . . . . . . . . . . . . . . . . . . . . . . . . Flutue elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . O clearfix, uma classe obrigatria em seus projetos . . . . . . . . . . . Compreenda o uso de position . . . . . . . . . . . . . . . . . . . . . . . Crie a sua prpria janela modal . . . . . . . . . . . . . . . . . . . . . . Como escolher os mtodos para posicionar os seus elementos . . . . Grids - um padro de estrutura para as suas pginas . . . . . . . . . . Posicionando elementos com CSS . . . . . . . . . . . . . . . . . . . .

Melhorando os seus formulrios . . . . . . . . .

O que temos no HTML . . . . . . . . . . . . . . . . . . . . . . . . . . Formulrios HTML nos dispositivos mveis . . . . . . . . . . . . . . Criao do primeiro formulrio . . . . . . . . . . . . . . . . . . . . . . Alinhamento e estilos visuais nos campos e formulrios . . . . . . . . Exibio de mensagens de ajuda . . . . . . . . . . . . . . . . . . . . . . Mostre mensagens de erro . . . . . . . . . . . . . . . . . . . . . . . . . Levando o usurio direto ao que importa com o autofocus . . . . . . A flexibilidade do atributo placeholder . . . . . . . . . . . . . . . . . . Aplicando CSS em botes . . . . . . . . . . . . . . . . . . . . . . . . .

iv

Casa do Cdigo

Sumrio

Efeitos : Trabalhando com animaes e transies . Transformando elementos . . . . . . . . . . . . . . . . . . . . . . . Os efeitos rotate, scale, skew e translate em uma galeria de fotos . Transies de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . Transies na galeria de fotos . . . . . . . . . . . . . . . . . . . . . Um detalhe importante sobre transies e JavaScript . . . . . . . . Transformaes em D . . . . . . . . . . . . . . . . . . . . . . . . . Girar formulrios com apenas um clique . . . . . . . . . . . . . . . Utilizando animaes . . . . . . . . . . . . . . . . . . . . . . . . . . Comeando com keyframes . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

O universo fora dos desktops e notebooks . O que Responsive Web Design e porqu voc deve se preocupar . O funcionamento dos media queries . . . . . . . . . . . . . . . . . . . No uma questo de aparelhos . . . . . . . . . . . . . . . . . . . . . . Por um futuro melhor . . . . . . . . . . . . . . . . . . . . . . . . . . . Ferramentas - Frameworks, Plugins e Pr-processadores . Twitter Bootstrap . . . . . . . . . . . . . . . . . . . . . . HTML Boilerplate . . . . . . . . . . . . . . . . . . . . . Plugins em JavaScript . . . . . . . . . . . . . . . . . . . . Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . Polyfills . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pr-processadores . . . . . . . . . . . . . . . . . . . . . . tudo CSS e HTML . . . . . . . . . . . . . . . . . . . . No pare por aqui ndice Remissivo Bibliografia
Verso: . .

. . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .