Recursos CSS para Inspirarte

Llevamos tiempo recopilando en SiloCreativo una serie de recursos y herramientas para diseñadores web que seguro te harán la vida más fácil. Y como somos de la idea de lo que no se comparte se pierde, hoy le ha tocado el turno a un puñado de recursos gratuitos para CSS (ya sabes, hojas de estilos en cascada)

Son de lo más variopintos, tenemos frameworks, recurso para aprendizaje, iconos en CSS…es complicado categorizarlos todos juntos, así que los nombraremos como recursos CSS para inspirarte (que seguro que en algunos días de baja creatividad vienen genial).

Si quieres implementarlos en tu web, tendrás que añadirlos según las especificaciones de cada uno de ellos, y si trabajas en WordPress, te aconsejo que para no modificar el tema padre, uses algún método alternativo como los que comentábamos aquí.

Espero que los disfrutes y te sirvan para tus proyectos:

La enciclopedia de CSS

Muy bueno para los que empiezan con el mundo de la maquetación y el diseño web, pero también un marcador obligado para los veteranos, que con tantos elementos y pseudo clases, es muy fácil de olvidar alguna propiedad.

Vienen muy bien explicado todo, con extractos de código y ejemplos de usos. Muy recomendable. A favoritos!

La enciclopedia de CSS

Más info

Plantilla para crear nuestra guía de estilos.

Algún día hablaremos del proceso completo de diseño y producción de un proyecto web, mientras tanto, comentarte que una de las partes más importantes a día de hoy es la definición de una buena guía de estilos, que el cliente nos la apruebe y que tengamos siempre a mano mientras maquetemos.

El archivo se puede descargar y usar de forma libre. Aunque es bastante sencilla a mi gusto (le faltarían más estilos de tipografías, listas, formularios más extensos…) es un buen punto de partida para crear nuestro propio framework o plantilla de hoja de estilos para nuestros proyectos. Muy bueno 🙂

Plantilla para crear guía de estilos

Más info

Iconos web solo con CSS

Este me parece una genialidad. Iconos solo con CSS! Hemos hablado de la importancia de sustituir los iconos de nuestra web por fuentes de iconos, para evitar tener muchas pequeñas imágenes, ahorrarnos llamadas al servidor y que sean gráficos escalables para pantallas retina.

Pues bien, esto va un paso más allá y es un completo set de iconos (que incluye banderas de algunos países) realizado solo con CSS. Si inspeccionamos un poco de darás cuenta del genial uso de los pseudo elementos :after y :before que hace el autor. Por ahora no hay iconos de redes sociales, pero tiempo al tiempo!

Puedes descargarte el pack completo o si solo tienes necesidad de un icono, copiar las líneas de CSS necesarias y ahorrarte mucho tráfico y problemas. Tus usuarios te agradecerán esta mejora de carga y UX.

Iconos solo con CSS

Más info

Framework de Material Design

Era evidente que iba a llegar. Un completo framework listo para descargarse y utilizar. Ya no hay excusas para no adaptarse a las recomendaciones de diseño que marca el material design (no confundir con flat design)

Framework para material Design

Más info

Resoluciones de dispositivos y mediaquieres para CSS

El diseño responsive nos permite adaptar nuestra web a todos los dispositivos, no sólo a móviles y tablets, también a grandes monitores u otros dispositivos. Para ello es importante conocer los dispositivos y sus resoluciones, y con este recurso los vas a tener a mano, además de conocer también el ratio de pixel, por si tenemos que trabajar con una media querie especial para pantallas retina.

Sin embargo, si estas pensando que estas dimensiones son las que deben fijar los breakpoints de tu CSS, lo mejor es que le des la vuelta a la tortilla y pensemos que lo importante no es el contenedor, sino el contenido, y que una buena gestión y distribución del mismo asegura una buena compatibilidad en todas las resoluciones. Para más info, hace poco hablamos sobre la metodología responsive design con mobile first.

Resoluciones de dispositivos CSS

Más info

Un poco de humor CSS

Si has llegado hasta aquí, es hora de un respiro, tomarse un descanso y reírse un poco, que no todo en la vida es trabajo! Por ello, Saijo George se ha encargado de recopilar algunas bromas con CSS y darle formato para que podamos reírnos un poco.

Recursos CSS para inspirarte

Más info

Recursos: Apóyate en ellos y no trates de inventar la rueda.

Los recursos como estos son el punto de apoyo de un buen profesional. Ayudan a construir un proyecto más rápido apoyándonos además en elementos probados y testados por otros. Un ejemplo, pudiendo acceder a unos buenos bancos de imágenes de calidad, para una previa o demo del sitio no es necesario cargar la cámara al hombro y salir a hacer fotos…

Así que si tienes alguno que crees pueda servir a los demás, compártelo o libéralo, en la comunidad lo agradeceremos. Y recuerda que si quieres ir rápido, ve solo, pero si quieres llegar lejos, mejor acompañado.

Espero que te hayan servido los recursos y que te hayan sacado alguna sonrisa (al menos el último). Si te han gustado seguro que compartiendolo que seguro que alegras el día a algún compañero CSS-adicto 🙂

Comentarios (4)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *