Colorzilla è un addon di Chrome e Firefox per i codici dei colori.

Come si utilizza ColorZilla per rilevare i codici dei colori e per creare degli sfondi con gradienti.

Solitamente come browser uso Google Chrome che ritengo sia diventato migliore di Firefox se non altro per il fatto che non bisogna riavviarlo tutte le volte che installiamo o disinstalliamo un componente aggiuntivo. Firefox dalla sua ha ancora un numero di estensioni più elevato e forse qualitativamente migliore rispetto a Chrome ma le distanze si stanno rapidamente accorciando anche perché Chrome può contare sul costante supporto del team di Google.

Firebug per Firefox è indubbiamente più evoluta rispetto a Firebug Lite per Chrome e Greasemonkey supporta un numero di script decisamente superiore a Tampermonkey. Una estensione che mancava su Chrome era Colorzilla presente invece su Firefox da molto tempo. Questo mi aveva indotto a usare su Chrome EyeDropper per rilevare i codici dei colori presenti in una pagina web.

Su Chrome Web Store è finalmente approdata anche Colorzilla per Chrome che ha sostanzialmente le stesse funzionalità dell'addon di Firefox. ColorZilla ha una icona come quella classica dello strumento Contagocce che si può visualizzare nella barra di Chrome dopo la sua installazione

Cliccandoci sopra con il sinistro del mouse si apre il menù verticale di tutte le funzioni supportate:

1. Si può ricavare il codice del colore di ogni pixel della pagina aperta nel browser
2. Si può selezionare il colore da una tavolozza simile a quella di Photoshop
3. E' possibile conoscere e analizzare tutti i colori presenti in una pagina web
4. Viene creata la Cronologia dei colori che si sono catturati
5. Si possono visualizzare le informazioni su un elemento come classe, id, tag o dimensione
6. Si può copiare il codice del colore automaticamente negli appunti con la forma desiderata
7. Si possono rilevare i colori di elementi dinamici come nel caso hover (cursore sull'elemento)
8. E' possibile ricavare i colori da oggetti in flash come da qualsiasi livello di zoom

Una attenzione particolare la merita la creazione di codice CSS per il gradiente. Andando su CSS Gradient Generator si apre l'Editor del gradiente in cui attraverso dei cursori si possono generare dei CSS relativi al gradiente generato dai colori prescelti e dalla sua orientazione

I cursori in baso servono per selezionare i colori. Ci si fa sopra un doppio click per aprire la tavolozza. I cursori in alto per regolarne l'opacità. In alto a destra si può selezionare l'orientazione del gradiente che può essere orizzontale, verticale, diagonale e radiale. Si viene a creare un codice che determina il background del gradiente realizzato. Vediamo per esempio come utilizzarlo in modo banale. Si può copiare andando su Copy nella parte bassa e incollarlo all'interno di questo codice

<style>
#elemento_gradiente {
width:200px;
font-size:18px;
color:#000;
CODICE COPIATO DA COLORZILLA
}
</style>
<div id="elemento_gradiente">Testo su sfondo</div>

per ottenere questo risultato

Testo su sfondo

dove ovviamente i parametri colorati possono essere personalizzati come inserirne altri.