O CSS3 introduziu inúmeras possibilidades para os designers de UX, e a melhor coisa sobre eles é que as partes mais legais são realmente simples de implementar.
Apenas algumas linhas de código proporcionarão um incrível efeito de transição que estimulará seus usuários, aumentará o engajamento e, em última análise, quando usado bem, aumentará suas conversões. Além do mais, esses efeitos são acelerados por hardware e um aprimoramento progressivo que você pode usar agora.
Aqui estão 8 efeitos realmente simples que irão adicionar vida à sua interface e sorrisos para os rostos dos seus usuários.
Todos esses efeitos (barra 1) são controlados com a propriedade de transição. Assim, podemos ver esses efeitos funcionando, vamos configurar um div em uma página HTML:
Tendo feito isso, defina sua largura e altura (para que tenha dimensões), sua cor de fundo (para que possamos vê-lo) e sua propriedade de transição.
A propriedade de transição possui três valores: as propriedades para a transição (no nosso caso, todas elas) a velocidade da transição (no nosso caso, 0,3 segundos) e um terceiro valor que permite alterar como a aceleração e desaceleração são calculadas, mas nós Vou ficar com o padrão, deixando em branco.
Agora tudo o que precisamos fazer é mudar as propriedades, e elas vão animar para nós…
Se você gostaria de acompanhar você pode baixe os arquivos de demonstração aqui.
Fazer as coisas desaparecerem é uma solicitação bastante comum dos clientes. É uma ótima maneira de enfatizar a funcionalidade ou chamar a atenção para uma chamada à ação.
Os efeitos de aparecimento gradual são codificados em duas etapas: primeiro, você define o estado inicial; Em seguida, você define a alteração, por exemplo, em foco:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Certifique-se de definir a classe do seu div para "fade" para ver isso funcionando.)
Para cultivar um elemento, você costumava usar sua largura e altura, ou seu preenchimento. Mas agora podemos usar a transformação do CSS3 para ampliar.
Defina a classe do seu div para "crescer" e, em seguida, adicione este código ao seu bloco de estilo:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}Transformações CSS têm vários usos diferentes e um dos melhores é transformar a rotação de um elemento. Dê ao seu div a classe "girar" e adicione o seguinte ao seu CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D sombras foram desaprovadas por um ano ou mais, porque eles não eram vistos como compatíveis com design plano, que é obviamente um absurdo, eles funcionam fantasticamente bem para dar um feedback do usuário sobre suas interações e trabalhar com interfaces 3D planas ou falsas .
Esse efeito é obtido adicionando-se uma sombra de caixa e, em seguida, movendo-se o elemento no eixo x usando as propriedades de conversão e conversão para que ele apareça fora da tela.
Dê ao seu div a classe “threed” e adicione o seguinte código ao seu CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Um dos estilos de botão mais quentes agora é o botão fantasma; um botão sem fundo e uma borda pesada. Podemos, é claro, adicionar uma borda a um elemento simplesmente, mas isso mudará a posição do elemento. Poderíamos corrigir esse problema usando o dimensionamento de caixa, mas uma solução muito mais simples é a transição em uma borda usando uma sombra de caixa de inserção.
Dê ao seu div a “borda” da classe e adicione o seguinte CSS aos seus estilos:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}