HTML tanfolyam : 11. lecke - Stílusok - scrollbar színezése
11. lecke - Stílusok - scrollbar színezése
2008.02.23. 19:23
11. lecke
Stílusok - scrollbar színezése
Ha már stílus segítségével átszínezted a gportal
sablonját, érdemes az oldalsó és alsó scrollbart is az oldalunk
színvilágához alakítani. Ez a lecke erről szól. Újra a CSS stílusleíró
nyelvet hívjuk segítségül. Mielőtt megismernénk a kódot, nézzük meg egy
ábrán, mi mit jelent:
Amint látod, kétféle árnyékot is megadhatunk a
"csúszkának, ill. az alsó és felső rögzített - a scrollozás irányát mutató
- "dobozkának".
face - a csúszka és a dobozok felszinének színe
shadow - a csaúszka és a dobozok jobb és alsó
élének színe
highliht - a csúszka és a dobozok bal és felső
élének színe
darkshadow - a 3D hatást segítő jobb és alsó
árnyék színe
3dlight - a 3D hatást segítő jobb és alsó árnyék
színe
track - a scrollbar háttérszíne (amin a csúszka
mozog)
A színeket a már ismert színkódok segítségével adhatjuk
meg. Ehhez segítséget
ITT találsz.
Íme a kód:
Ideteszem elvihető formában is.
TIPP: másold ki a kódot (Ctrl+C), majd másold be a Kódpróba dobozba
(Ctrl+V).
Ezután változtatgasd a különböző paraméterek színkódjait, mindig nézd meg
az eredményt.
Ha nem látod a csúszkát, ne ijedj meg. A csúszka csak akkor jelenik meg,
ha van mit görgetni.
Tegyél be még a kód mögé sok - sok üres sort (kódja <br>) és akkor
megjelenik a csúszka is. Ha már elégedett vagy az eredménnyel, mentsd el
magadnak és máris használhatod:)))
Hogyan tegyem be az oldalamra a
már elkészült kódot?
Ha nem gportalos vagy, akkor a style utasítást
a HEAD részbe tedd.
GPORTALOSOKNAK: A modulkezelőben hozz létre egy
egyszerű modult. A pozíciója jobb vagy bal oldali legyen, mert így lesz
érvényes a hatása az egész oldaladon. Nyisd meg szerkesztésre és válts át
a "Forráskód" ikonnal HTML nézetbe. Másold be a kódot. Nem érdemes
visszaváltani editor nézetbe, mert nem fogsz látni semmit. Vedd ki a két
pipát alul, hogy ne látsszon a modulfejléc és a modulkeret. Végül mentsd
le és gyönyörködj a művedben.