Añadir gradientes de color al blog con Colorzilla

Como podrás ver estoy renovando el aspecto del blog, modificando la plantilla y aplicando algunas de las propiedades que permite el lenguaje CSS3, la última versión de los estilos en cascada. Y quiero presentarte una herramienta gratis que se llama ColorZilla y sirve para crear el código CSS de un gradiente y así poder añadirlo para crear fondos, botones o cabeceras en tu blog.  En estas propiedades están las sombras, los bordes redondeados y los gradientes de color que sirven entre otras cosas para crear un menú de navegación atractivo. Sí, ya se que esto hace años que se ve en Internet, pero al principio estos efectos los realizaban los diseñadores a base de añadir imágenes. Ahora ya no es necesario y puedes hacer botones como los que puedes ver arriba en el menú sólo escribiendo HTML y CSS3. Como podrás ver  tienen un graduado de varios tonos de azul y se ha realizado sólo escribiendo el atributo -moz-linear-gradient de CSS3 en la propiedad background de un elemento.

Hoy no vamos a entrar en los entresijos del código CSS3, ya que el programa Colorzila se encarga de crear el código que necesitas, de forma que lo único que tendrás que hacer es copiarlo y pegarlo en tu página Web o blog. Pero para que no hay ningún error, vamos paso a paso.

1. Acceder a ColorZilla.
2. Seleccionas uno de los gradientes de color que ya hay pregenerado o creas uno nuevo. Como puedes ver a la derecha, es posible unir varios gradiente, no tiene porque ser sólo de dos colores.
3. A la derecha de la pantalla de ColorZilla tienes un cuadro al que puedes dar dimensiones (por debajo de 350x350 pixeles) y resulta muy útil si quieres hacer un botón con un desgradado de colores para el menú del blog.
4. Justo bajo de este cuadro tienes una opción muy importante, la orientación del gradiente, que en principio será vertical, pero también la puedes colocar en horizontal, inclinada, o con una forma circular.
5.  Abajo tienes el código CCS3 (hay varias opciones a elegir, de normal usa HEX para los gradientes, excepto en el caso de que quieras incluir transparencias, entonces debes elegir la opción RGBA  para generar el código.
6. Copia el código de ColorZilla y vas al editor de Blogger.
7. Abres las plantilla de Blogger y vas al CSS3, que está al principio de la plantilla, situada entre <b:skin> y </b:skin>. Aquí dentro observarás varias partes y debes dirigirte a la que se llama "Content", ya que es allí donde debes copiar el código para modificar la plantilla normal, si quisieras modificar la del móvil entonces tienes que mirar la parte final del CSS3, antes de la etiqueta </b:skin>.
8. Encuentra el sitio específico donde vas dar formato al fondo (background), por ejemplo si vas a dar formato a todos los posts, tienes que encontrar el código CSS en el que habla de .post-body   y si es el fondo de la columna lateral izquierda debes buscar .fauxcolumn-left-outer .fauxcolumn-inner.... y cuando lo encuentres pegas allí el código del gradiente de color que has obtenido con ColorZilla.

Imágenes: capturas de pantalla