INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Colorare le barre di scorrimento del browser con i Css

Autore: Luca Ruggiero | Tell a Friend

Corso HTML
Impara il linguaggio di marcatura per il Web.

Corso CSS
Web Design ed Accessibilità secondo il W3C!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

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!

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb