• Comentarios desactivados en Recursos CSS3 de esta semana

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

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

uilivetools

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.

Comentarios cerrados.

volver arriba ↑