CSS -> A felhasználói felület - második rész

A böngésző színbeállításai

Eddig megnéztük, hogyan lehet egyes elemeknek színt adni. Láttuk, hogy hátteret is beállíthatunk, és a háttérnek alkalmazott kép megjelenítésén tudtunk változtatni.
Most ezen a nyomon haladva bemutatom, mi mindennek lehet még színt adni a böngészőben.
Valószínűleg alkalmaztál már gombokat, szövegmezőt, esetleg legördülő menüt, radio gombot. Gondolom észrevetted, hogy ezek színei általában szürkék, fehérek (böngészőtől, és a beállított rendszerszínektől függ). Sokszor megtörik az oldal design-át, nem igazán esztétikusak, és a megjelenésük is a felhasználó beállításaitól függnek.
Sok ilyen beállítás létezik, ezért ha jobban belemerülnél, nézd meg az angol CSS specifikációt a W3C honlapján.
Az alábbiakban bemutatom a leggyakrabban használt CSS tulajdonságokat.

1.A scrollbar színeinek beállításai.

Ahogy fent említettem, lehetőségünk van a böngésző szűkebb értelemben vett színezésére. Azonban vigyázzunk, mert nem minden böngésző támogatja ezeket (Internet Explorere igen; FireFox nem, Operában pedig a felhasználó beállíthatja hogy akarja-e ezt a lehetőséget)
A scrollbar színezésekor ügyeljünk arra, hogy midenféleképp jól látható és elkülöníthető legyen a scroll az oldal többi részétől.
Ha nagyon belefolyik az oldalba, nehezen lesz látható,a látogató kevésbé fogja észrevenni, ezért nem fogja tudni használni.

1. A görgetősáv színét egy beállítással is megváltoztathatjuk:

A scroll ebben az esetben a sárgát veszi alapnak, tehát ezt a színt alkalmazza például árnyékolásra is.
Itt fontos észrevenni, hogy a görgetősávra (és általában a böngésző) használt CSS tulajdonágokat a BODY szelektorral kell kijelölni.

2. A görgetősáv részeinek külön-külön való módosítása:

Minden esetben ajánlatos RGB értékeket megadni.

2. Űrlap színei

Az űrlapokon használhatunk gombot, textarea-t, legördülő menüt, radio gombokat stb.. Lehetőségünk van ezeket színezni, hogy jobban alkalmazkodjanak
oldalunkhoz. De itt is figyelembe kell venni, hogy nem minden böngésző támogatja, tehát erre ne építsünk design-t.

1. Az input elem:


Itt is, mint a látszólagos elemeknél használhatunk "hover", "active", és "focus" osztályokat.
A hover-, és active-ról már beszéltem. A focus abban az esetben fog aktiválódni, ha az egérrel rákattintasz a beviteli mezőre, vagy gombra.
Megadhatunk mindegyik esetben szövegszínt, háttérszínt, háttréképet, és mindenfajta szöveggel és színnel kapcsolatos beállítást (sok tulajdonság a későbbiekben kerül bemutatásrsa, de többségük alkalmazható lesz itt is).

2. A textarea:


A fenti példák alapján alkalmazhatjuk ezeket a tulajdonságokat a SELECT, RADIO, CHECKBOX input elemekre is.

3. A kurzor

A CSS segítségével az egérmutató alakját is megszabhatjuk.
Szintakszisa:

Ezt is, mint a scrollbar-t a BODY legfelső szintű elemben kell megadni.
Értékei:

Ebben az esetben is óvatosságra intek mindenkit, az oldal hibátlan megjelenésének érdekében.