Home -> Manuali e Tutorials -> Guida CSS -> Barra di Scorrimento  

Scarica il tutorial      |    Stampa il tutorial      |    Cerca nel sito      

Vi sono diversi metodi per cambiare aspetto alle grigie barre di scorrimento di Explorer e renderle più attraenti. A seconda del metodo si useranno solo parte degli elementi di stile che descriveremo.

Per aiutarti a capire i vari elementi di stile su quale parte della barra di scorrimento andranno ad influire, aiutati con questo schema:

Vediamo ora i vari elementi di stile riferiti alle barre di scorrimento:

• scrollbar-arrow-color (colore del triangolino posto sui pulsanti della barra)
• scrollbar-face-color (colore della superficie piana della barra)
• scrollbar-highlight-color (colore del bordo inclinato illuminato della barra)
• scrollbar-3dlight-color (colore del bordo verticale della barra sotto il bordo inclinato illuminato)
• scrollbar-shadow-color (colore del bordo inclinato in ombra della barra)
• scrollbar-darkshadow-color (colore del bordo verticale sotto il bordo inclinato in ombra della barra)
• scrollbar-track-color (colore della guida sulla quale scorre la barra)

Abbiamo parlato di bordo illuminato o in ombra perché, per convenzione, la barra viene considerata illuminata da una sorgente di luce posta nell'angolo superiore sinistro dello schermo.

Per ciascun elemento di stile che viene utilizzato occorre assegnare un valore che equivale ad un colore.
Il colore può essere espresso in formato esadecimale preceduto dal simbolo della celletta:

• scrollbar-face-color: #FF0000

dal nome espresso in lingua inglese (solo per i colori base):

• scrollbar-face-color: red

in formato rgb con una particolare sintassi:

• scrollbar-face-color: rgb(255,0,0)

Barre tradizionali

Per cambiare solo i colori e lasciare immutato l'aspetto rotondeggiante delle barre di scorrimento puoi usare solo due elementi di stile:

• scrollbar-face-color
• scrollbar-arrow-color

Vediamo un esempio:

Barre piatte

Per mutare radicalmente aspetto alle barre e renderle piatte e leggere dovrai usare tutti o quasi tutti gli elementi di stile, stando molto attento ai dosaggi dei colori.

Vediamo un esempio:

Barre trasparenti

Un esempio è il primo iFrame di questa pagina. Nella pagina contenente l'iFrame, bisognerà inserire lo stile seguente nel Tag <IFRAME>:

che imposta il colore bianco come trasparente; nella pagina richiamata dall'iFrame bisognerà, invece, inserire il seguente codice:

Barre sul lato sinistro della pagina

Basta mettere tale attributo al Tag HTML:

Ecco un esempio.

Torna su      |    Indice Guida      |    Pagina << 22 >>