Programmazione Web » Css » Colorare le barre di scorrimento del browser
Colorare le barre di scorrimento del browser
Difficoltà:
Scritto da Luca Ruggiero
Sito Web: http://www.lucaruggiero.it 
Questo tutorial è stato letto 978 volte
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!
Aggiungi questo tutorial ai preferiti
