Como trabalhar com módulos css3

Para simplificar, os módulos CSS3 pode ser separada em em dez categorias: bordas, fundos, fontes, efeitos de texto, várias 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 fronteira para fazer cantos curvos, a sombra caixa 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 de 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 das 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 que você escolher e usar qualquer fonte hospedados 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 nem todos eles têm grande apoio browser. As propriedades que fazem atualmente têm suporte são justificar, estouro, sombra, quebra de palavra e quebra de linha.

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 trabalham agora, alguns ainda exigem prefixos estilo específicas do navegador. Mesmo assim, eles ainda são muito danado puro. Para melhores resultados, ajustar a contagem de coluna e largura da abertura.

transições: Sustente seu chapéu, agora você pode criar 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, é possível modificar qualquer um ou mais propriedades de um elemento, tais como alterar a largura de um objecto 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. Utilizá-los separadamente ou combinados para mover, escala, inclinação, rotação, esticar, e transformar 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 suficientemente frio, espere até ver o que as transições 3D fazer! Usando um método que transforma o objeto ao longo do X e / ou eixo Y, você pode fazer seus objetos parecem girar no espaço 3D, oferecendo aos espectadores uma chance de ver o lado invertido “back” 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 seletor 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 objetos diferentes que os convertem em elementos interativos para os visitantes do site. Por exemplo, você pode redimensionar camadas e textarea campos do formulário, invoque as chaves 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 nas formas e texto, aplicar efeitos de gradiente de fundo, e mover seus objetos daqui para lá.