Como trabalhar com CSS3 Modules

Para simplificar, os módulos CSS3 pode ser separada em em dez categorias: bordas, fundos, fontes, efeitos de texto, múltiplas colunas, transições, transições 2D, 3D transições, animações e interface do usuário. Dar uma breve olhada em cada módulo para ver o que ele pode fazer.

Fronteiras: O módulo de fronteira estende as capacidades da categoria fronteiras, adicionando opções para definir o raio de fronteira para fazer cantos curvos, a sombra caixa de para adicionar sombras, e a imagem de fronteira para o uso de gráficos ao estilo de fronteiras em vez de usar uma única cor por aresta.

Fundos: Atualmente, existem três novas adições à categoria de fundo com CSS3. O tamanho do fundo é especialmente útil para a criação de gráficos escaláveis, a origem fundo oferece três locais para posicionar imagens de fundo em relação ao modelo de caixa, e o clipe de fundo permite que as cores de fundo para ser cortada para o conteúdo de uma caixa, em vez de as bordas de uma caixa.

Além disso, CSS3 agora permite que você use várias imagens de fundo para qualquer recipiente.

fontes: Em vez de ser preso usando fontes web-seguro para todos os seus projetos, o novo @Tipo de letra propriedade permite-lhe escolher e usar qualquer fonte hospedado em seu servidor web. O que acontece é uma .ttf (True Type Fonts) ou .OTF (OpenType Fonts) arquivo de fonte é baixado automaticamente para o dispositivo do usuário, se e quando essa fonte não é detectado.

Você já pode ter visto um recurso semelhante em ação com sites usando fontes do Google e fontes Typekit. Esta regra de estilo estende essa capacidade, permitindo que você use suas próprias fontes do sistema. No entanto, não se esqueça de quebrar quaisquer leis de direitos autorais, especificando fontes protegidos por direitos autorais!

Efeitos de texto: Na verdade, existem 11 novas propriedades deste módulo, mas não todos eles têm grande apoio browser. As propriedades que fazem atualmente têm suporte são justificar, excesso, sombra, quebra de palavra e quebra automática.

Várias colunas: Sem ter que usar recipientes extras ou flutuadores, agora você pode criar várias colunas de texto com os dez propriedades da coluna múltiplas diferentes. Embora a maioria deles trabalhar agora, alguns ainda exigem prefixos estilo específicas do navegador. Mesmo assim, eles ainda são muito danado arrumado. Para obter melhores resultados, defina a contagem de coluna e largura lacuna.

transições: Sustente seu chapéu, agora você pode criar o movimento na página sem gifs animados, Flash ou javascript! Transições vêm em três sabores, regular, 2D e 3D. Com a transição regular, você pode modificar uma ou mais propriedades de um elemento, como alterar a largura de um objeto ao longo de um determinado número de segundos, quando combinado com o :flutuar pseudo-classe.

Transições 2D: Os itens neste módulo permitem manipular as propriedades 2D de um elemento. Usá-los separadamente ou combinadas para se mover, escala, inclinação, rotação, esticar e virar elementos ao longo de um plano horizontal ou vertical. Por exemplo, você pode fazer uma caixa de crescer e girar enquanto se move da esquerda para a direita.

Transições 3D: Como se transições 2D não eram arrefecer o suficiente, espere até ver o que as transições 3D fazer! Usando um método que transforma o objeto ao longo do eixo X e / ou Y, você pode fazer seus objetos parecem girar no espaço 3D, oferecendo aos espectadores uma chance de ver o revertida # 147-back # 148- lado de um objeto.

Embora o suporte ao navegador é limitado para transformações mais avançadas, eventualmente, você vai ser capaz de girar, redimensionar e mover ao longo do X, Y e Z., entre outras coisas. Simplesmente poderoso.

animações: Ok, o que acontece quando você coloca todas essas novas técnicas de transformação juntos? animações CSS3, bebê - o tipo que pode substituir GIFs animados, Flash, e até mesmo alguns javascript. Toda a magia acontece por meio de ligação a nova @keyframes propriedade para um selector usando a propriedade de animação com um nome e duração especificada.

Por exemplo, você pode alterar a posição e cor de fundo de um objeto para que o objeto tem a aparência de morphing através do espaço, e então você pode incluir o código para fazer a ordem inversa de animação e continuar loop indefinidamente.

Interface de usuário: Com essas novas propriedades, você pode adicionar propriedades a diferentes objetos que as convertem em elementos interativos para os visitantes do site. Por exemplo, você pode redimensionar camadas e textarea campos do formulário, invocar as teclas de tabulação e setas do teclado, e criar um esboço de deslocamento que se estende além da borda fronteira.

Agora que você tem uma visão geral dos novos módulos, você pode descobrir mais sobre o que eles podem fazer. Por exemplo, você pode criar sombras em formas e texto, aplicar efeitos de gradiente de fundo, e mover seus objetos daqui para lá.