Efeitos que você pode fazer com Cascading Style Sheets
CSS3, a última edição do Cascading Style Sheets, introduz avanços na manipulação de design. Destes, alguns novos recursos que definem gradientes de cor, graus de transparência, e mesmo reflexões são definitivamente vale a pena conferir!
No passado, se você queria um gradiente de cor, você teve que projetar imagens bitmap para o efeito. Agora CSS permite que você encher recipientes com gradientes lineares e radiais que fazem uma transição ainda de uma cor para outra, ou de uma cor em várias cores. Você também pode controlar a forma como o gradiente enche o recipiente.
O mais interessante é o fato de que agora você pode usar gradientes CSS como máscaras de imagem que incorporam transparência alfa-canal. Ao definir a imagem que você está usando como uma máscara - e associar essa imagem com um elemento ou outra imagem como parte da definição - você pode fazer esse elemento gradualmente desaparecer na aparência, revelando o que fundo tinha sido escondido por baixo. Esta capacidade permite alguns efeitos em camadas interessantes em seu design do site.
Para criar um reflexo (onde a imagem parece ser espelhada na superfície abaixo) usando apenas CSS, você precisa usar uma combinação de configurações de transformação e recipientes, mas o efeito líquido é, no entanto, um efeito de reflexão. Essencialmente, você cria dois recipientes - um para a imagem principal e um para a reflexão. Através da aplicação de transformar efeitos ao recipiente reflexão que primeiro transformar a imagem de cabeça para baixo, em seguida, esmagar a sua altura e, em seguida, adicione uma máscara de transparência, você acaba com uma reflexão convincente como mostrado na figura a seguir. A beleza é que, com esta técnica, você tem um gráfico normal, com a opção de incluir uma reflexão - uma reflexão que é dinamicamente configurável - tudo sem o uso de Photoshop.
efeitos de sombra CSS
Agora é possível usar o CSS para adicionar sombras a elementos - outro efeito muito legal. Antes de CSS3, sombras semi-transparentes só foram possíveis imagem bitmap com, especificamente usando o formato PNG que suporta transparência.
Simplesmente ajustando as cores ea quantidade de deslocamento e desfoque, você pode criar efeitos muito diferentes. Observe que, no caso do box-shadow (a terceira imagem na figura a seguir) é necessário ter duas linhas de código imediatamente a seguir - um para WebKit e um para Moz. Estes são para apoiar os navegadores Safari e Firefox, respectivamente.
Cantos arredondados
A figura a seguir mostra um exemplo da nova propriedade border-radius CSS3 em ação. Ao definir um valor para esta propriedade - confira as duas últimas linhas do código CSS, onde o valor é definido como 10 pixels - você controla o quão grande a curva de canto aparece. Antes da introdução da propriedade border-radius, efeitos de bordas arredondadas só foram possíveis através da utilização de gráficos de bitmap.
efeitos de animação
Usando CSS3, agora você pode aplicar vários 2D fresco e efeitos de animação 3D usando a propriedade transformar. Esta propriedade contém uma série de funções, tais como escala, rotação, inclinação e perspectiva que você pode definir e se combinam para afetar a animação de várias maneiras. Você pode até mesmo definir efeitos de transição para o controle como o objeto se transforma, e quanto tempo dura.
Efeitos de transição também pode ser aplicada a ligações normais. Por exemplo, se normalmente você rolar um link para ver um destaque, destaca-se tudo de uma vez. Usando as propriedades chamados de transição de propriedade e de transição de duração, você pode fazer o fade destaque lentamente - e especificar quantos segundos leva para fazê-lo.
Quanto aos efeitos 3D, se você já viu o aplicativo para iPhone do tempo que parece # 147-flip sobre o # 148- para que você possa configurar suas cidades, você está testemunhando efeitos CSS3 em ação. Usando a propriedade perspectiva e especificar valores para diferentes funções de transformação, tais como perspectiva, rotação, inclinação e, em escala, você pode ficar muito criativo com a apresentação da sua interface de usuário.