:: Grafikando Design ::

Scrollbar trasparente

English Version!

Questo effetto funziona solo su alcuni browser, come Explorer 5.5 e superiori. La Scrollbars non può essere colorata in alcun modo con Netscape e Firfox.

In questo tutorial vedremo come creare una scrollbar trasparente ad essezione che per i bordi e le frecce.
nel vostro file Css scivete:

body { scrollbar-track-color: #FF00FF; scrollbar-face-color: #FF00FF; scrollbar-highlight-color: #FF00FF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FF00FF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color:#FFFFFF; }

Facciamo una breve analisi del codice qui sopra:
Tutti i tag definiscono un particolare della scrollbar e i loro attributi ne definiscono il colore.
Io ho usato due colori: un magenta #FF00FF e il colore bianco #FFFFFF.
Il magenta può essere reso trasparente e il bianco rimarrà visibile.

Ora vediamo come rendere trasparente il colore magenta:

filter: chroma(#FF00FF); height: 0px;

Il tag filter permette di rendere trasparente una determinata gamma di colori, per funzionare però ha bisogno della presenza dell'attributo height: 0px;.

Nel caso in cui vorreste applicare la scrollbar trasparente a un sincolo i-frame, non potendo utilizzare il tag height: , basterà fare in questo modo: