Las librerías CSS actuales son prueba del elevado nivel del diseño web y como estas facilitan las cosas a la hora de implementar esas brillantes formas de entender lo que es la experiencia web.
Es por ello que vamos a compartir 23 librerías CSS de gran calidad de variados artistas que pruebas como todo es posible a través de este lenguaje de diseño. Una interesante oferta de recursos para dejarnos maravillados por lo que se puede conseguir a través de CSS.
Índice
- 1 Blur Menu
- 2 CSS3D Clouds
- 3 Logos en puro CSS
- 4 Barra de navegación por Jan Kadera
- 5 Paneles de imágenes deslizándose
- 6 Anillo doble
- 7 Flexbox
- 8 Un menú de navegación colorido
- 9 Barras de progreso en CSS3
- 10 Animate.css
- 11 Spinkit
- 12 Buttons
- 13 FlipSwitch
- 14 Hint.css
- 15 Colors.css
- 16 Voxels.css
- 17 Tipograf
- 18 Spinners
- 19 Indicadores de línea de carga
- 20 CSS Loader
- 21 Image Hover
- 22 Hue.css
- 23 Materialize
Blur Menu
Una demo brillantemente optimizada en el que se puede encontras hasta siete ejemplos. Utilizan la transición CSS3 y lo que sería gran inteligencia en el uso de distintos selectores para crear un efecto de desenfoque de gran calidad.
CSS3D Clouds
Con tan solamente posar el puntero sobre esta demo, podrás experimentar el gran efecto conseguido con esta librería CSS. Lo mejor de todo es que esas nubes están en pleno movimiento. Utiliza CSS3 3D Transforms a la vez que JavaScript. Desde el enlace podéis acceder al tutorial donde encontrar cada uno de los pasos.
Logos en puro CSS
Esta librería contiene algunos de los logotipos más conocidos por todos como son los de Apple o Twitter. Es más que interesante que podáis conocer las propiedades de cada uno de los logos al posar el puntero del ratón. Tenéis todos los accesos al código completo desde el enlace.
Desde codepen.io tenemos acceso a esta barra de navegación en 3D que se mueve estupendamente y de la que podemos conocer completamente su código. Lo peculiar de esta librería es que está compuesta por solamente 65 líneas. Las nuevas características CSS3 están presentes en el efecto de campo de profundidad.
Paneles de imágenes deslizándose
Tenéis acceso al tutorial desde aquí. Su gran valor es lo suave de las animaciones cuando se deslizan los paneles de imágenes. Podéis acceder a cuatro variaciones para incorporarlas en vuestra web y conseguir un magnífico resultado.
Anillo doble
Estamos ante un anillo recreado perfectamente con una animación de gran manufactura. Desde codepen.io tenéis acceso a todo el código compuesto por cientos de líneas.
Flexbox
Flexboxes son la nueva forma de CSS de mostrar las columnas en una página. Una guía bastante completa para entender estos contenedores.
Tenéis acceso a todo el código HTML y el CSS de este menú de navegación que profesa mucho amor por el color. Está hecho totalmente en CSS para que podáis sumergiros en este lenguaje.
Barras de progreso en CSS3
Aunque esté en inglés, como la mayor parte de las librerías, se detalla bien el HTML y el CSS necesario para tener unas barras de progreso de un gran diseño. Degradados, líneas y otro tipo de efectos visuales te esperan.
Animate.css
De gran popularidad en GitHub, está hecho enteramente en CSS. Elige la animación que quieras conocer, y solamente has de pulsar sobre el botón «Animate it» para ver el efecto en Animate.css. Puedes descargarlo o verlo mismamente en GitHub.
Spinkit
Estamos ante una colección de indicadores que pueden servir para todo tipo de elementos visuales en la web. Pulsas sobre «Source» y encontrarás todo el código necesario para su ejecución.
Buttons
Una librería de botones CSS de todas las formas e ideas para encontrar aquel que necesitas para diferenciarte de la competencia. Desde la barra lateral puedes desactivar las formas o efectos que no quieres encontrar y así centrarte en uno en concreto.
FlipSwitch
Estamos ante una app que permite desactivar ciertos botones para crear así uno que sea exactamente el que buscamos. Usamos las distintas configuraciones y finalmente podremos reproducir el código que copiaremos para nuestro sitio web. Un recurso bien interesante por su versatilidad y gran estilo.
Hint.css
Una librería CSS sin JavaScript y lista para que la utilices tal como deseés. De poco tamaño, fácil de usar y que funciona en todos los navegadores web más modernos.
Colors.css
Para aquel que busca el color desde una alternativa interesante y que permite prototyping rápido para sitios web con un gran aspecto visual.
Voxels.css
Si conocéis Minecraft, el juego de construcción, seguramente que esta librería CSS sea fácil reconocerla. Rota según pulsemos en el centro para ir generando las cuadrículas.
Tipograf
Una fuente en puro CSS de poco peso simplemente perfecta para tu próximo proyecto.
Spinners
Una gran colección de animaciones de iconos de carga en CSS y HTML.
Indicadores de línea de carga
Puro texto en CSS para indicadores de carga de todo tipo. Una gran fuente para encontrar aquel indicador necesario y justo para vuestra web.
CSS Loader
Otra fuente para iconos de carga que se puede personalizar para todo tipo de animaciones.
Image Hover
Una librería CSS escalable y de poco peso de imágenes para esa clase «hover».
Hue.css
Una fuente de 49 degradados o gradientes fotorrealistícos para todo tipo de contenido e imágenes.
Materialize
Un framework CSS basado en Material Design, el principio de diseño usado por Google en una gran de apps y en su propio sistema operativo Android.
No faltes a la cita con webs de gran acabado con imágenes SVG.