11 proyectos CSS experimentales que te dejarán boquiabierto
Hay muchas cosas que puede hacer solo con CSS y un navegador web. A los grandes desarrolladores les encanta ir más allá y mostrar cuánto es posible.
Si bien los proyectos experimentales no siempre son útiles en los sitios de producción, son increíblemente inspiradores y educativos.
Hemos organizado varios proyectos de CSS que muestran el verdadero poder de CSS. Todos están alojados en CodePen, por lo que incluso puede estudiar y clonar el código fuente para ver cómo funcionan.
1. Barras de carga de gradiente
Esto Página de carga de Sass utiliza degradados animados y elementos de tamaño variable para crear un efecto de carga repetida.
La mayoría de la gente debería reconocer esta animación de carga de Facebook que usa una versión más pequeña de este cargador de barra vertical. Pero la mayoría de los cargadores web utilizan GIF animados, ya que las imágenes son más compatibles con todos los navegadores.
Esta barra de carga de CSS3 demuestra que con un poco de pensamiento creativo puede reconstruir casi cualquier estilo de animación que desee.
Ver la pluma Barras de carga por MaxStalker (@MaxStalker) en CodePen.
2. Animación del sistema solar
Este es uno de los proyectos CSS más complejos que pude encontrar en línea. Esta dinámica diseño del sistema solar por Malik Dellidj se ejecuta en CSS puro sin ninguna imagen.
Cada planeta se representa en CSS, incluidas las velocidades de rotación. Este proyecto está destinado a ser un modelo preciso del sistema solar e incluso presenta un fondo interestelar realista para arrancar.
No puedo imaginar cuánto tiempo tomó esto solo para hacer los íconos de los planetas, y mucho menos obtener las velocidades de animación correctas. Pero donde hay voluntad, hay un camino.
Ver la pluma Animación del sistema solar – CSS puro por Malik Dellidj (@kowlor) en CodePen.
3. Buscaminas de CSS puro
Nunca pensé que llegaría el día en que se pudiera jugar al clásico buscaminas de Windows usando CSS puro. Sin embargo, gracias al desarrollador Bali Balo, ese día ha llegado.
Tenga en cuenta que esto no funciona exactamente tan bien como el Buscaminas tradicional porque no lleva la puntuación correctamente. Pero registra el tiempo con precisión y no usa ni una pizca de JavaScript.
De alguna manera, incluso la interfaz parece sorprendentemente cercana a la interfaz de usuario del Buscaminas original y todo se ejecuta en CSS. Si bien puede que no sea una réplica perfecta, está lo suficientemente cerca como para hacerme jugar algunas rondas.
Ver la pluma Buscaminas de CSS puro por Bali Balo (@bali_balo) en CodePen.
4. Alternancia de día y de noche
En la superficie este interruptor de palanca puede parecer bastante simple. Se ejecuta a través de una entrada de casilla de verificación y pasa datos al backend, aunque esa no es realmente la parte impresionante.
Este conmutador tiene algunas características que lo convierten en uno de los mejores interruptores de encendido / apagado de la interfaz:
- El icono de alternar cambia de un sol a una luna
- Las estrellas y las nubes se animan mientras cambian
- Está diseñado con CSS 100% puro
De alguna manera, este interruptor de encendido / apagado detecta cada clic del usuario y usa ese evento para animar el área de alternancia día / noche a la vista. Los diseños de los íconos del sol y la luna también están muy bien estilizados considerando que se ejecutan únicamente en CSS.
Ver la pluma Alternar puro Css «día y noche» por Benjamin Réthoré (@bnthor) en CodePen.
5. Seguimiento del mouse CSS
El seguimiento del mouse tradicional es el trabajo de JavaScript que informa las coordenadas X / Y del usuario en la página.
Técnicamente, todavía necesita JavaScript para recopilar estas coordenadas y hacer algo útil con ellas. Pero este fragmento muestra que puede diseñar una función de seguimiento del mouse CSS pura que siga cada movimiento del usuario.
Realmente no puedo pensar en un uso práctico para esto, pero podría ser divertido en un sitio de bromas.
Ver la pluma Seguimiento experimental del mouse con CSS puro de Momcilo Popov (@Momciloo) en CodePen.
6. Parque de atracciones plano
Todos hemos visto iconos e ilustraciones vectoriales diseñados para la web. Pero, ¿qué pasa con las ilustraciones vectoriales de página completa diseñadas con código CSS y SVG sin procesar?
Esto diseño de parque de atracciones es un proyecto experimental que solo funciona en navegadores compatibles con SVG. Sin embargo, en esos navegadores modernos se reproduce sin problemas y cada elemento tiene una ubicación muy realista en la página.
Las animaciones son ciertamente impresionantes, pero es el precisión de los elementos SVG que también me llaman la atención. En unos años, podríamos encontrar este tipo de ilustraciones en la web ejecutándose únicamente en código sin archivos de imagen.
Ver la pluma Parque de atracciones de diseño plano svg por Lina (animación impulsada por CSS) por Vladimir Gashenko (@gxash) en CodePen.
7. Möbius en 3D
Diseñar una animación CSS repetida como el concepto de bandas de Möbius es bastante duro. ¿Pero agregar algunos elementos 3D y diferentes gradientes? Ahora tienes un verdadero desafío.
Este fragmento es bastante impresionante considerando lo suave que se ve y lo poco que se usa el código (solo 90 líneas de CSS). Con Haml solo necesitas 6 líneas de código para crear también el concepto completo.
Admito que esto no sería muy útil en un sitio web real, pero es un testimonio de lo mucho que puede hacer con unas pocas docenas de líneas de HTML y CSS.
Ver la pluma Möbius 6hedrons (CSS puro) por Ana Tudor (@thebabydino) en CodePen.
8. Creador de mapas personalizados
Después de usar esta aplicación web durante unos segundos, puede estar seguro de que se ejecuta en JavaScript. Los comportamientos dinámicos como la rotación 3D y la ubicación del terreno son signos de una aplicación web JS agradable.
Pero esta interfaz de usuario del creador de mapas de Vincent Durand es en realidad 100% CSS puro. Las flechas para la rotación, el efecto de rotación en sí y todas las funciones de hacer clic para colocar se ejecutan en CSS.
Vale la pena mencionar cómo todo este concepto se representa también con cubos 3D. Los bloques en sí funcionan como elementos 3D y puedes rotar los cubos simplemente colocándolos.
Sin duda, uno de los usos más locos de CSS que he visto en mucho tiempo.
Ver la pluma Creador de mapas CSS completo por Vincent Durand (@onediv) en CodePen.
9. Iconos Pure CSS iOS 7
Este proyecto es un poco menos interactivo pero igual de impresionante. El desarrollador Peter Schmiz recreó todos los Íconos de la aplicación iOS 7 utilizando HTML y CSS puros.
Ninguno de estos iconos utiliza SVG o archivos de imagen. Cada elemento de cada ícono está codificado en HTML con un elemento span / div, luego se diseña usando CSS. ¡La parte más loca es lo precisos que son!
El conjunto completo incluye 22 iconos y todos son muy acertados. Lo que más me impresiona es la atención al detalle de íconos como Mapas y Clima. Una prueba más de que con suficiente tiempo y paciencia puedes diseñar prácticamente cualquier cosa en CSS.
Ver la pluma Iconos de iOS 7 con CSS puro por Peter Schmiz (@peterschmiz) en CodePen.
10. Cargador holgado de un solo elemento
La recreación de la animación de carga de Slack con CSS3 es definitivamente impresionante. Pero este fragmento recrea el cargador de Slack con solo un solo elemento en la pagina. Eso es lo que yo llamo dedicación.
El recuento total de CSS para este fragmento es de poco más de 100 líneas, lo que incluye los colores del logotipo de Slack y los efectos de animación.
No puedo decir si esta idea funcionaría para otros íconos de carga de marca, pero ciertamente estoy impresionado con este.
Ver la pluma Cargador holgado de un solo elemento por CrocoDillon (@CrocoDillon) en CodePen.
11. Gráficos de barras animados en 3D
Encontrará docenas de diseños de barras 3D personalizados en CodePen, todos con sus propias animaciones. Pero estas barras 3D de Rafael González destacan por todos los demás gráficos de barras CSS modernos.
Cada uno de estos gráficos se ejecuta en flexbox para contenedores, por lo que se ajustarán automáticamente según la cantidad de barras que agregue y el tamaño del contenedor. Además, cada gráfico de barras se anima cuando se desliza a la vista, todo lo cual se controla a través de CSS puro.
Y dado que el tamaño de cada barra se ejecuta en em, puede ajustar cada barra para escalar de forma natural en función de los tamaños de fuente del navegador. Un ejemplo ingenioso que demuestra que el CSS moderno es mucho más flexible que nunca.
Ver la pluma Barras de CSS puro de Rafael González (@rgg) en CodePen.
