JMiur [E]

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

10 comentarios:

Anahí  

Es uno de los adons que más utilidad le encontré en toooooooodo este tiempo. ;-)

Responder
Argi  

Hiip Hippp...
hurrraaaa...!!!

bue... el tiempo de vida estimado online..

..al ser una herramienta en-linea, como sacarme esa costumbre de las extensiones..
a si la carpeta "Cosas pal.." -(subcarpeta) "Color"..
..ya ta :D

Responder
Unknown  

Un encanto, lo guardo como una paleta de colores, me gusta sí :P

Responder
Carlos Martínez  

Hola JMiur, disculpa tanta molestia y que el comentario no venga al tema pero estoy necesitado :(... veras, hace un tiempo tengo aplicado lo de post resumidos, pero hoy me voy dando cuenta que los comentarios ya no están disponibles, he perdido varios lectores (no es que tenga muchos pero cuentan, jeje)...

Te dejo el enlace a la plantilla (enlace), espero puedas ayudarme, de antemano gracias!

Responder
La hormiguita  

Genial.... ya están instaladas, que bueno....;), la verdad usted, con tanta novedad, al fin de cuentas nos mantiene jóvenes... muy buenoooo!!!
Gracias.:P

Responder
Domin-Omega  

Bueno pues es de esas heramientas casi escenciales... no lo conocía. Yo uso un programilla similar llamado Color Cop. Es gratuito y es una belleza, te permite tomar muestras de colores de todo el entorno grafico del sistema operativo, archivos de imagen abiertos, paginas web, etc. no tiene límites. Se descarga de la página del autor, (http://colorcop.net/download) en verdad lo recomiendo. No Maneja autogradientes CSS, pero tiene otras cualidades, y es de gran ayuda para ciertas cosas.

Aunque se "instala" el instalador no es más que un descompresor, pues sólo aloja los archivos necesarios en la carpeta especificada, yo lo llevo en la pendrive para tenerlo disponible donde sea.

Responder
JMiur  

Colorzilla es una herramienta escencial, sencilla y muy práctica. vale la pena tenerla instalada.

Responder
JMiur  

Carlitox en la web:
Aparentemente, te pafalta agregar el cóodigo correspondiente para que se carguen los comentarios. Busca esto:

<b:if cond='data:post.includeAd'>

y justo antes de esa línea agrega esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

Responder
Carlos Martínez  

Listo, muchas gracias, no se como se abra perdido, a lo mejor la borre sin querer, GRACIAS!!! :)

Responder
JMiur  

Me alegra que se solucionara. :-)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR