Colorzilla: Editor de gradientes online

Colorzilla es una de las extensiones más populares de Firefox y si bien no tiene una versión para Chrome, hay una extensión similar para ese navegador, llamada Eye Dropper.

Lo que hace es agregar un selector de colores. Haciendo click en el ícono que se agrega en al barra de estado, podemos recorrer cualquier página web e inspeccionar los colores que se nos mostrarán en los diferentes formatos que existen; de esta manera, se nos hace sencillo agregarlos en nuestros propios proyectos.

Con el botón derecho sobre el ícono, accedemos a diferentes opciones tales como paletas, análisis de los colores de la página o la posibilidad de guardar esas paletas para utilziarlas posteriormente.

Recientemente le han agregado una nueva herramienta online: un generado de gradientes al que podemos acceder sin necesidad de instalar la extensión. Allí ya hay varias gradientes predefinidas pero podemos crear cualquier otra, agregando colores, establecendo la orientación, tamaño, etc

El resultado, lo vamos previsualizando contantemente y además, nos muestran las propiedades CSS necesarias para incluirlos.

Es muy interesante que hayan pensando en darle soporte a Internet Explorer que, pese a que aún no admite las mismas propiedades de estilo, tiene un filtro que las asemeja bastante aunque el resultado final dependerá de cada caso en particular. Para eso, hay una casilla que podemos marcar o demarcar y que nos mostrará el resultado previsto para ese navegador.

Un ejemplo cualquiera nos dará algo como esto:

background: #cedbe9; /* old browsers */

background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 9%, #6199c7 18%, #3a84c3 44%, #419ad6 55%, #4bb8f0 67%, #3a8bc2 84%, #26558b 100%); /* firefox */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cedbe9), color-stop(9%,#aac5de), color-stop(18%,#6199c7), color-stop(44%,#3a84c3), color-stop(55%,#419ad6), color-stop(67%,#4bb8f0), color-stop(84%,#3a8bc2), color-stop(100%,#26558b)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* ie */

Así que lo aplicamos a un DIV cualquiera tal como usamos un color de fondo:

este es un ejemplo