Quería compartir con vosotros los recursos sobre CSS3 que he conocido esta semana. Se trata de un generador de efectos CSS3: gradientes, bordes redondeados, texturas y sombras. Y otro generador online muy potente para dar estilos a botones, formularios, iconos y cintas.
CSSmatic, una completa colección de herramientas CSS para diseñadores web
CSSmatic es un proyecto libre, hecho por y para desarrolladores. Desarrollado por Freepik.
Degradados
CSSmatic permite que creemos degradados gracias a su sencilla interfaz y después el resultado se puede obtener en código CSS o para SASS. También es muy completo a la hora de elegir con que modo de color queremos trabajar, se puede escoger formato hexadecimal u otros: rgb, rgba, hsla…
Bordes
Directamente en la pantalla podemos crear diferentes bordes para un elemento (cada esquina puede tener un estilo diferente) y ajustar el ancho del borde y el estilo (sólido, punteado, guiones, doble, etc). Se obtienen líneas de CSS para copiar.
Texturas o Suciedad
En este caso de una manera intuitiva, tocando unos pocos sliders, conseguimos crear texturas con ruido. Las podemos descargar como PNG y nos dan las líneas CSS que deberíamos utilizar para crear la imagen de fondo para nuestra web.
Editor de Sombras
Con el editor de sombras podemos crearle sombras (valga la redundancia) a un objeto. Jugamos con la altura y el ancho de la sombra, el color, el radio de propagación de la sombra y la ubicación (la sombra puede quedar por fuera o por dentro del objeto). Se obtienen líneas de CSS para copiar.
UI Livetools
UI Livetools es una colección de varias aplicaciones online que nos permiten crear estilos a diferentes elementos de nuestra web de un modo sencillo sin tener que tener muchos conocimientos sobre CSS. Los efectos que se crean con las aplicaciones se pueden descargar en formato HTML y CSS.
Las aplicaciones de Livetools son:
- Button Builder, un generador de estilos para botones
- Form builder, una ayuda para generar estilos a los diferentes elementos de un formulario (el contenedor del formulario, los inputs y botones de tipo submit).
- Icon Builder sirve para crear iconos sirviéndose de una cuadrícula o subiendo imágenes que trataríamos posteriormente.
- Ribbon builder, quizás la herramienta más curiosa de todas. Sirve para crear cintas. Bellos letreros con un texto dentro. Se pueden descargar los efectos creados en formato HTML y CSS.