Los desarrolladores web siempre tenemos curiosidad por aprender nuevas técnicas para la construcción y mejora de sitios web. CSS3 ha sido un importantísimo punto de inflexión para los desarrolladores frontend, ofreciendo una colección de nuevas propiedades soportadas por los navegadores web modernos.
Estos ejemplos de fragmentos (snippets) de código CSS libre son perfectos para cualquiera que quiera avanzar en el mundo del CSS. Cada fragmento utiliza CSS puro para crear interacciones que hasta hace muy poco sólo eran posibles con programación JavaScript.
Menú acordeón
Normalmente un menú de acordeón estaría relacionado con una función de evento click JavaScript. Pero como CSS puede manejar efectos a través de la pseudo-clase :checked es más fácil que nunca.
CSS Slider
JavaScript siempre ha sido la solución para cualquier slider de imagen o galería de fotos. Normalmente sería difícil controlar los eventos de clic a través de CSS3, pero los botones de radio nos pueden ser útiles.
Parallax fondo de estrellas animado en CSS3
Si bien el movimiento continuo y el diseño parallax residen sobre todo en el ámbito de jQuery, ahora es posible crear movimiento con CSS3 puro. El fondo se ha creado usando algunos efectos de degradado junto con una función de animación CSS3.
Imagen de fondo estilo bloc de notas / postit en CSS puro
El fondo de block de notas / postit, puede ser elaborado con una serie de bordes, sombras y efectos de degradado combinados en un sola div. Otro trozo de papel se gira ligeramente para crear el efecto de profundidad.
NES en CSS3 puro e interactivo
Una creación bastante sorprendente. No sólo la NES es escalable a diferentes tamaños y construida exclusivamente en CSS, sino que también tiene características que son completamente interactivas, por ejemplo, al hacer clic en el botón de encendido el piloto se enciende.
Este fragmento requiere más de 600 líneas de código CSS. Pero teniendo en cuenta que esto es posible en el año 2016, va a ser interesante ver lo que se podrá lograr en 2 años.
Otro del mismo tipo pero sin interacción, Apple Watch en CSS puro:
Me llevo el del fondo con las estrellas.
Buen post, y sin comentarios. Facebook se los llevó :'(
Estoy de nuevo por acá xD
Ahora me llevo el acordeón puro css, sin javascript.