Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 635360]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 295256

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [49959]
2. CSS
A pozícionálás, és a z-index [26713]
3. CSS
Függőleges menü, legördülő almenüvel [21118]
4. CSS
Függőleges menü készítése listából [20935]
5. CSS
Bevezetés a CSS alapjaiba [20139]
 

 

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

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-03-04 21:57:06
Lektorálta: adrob
Lektorálva:
2006-04-25 01:19:16 [9621]

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:
body{
      scrollbar-base-color:#FFFF66;
}

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:

scrollbar-face-color: a csúszka felszínének színeit lehet módisítani
scrollbar-3dlight-color: a csúszka peremén lévő 3d világítás színe
scrollbar-highlight-color: a peremen lévő világos részek
scrollbarshadow-color: ez a peremen lévő árnyékolás színe
scrollbar-darkshadow-color: a sötétebb árnyék színe
scrollbar-arrow-color: a görgetősáv nyilainak színe
scrollbar-track-color: a csúszka útvonala

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:

input{ 
      color:#8CA93D;
      background-color:#FCFCFC;
}

input:hover{  
      color:#8CA93D;
      background-color:#FFFFFF;
}

input:active{ 
      color:#8CA93D;
      background-color:#FFFFFF;
}

input:focus{
      color:#8CA93D;
      background-color:#FFFFFF;
}

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:

textarea{ 
      color:#8CA93D;
      background-color:#FCFCFC;
}

textarea:hover{ 
      color:#8CA93D;
      background-color:#FFFFFF;
}

textarea:active{ 
      color:#8CA93D;
}

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:
cursor:crosshair;

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

crosshair: kereszt alakú mutató
default: alapértelmezett
pointer: szövegkurzor
move: négy irányba mutató nyíl
wait: homokóra
help: kérdőjel

Ebben az esetben is óvatosságra intek mindenkit, az oldal hibátlan megjelenésének érdekében.
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!