28 efeitos CSS3 de última geração para modernizar seu site

Podemos fazer muitas coisas com CSS, como criar efeitos bonitos, fazer modelos, construir formas diferentes, etc. Colocar um CSS perfeito em seu aplicativo não é difícil hoje em dia. Existem milhares de efeitos e tutoriais disponíveis na internet e também de graça. Escolher a combinação certa de efeitos ideais é realmente uma tarefa difícil e a maioria deles parece um pouco desatualizada ou antiquada. Reunimos alguns efeitos CSS3 incríveis  isso ajudará você a dar ao seu site uma aparência moderna com ótima experiência do usuário. Você é livre para brincar com o código para gerar ótimos resultados.

28. Texto 3D

Dê ao seu texto de título uma aparência 3D com fontes incríveis e efeitos de sombra incríveis.

27. Ícones planos

O CSS puro Iconex Flat Icon Set (4 ícones), projetado por Alireza Attari.

26. Espectro de cores

Isso é o que você obtém misturando cores com box-shadow. O espectro de cores é uma progressão entre três cores.

25. IU metropolitana

A Metro UI inspirada no design do Windows 8, inteiramente criada com CSS3. Os ícones são extraídos do FontAwesome.

24. Curso Elástico

Este é o traço elástico do texto com um lindo esquema de cores e os efeitos são feitos com CSS e SVG.

Leia:Mais de 50 belos exemplos de tipografia para sua inspiração

23. Formas em camadas

Lindas formas coloridas e em camadas (totalmente escritas em CSS), projetadas por Snhasani.

22. CSS espiral

Uma animação CSS em espiral nebulosa que pode ser usada como ícone de carregamento.

21. Animação de texto

Yoann criou este incrível efeito de ticker com animação de texto. O efeito de alternância da segunda palavra parece muito legal.

20. Sombra Longa Plana

Este é o mixin de sombras definitivo, repleto de variáveis de fade, sombras longas e variável de ângulo.

19. Criaturas CSS

Os lindos ícones interativos feitos inteiramente com HTML e CSS.

18. Botão de virar 3D

Um simples botão giratório 3D CSS3 sem JavaScript e sem imagem.

17. Transformar texto com sombra

Esta é uma sombra de texto CSS projetada com técnicas avançadas de tipografia usando lettering.js.

16. Arco-íris CSS

Este é um arco-íris de círculo completo com um efeito simples de passar o mouse.

15. Glitchy colorido 404

O incrível efeito de glitch (mais vibração) feito com CSS e um pouco de JavaScript.

Leia:Mais de 100 páginas de erro 404 criativas e engraçadas

14. Feedback da IU

Este é um monte de ideias de feedback para seus botões. Esta é apenas uma inspiração para dar mais dinamismo à sua interface de usuário front-end.

13. Acordeão Horizontal

O Acordeão Horizontal feito com CSS puro. Inclui elementos (em vez de imagens) e fonte Genericons para os ícones de redes sociais.

12. Ilusão de círculo

Uma ilusão de círculo com movimento Tusi, desenhada por Jaime Caballero. Você pode usá-lo como uma barra/ícone de carregamento de página.

11. Contador de segundos

Um balcão elegante perfeito para modelos “em breve”.

Leia:Mais de 40 lindos modelos em construção e em breve

10. Texto CSS-FX

Ele é criado adicionando luz fraca ao texto, gerando flashes irregulares.

9. Menu CSS

Um menu móvel moderno com animações e transições CSS3.

8. Controle deslizante de orçamento

O controle deslizante CSS + jQuery simples em design 3D, inspirado em Erik Deiner.

7. Sombra de texto animada

Este padrão de sombra de texto animado usa -webkit-background-clip:text e linear-gradient para simular sombra de texto listrada.

6. Imagem Domino legendada em CSS 3D

Este é um efeito de foco 3D responsivo com melhor marcação semântica, menos pseudoelementos e menos CSS.

5. Clique de rádio

Um controle deslizante de imagem simples usando botões de opção, escrito inteiramente em CSS.

4. Botões fantasma gradiente

Os botões gradientes fantasma e o texto projetados utilizando imagem de borda e sombras de caixa.

3. Botões de alternância moles

A simulação de botões de borracha moles, projetados por Justin Windle.

Recomendado:novos recursos para web designers

2. Efeitos de pilha simples

Um conjunto de efeitos de alternância que mostra como criar efeitos de pilha simples usando perspectiva e transformação 3D.

1. SpinKit

SpinKit (uma coleção de indicadores de carregamento) usa animações CSS para criar animações suaves e personalizáveis.

Leia agora:26 plug-ins jQuery modernos para tornar seu site melhor