Colorare le barre di scorrimento del browser con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Si vede ormai in moltissimi siti, dal piccolo, al medio al grande, un effetto grafico molto accattivante, la colorazione delle barre di scorrimento del browser.

Usando buone combinazioni è possibile ottenere effetti sfavillanti che mettono in risalto tutto il sito, soprattutto quando un sito, per qualsiasi motivo, sia molto dedito alla grafica.

L'effetto non è supportato da tutti i browser, anzi, per la verità è supportato solo da Ms Internet Explorer, per di più solo dalla versione 5.5 in poi.

Esaminiamo l'intera struttura delle barre di scorrimento del browser con relativa descrizione di tutte le sue componenti e relativi comandi Css per impostare la loro colorazione:

scrollbar-base-color - imposta un intermezzo tra le sfumature di tutte le componenti della barra di scorrimento
scrollbar-face-color - colora la barra vera e propria, cioè la parte in movimento
scrollbar-shadow-color - colora l'ombra della barra di scorrimento vera e propria
scrollbar-arrow-color - colora le frecce della barra di scorrimento
scrollbar-highlight-color - colora il separatore tra la barra di scorrimento vera e propria e la parte della barra con le frecce
scrollbar-dark-shadow-color - colora la parte esterna all'ombra della barra di scorrimento vera e propria
scrollbar-3d-light-color - colora la parte tridimensionale della parte contenete le frecce
scrollbar-track-color - colora la parte sottostante della barra di scorrimento, ovvero quella su cui si muove la barra

Il codice Css per colorare le barre di scorrimento è proprietario del <body>, contenuto che sia all'interno di un file esterno .css, nell'header della pagina o nel Tag stesso.

Ecco un esempio di codice:

body {
   scrollbar-base-color: #003366;
   scrollbar-face-color: #003366;
   scrollbar-shadow-color: #FFFFFF;
   scrollbar-arrow-color: #FFFFFF;
   scrollbar-highlight-color: #FFFFFF;
   scrollbar-dark-shadow-color: #FFFFFF;
   scrollbar-3d-light-color: #FFFFFF;
   scrollbar-track-color: #FFFFFF;
}
Effettuate delle prove fino ad arrivare all'effetto desiderato e... buon divertimento!

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.854)

:: Referenze dei fogli di stile Css (41.897)

:: Menu ad effetto mouseover con i Css (39.283)

:: Effetti sui link con i Css (30.271)

:: Testo verticale coi Css (20.094)

:: Angoli smussati in un box coi Css (18.970)

:: Box con effetto ombra con i CSS3 (16.383)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.287)

:: Stilizzare i form Html con i Css (16.100)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.887)

IN EVIDENZA
DOWNLOAD