Hay muchas cosas que puedes hacer con CSS y un navegador web. A los grandes desarrolladores les encanta empujar los límites 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 un puñado de proyectos de CSS que muestran el verdadero poder de CSS. Todos están alojados en CodePen, por lo que incluso puedes estudiar y clonar el código fuente para ver cómo funcionan.
Esta Página de carga de Sass usa gradientes animados y elementos redimensionables para crear un efecto de carga repetitiva.
La mayoría de las personas debería reconocer esta animación de carga de Facebook que usa una versión más pequeña de este cargador vertical de barras. Pero la mayoría de los cargadores web usan GIF animados ya que las imágenes son más compatibles con todos los navegadores.
Esta barra de carga CSS3 demuestra que con un poco de creatividad puede reconstruir casi cualquier estilo de animación que desee.
Vea la pluma Barras de carga por MaxStalker ( @MaxStalker ) en CodePen .
Este es uno de los proyectos CSS más complejos que pude encontrar en línea. Esta dinámica diseño de 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 pretende ser un modelo preciso del sistema solar e incluso cuenta con un fondo interestelar realista para arrancar.
No me puedo imaginar cuánto tiempo tomó esto para hacer que los íconos del planeta, y mucho menos obtener las velocidades de animación correctas. Pero donde hay voluntad, hay una manera.
Vea la pluma Animación del sistema solar: CSS puro por Malik Dellidj ( @kowlor ) en CodePen .
Nunca pensé que vería el día en que el dragaminas clásico de Windows podría jugarse 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, ya que no mantiene la puntuación correctamente. Pero hace un seguimiento del tiempo con precisión y no utiliza una sola palabra de JavaScript.
De alguna manera, incluso la interfaz se parece sorprendentemente a la interfaz de usuario de Minesweeper original y todo se ejecuta en CSS. Si bien puede no ser una réplica perfecta, está lo suficientemente cerca como para llevarme a jugar algunas rondas.
Vea la pluma Buscaminas puros de CSS por Bali Balo ( @bali_balo ) en CodePen .
En la superficie este interruptor de palanca puede verse bastante simple. Se ejecuta a través de una entrada de casilla de verificación y pasa datos al back-end, aunque esa no es realmente la parte más impresionante.
Este conmutador tiene algunas características que lo convierten en uno de los mejores conmutadores de encendido / apagado frontend:
De alguna manera, este interruptor de encendido / apagado capta el clic de cada usuario y usa ese evento para animar el área de alternancia día / noche. Los diseños de los iconos del sol y la luna también están muy bien estilizados, ya que funcionan con CSS.
Vea la pluma Pure Css "día y noche" alternar por Benjamin Réthoré ( @bnthor ) en CodePen .
El seguimiento de mouse tradicional es el trabajo de JavaScript que informa las coordenadas X / Y del usuario en la página.
Técnicamente, aún necesitas JavaScript para reunir estas coordenadas y hacer algo útil con ellas. Pero este fragmento muestra que puede diseñar una función de seguimiento de mouse puro de CSS que sigue 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.
Vea la pluma Seguimiento de ratón CSS puro experimental por Momcilo Popov ( @Momciloo ) en CodePen .
Todos hemos visto iconos e ilustraciones de vectores diseñado para la web . Pero, ¿qué pasa con las ilustraciones vectoriales de página completa diseñadas con CSS sin formato y código SVG?
Esta 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 procesa sin problemas y cada elemento tiene una ubicación muy realista en la página.
Las animaciones son ciertamente impresionantes, pero es la precisión de los elementos SVG lo que también llama mi atención. En unos pocos años, podríamos encontrar este tipo de ilustraciones en la web que se ejecutan únicamente en código sin ningún archivo de imagen.
Vea la pluma Flat diseño parque de atracciones svg por Lina (animación accionada por CSS) por Vladimir Gashenko ( @gxash ) en CodePen .
Diseñando una animación CSS repetitiva como el concepto de la tira de Möbius es bastante duro ¿Pero agrega algunos elementos 3D y gradientes variables? Ahora tienes un verdadero desafío.
Este fragmento es bastante impresionante teniendo en cuenta qué tan uniforme se ve y qué tan poco código se usa (solo 90 líneas de CSS). Con Haml solo necesitas 6 líneas de código para crear todo el concepto también.
Admitiré que esto no sería muy útil en un sitio web real, pero es un testimonio de cuánto puede hacer con unas pocas docenas de líneas de HTML y CSS.
Vea la pluma 6edrons de Möbius (CSS puro) por Ana Tudor ( @thebabydino ) en CodePen .
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 colocación del terreno son todos signos de una dulce aplicación web JS.
Pero este creador de mapas UI por Vincent Durand es en realidad 100% puro CSS. Las flechas para la rotación, el efecto de rotación en sí y todas las características de clic para colocar se ejecutan en CSS.
Vale la pena mencionar cómo este concepto completo se representa utilizando cubos 3D también. Los bloques en sí funcionan como elementos tridimensionales y puedes rotar los cubos con solo desplazarte.
Sin duda uno de los usos más locos para CSS que he visto en mucho tiempo.
Vea la pluma Creador completo del mapa de CSS por Vincent Durand ( @onediv ) en CodePen .
Este proyecto es un poco menos interactivo pero igual de impresionante. El desarrollador Peter Schmiz recreó todos los principales Iconos de la aplicación iOS 7 usando HTML puro y CSS.
Ninguno de estos iconos usa SVG o archivos de imagen. Cada elemento de cada icono está codificado de forma rígida en HTML con un elemento span / div, y luego se diseñó con CSS. ¡La parte más loca es qué tan precisos son estos!
El conjunto completo incluye 22 íconos y todos son muy acertados. Estoy muy impresionado con la atención al detalle de iconos como Maps y Weather. Solo una prueba más de que con suficiente tiempo y paciencia puedes diseñar cualquier cosa en CSS.
Vea la pluma Iconos de iOS 7 con CSS puro por Peter Schmiz ( @peterschmiz ) en CodePen .
Volver a crear la animación de carga de holgura con CSS3 es definitivamente impresionante. Pero este fragmento recrea el cargador Slack con solo un elemento en la página. Eso es lo que llamo dedicación.
El recuento total de CSS para este fragmento es un poco más de 100 líneas, 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 esta.
Vea la pluma Elemento único Slack loader por CrocoDillon ( @CrocoDillon ) en CodePen .
Encontrarás docenas de diseños personalizados de barras 3D en CodePen, todos con sus propias animaciones. Pero estas barras 3D por Rafael González se destacan por todos los demás gráficos de barra CSS modernos.
Cada uno de estos cuadros ejecutar en flexbox para los contenedores, de modo que cambian automáticamente de tamaño 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 mediante CSS puro.
Y dado que el tamaño de cada barra se ejecuta en em, puede ajustar cada barra para escalar de forma natural según el tamaño de letra del navegador. Un ejemplo ingenioso que demuestra que el CSS moderno es mucho más flexible que nunca.
Vea la pluma Barras de CSS puro por Rafael González ( @rgg ) en CodePen .