Sei in: Home >>Tutorials >>Programmazione >>Css (Cascading Style Sheets) ovvero Fogli di Stile

Scrollbarr colorati a piacere con i CSS

Con i CSS si possono gestire i colori della barra di scorrimento in tutti i suoi elementi, peccato che queste modifiche non siano compatibili con Firefox, che continuerà avisualizzare i colori standard, mentre sono visibili con Internet Explorer e Opera.

Questi sono molti degli elementi che compongono la barra di scorrimento, i valori possono essere personalizzati a volontà, tra parentesi sono indicati dei consigli facoltativi

SCROLLBAR-ARROW-COLOR: indica il colore della freccetta
SCROLLBAR-FACE-COLOR: indica il colore dello scroll e dei quadratini contenenti le freccette

SCROLLBAR-BASE-COLOR: indica il colore dei bordi intorno alla barra

SCROLLBAR-HIGHLIGHT-COLOR: effetto tridimensionale attorno alla barra
SCROLLBAR-3DLIGHT-COLOR: effetto tridimensionale attorno alla base della striscia sotto la barra

SCROLLBAR-SHADOW-COLOR: indica il colore dell'ombra dei bordi orizzontali della barra
SCROLLBAR-TRACK-COLOR:indica il colore della striscia sotto lo scroll per l'effetto tridimensionale
SCROLLBAR-DARKSHADOW-COLOR:ombra scurissima per l'effetto tridimensionale

Consigli per la scelta dei colori:è bene che siano colori sicuri per il web, inoltre i consigli seguenti presumono che il colore di fondo delle pagine web sia chiaro.

Per avere un effetto tridimensionale:

1. scegliere il colore principale della barra, dare il valore del colore esadecimale a SCROLLBAR-FACE-COLOR

2. scegliere il colore della striscia sotto la barra, uguale al colore dominante nello sfondo  e assegnarlo a SCROLLBAR-TRACK-COLOR

3. scegliere un tono molto più chiaro del colore principale e assegnarlo uguale a  SCROLLBAR-3DLIGHT-COLOR e SCROLLBAR-HIGHLIGHT-COLOR (serve per dare l'ombra tridimensionale più chiara)

4. scegliere un tono più scuro rispetto al colore principale della barra e assegnarlo a SCROLLBAR-SHADOW-COLOR (serve a dargli l'ombra scura tridimensionale)

5. scegliere un colore MOLTO PIU' SCURO rispetto al colore principale della barra, quasi nero, e assegnarlo a  SCROLLBAR-DARKSHADOW-COLOR.

6. scegliere un colore per la freccetta: deve essere a contrasto con il colore principale della barra, quindi se tale colore è chiaro è bene che sia o uguale al colore dell'ombra più scura (SCROLLBAR-DARKSHADOW-COLOR) oppure se al contrario il colore principale è scuro, è bene dargli lo stesso colore della striscia sotto la sbarra SCROLLBAR-TRACK-COLOR.

Vista la difficoltà oggettiva nel gestire tutti i parametri, ecco degli  esempi di scrollbars già pronti da personalizzare: