28 Efectos CSS3 de Vanguardia para Modernizar tu Web

Con CSS podemos hacer muchas cosas: crear efectos bonitos, hacer modelos, construir diferentes formas, etc. Poner un CSS perfecto en tu aplicación no es difícil hoy en día. Hay miles de efectos y tutoriales disponibles en internet y gratis. Elegir la combinación correcta de efectos ideales es una tarea realmente dura y la mayoría parecen un poco anticuados o pasados de moda. Hemos recopilado algunos increíbles efectos CSS3 que te ayudarán a dar a tu web un aspecto moderno con gran experiencia de usuario. Eres libre de jugar con el código para generar grandes resultados.

28. Texto 3D

Da a tu texto de encabezado un aspecto 3D con fuentes geniales y efectos de sombra impresionantes.

27. Iconos Planos

El set puro de Iconos Planos Iconex (4 iconos), diseñado por Alireza Attari.

26. Espectro de Color

Esto es lo que obtienes mezclando colores con box-shadow. El espectro de color es una progresión entre 3 colores.

25. Metro UI

La Metro UI inspirada en el diseño de Windows 8, creada completamente con CSS3. Los iconos se extraen de FontAwesome.

24. Trazo Elástico

Este es un trazo elástico del texto con hermoso esquema de color y los efectos están hechos con CSS y SVG.

Leer: 50+ Hermosos Ejemplos de Tipografía para tu Inspiración

23. Formas en Capas

Hermosas formas en capas y coloreadas (escritas completamente en CSS), diseñadas por Snhasani.

22. Espiral CSS

Una animación espiral nublada en CSS que puede usarse como icono de carga.

21. Animación de Texto

Yoann creó este increíble efecto de marquesina con animación de texto. El efecto de alternancia de la segunda palabra se ve genial.

20. Sombra Larga Plana

Esta es la mezcla definitiva de sombras con variables de desvanecimiento, sombras largas y variable de ángulo.

19. Criaturas CSS

Los hermosos iconos interactivos hechos completamente con HTML y CSS.

18. Botón Volteo 3D

Un simple botón de volteo 3D CSS3 sin usar JavaScript ni imágenes.

17. Transformar Texto con Sombra

Esta es una sombra de texto CSS diseñada con técnicas avanzadas de tipografía usando lettering.js.

16. Arcoíris CSS

Este es un arcoíris de círculo completo con un simple efecto hover.

15. Error 404 Colorido con Glitch

El increíble efecto glitch (más vibración) hecho con CSS y un poco de JavaScript.

Leer: 100+ Páginas de Error 404 Creativas y Divertidas

14. Feedback UI

Este es un montón de ideas de feedback para tus botones. Es solo una inspiración para dar a tu front-end UI más dinamismo.

13. Acordeón Horizontal

El Acordeón Horizontal hecho con CSS puro. Incluye elementos (en lugar de imágenes) y fuente Genericons para iconos de redes sociales.

12. Ilusión de Círculo

Una ilusión de círculo con movimiento de Tusi, diseñada por Jaime Caballero. Puedes usarlo como barra/icono de carga de página.

11. Contador de Segundos

Un contador elegante perfecto para plantillas "próximamente".

Leer: 40+ Hermosas Plantillas En Construcción y Próximamente

10. CSS Text-FX

Se crea añadiendo luz tenue al texto, dándote destellos irregulares.

9. Menú CSS

Un menú móvil moderno con animaciones y transiciones CSS3.

8. Slider de Presupuesto

El simple slider CSS + jQuery en diseño 3D, inspirado por Erik Deiner.

7. Sombra de Texto Animada

Este patrón animado de text-shadow usa -webkit-background-clip: text y linear-gradient para simular sombra de texto rayada.

6. Imagen Domino 3D con Subtítulos CSS

Este es un efecto hover 3D responsivo con mejor marcado semántico, menos pseudo-elementos y menos CSS.

5. Radio Click Through

Un simple slider de imágenes usando botones de radio, escrito completamente en CSS.

4. Botones Fantasma con Gradiente

Los Botones Fantasma con Gradiente y texto diseñados utilizando border-image y box-shadows.

3. Botones Toggle Blanditos

La simulación de botones de goma blanditos, diseñados por Justin Windle.

Recomendado: Recursos Frescos para Diseñadores Web

2. Efectos de Pila Simples

Un conjunto de efectos toggle que muestra cómo crear efectos de pila simples usando perspectiva y transformación 3D.

1. SpinKit

SpinKit (una colección de indicadores de carga) usa animaciones CSS para crear animaciones suaves y personalizables.

Ahora Leer: 26 Plugins jQuery Modernos Para Mejorar tu Web