microStudio sitios web
15 sep 2015
0
1042
0
Por Marcelo
Categoria Herramientas
0
1042
0
15 / sep
2015
Generador CSS
Por Marcelo Publicado en Herramientas

Generador de código CSS

¿Te ha sucedido que a veces quieres crear un objeto en tu página y necesitas escribir el código CSS, pero es muy largo? Entonces quizá buscas en tu archivo css viendo si ya escribiste reglas similares y así solo copiar y pegar en tu nueva regla. Pues si eso te sucede a menudo, puedes comenzar a ahorrar mucho tiempo copiando y pegando las reglas css listas para su uso gracias a esta genial herramienta online: CSS3 Generator.

En este sitio tienes acceso a prácticamente todas las reglas css3 más usadas, las cuales puedes personalizar para que funciones en el diseño que tu estás haciendo. ¿Cómo funciona? Muy simple.

Digamos que quieres hacer hacer un botón con sombra, bordes redondos, y que al pasar el mouse por encima cambie de color con una transición de 1 segundo y se vaya la sombra. Pues bien, ¡hagámoslo!

1.- Tengo el código de mi botón sin estilos

2.- Voy al sitio CSS3 Generator y comienzo escogiendo las esquinas redondeadas haciendo click en “Border Radius”. Ahí puedo escoger si darle un valor diferente a cada esquina o el mismo para todas las esquinas. Escojo el mismo para todas las esquinas, 10px, y le doy click al botón de abajo “Copy”. Inmediatamente el código generado se copia al portapapeles y esta disponible para pegarlo en nuestro archivo css.

Css Generador Border Radius

Como se puede ver las esquinas del cuadro en el sitio se pusieron redondas con el valor que introdujimos. Es la forma como el sitio nos muestra una “vista previa”.

3.- Luego voy a “Box Shadow” para ponerle sombra a mi botón. Una vez que lleno todos los datos que necesito para mi botón, se generará el código css y lo copiamos y pegamos en nuestro archivo css.

4.- Hacemos click en “Transition” para llenar los datos de la transición, que en mi caso serían: All, 1 segundo, ease. Copiamos y pegamos en nuestro archivo css.

5.- Finalmente nuestro código CSS se vería más o menos así:

El botón termina viéndose así:

Como pueden ver, este sitio es una gran herramienta para ahorrar tiempo en escribir código css o css3 de efectos complejos. Por otro lado, si recién estamos dando nuestros primeros pasos en el diseño web ciertamente nos ayudará a tener un código limpio y sin errores.

Si te fue útil este artículo, no te vayas sin agradecer en el botón de abajo.

Compartir este artículo