Efeitos que você pode fazer com folhas de estilo em cascata

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!

Video: Como fazer cascata de flores para decoração artesanato Pinterest

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 até mesmo de uma cor para outra, ou de uma cor em várias cores. Você também pode controlar 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 uma reflexão (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 contêineres - 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.

Video: FONTE DE ÁGUA CASCATA DE PAREDE

efeitos de sombra CSS

Agora é possível usar CSS para adicionar sombras a elementos - outro efeito muito legal. Antes 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 da caixa-sombra (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 seguinte mostra um exemplo da nova propriedade fronteira-raio CSS3 em acçã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 canto arredondado só foram possíveis através do uso 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 sua 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 aplicado às ligações normais. Por exemplo, se normalmente você rolar um link para ver um destaque, destaca 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 aparece a “virar” para permitir que você configurar suas cidades, você está testemunhando efeitos CSS3 em ação. Utilizando a propriedade perspectiva e especificar valores para diferentes transformam funções como perspectiva, rotação, inclinação, e escala, você pode ficar muito criativo com a apresentação da sua interface de usuário.