În unele cazuri, puteți dona un fel obișnuit de controale și interfață un pic condiment propriile lor stiluri. Astăzi vorbim despre scrollbars (scrollbar), ci mai degrabă cu privire la modul de a schimba aspectul lor folosind CSS.
Proprietăți CSS scroll
De la bun început, doresc să se constate că proprietățile CSS descrise mai jos sunt o extensie a caietului de sarcini CSS2, introdus de Microsoft, implementat începând cu IE 5.5
Bara de defilare este format din fundal, slider și capăt tastele cu săgeți.
Butoanele pot fi active sau nu. În cazul în care nu este activ bara de derulare, cursorul lipsește.
Cel mai simplu mod de a schimba bara de defilare este setată o proprietate scrollbar-base-color. Această proprietate setează culoarea prim-plan a barei de defilare. Cu excepția cazului în proprietăți altfel definite ale unei bare sulul butonul de defilare cursorul și va apărea o anumită culoare vă cu efecte tridimensionale. Context a barei de defilare va fi afișat în această culoare prea, dar numai clarificate.
De exemplu, scrollbar-base-culoare: var va conduce la rezultatele prezentate mai jos.
Desigur, puteți face scrollbar mai fin de alte proprietăți CSS.
scrollbar-3dlight-culoare - culoare stabilește limite superioare și partea stângă a barei de defilare, degetul mare și săgețile sale. -Scrollbar săgeată-culoare - setează culoarea săgețile de pe butoanele scrollbar. -Scrollbar DarkShadow-culoare - setează culoarea „umbra“, exprimate de cursorul și butoanele bare de derulare (culoarea din dreapta și limita inferioară). scrollbar-fata-culoare - setează butoanele cursorul de culoare și de defilare prim-plan bara de derulare. scrollbar-evidenția-color - setează culoarea „aprins“, a cursorului și derulați butoanele barei de defilare (stânga și partea de sus de culoare fețele lor). scrollbar-shadow-culoare - setează culoarea „neluminat“ a butoanelor de defilare culisare și bare de derulare (culoarea de dreapta și de jos a fețelor lor). A nu se confunda cu culoarea „umbra“, specificați atributele de parcurgere DarkShadow-culoare. scrollbar-track-culoare - setează culoarea de fundal a barei de defilare, partea pe care este deplasat cursorul.
După cum sa menționat mai sus, butonul final poate fi activ sau inactiv. Distincția dintre butoanele active și inactive este doar în culorile folosite pentru afișarea butoanelor. În butonul activ este afișat cu ajutorul culorilor săgeată-defilare săgeată-culoare (figura de mai sus). Pe butonul săgeată inactiv este afișat folosind culoarea scrollbar-umbra-color și scrollbar-evidenția-color. Elementele rămase ale butonului activ și inactiv complet coincid.
Separat, pe fundal
Fundamentarea barei de defilare este definită prin proprietăți scrollbar-track culori (vezi figura de mai sus). Dacă această proprietate este omis, modelul este format din două culori (scrollbar-evidenția-color și scrollbar-fata-color), aranjate în rânduri decalate (a se vedea figura de mai jos).
De ce a lucrat, iar acum există!
In timp ce era browser-ul IE5.5 de culoare defilare a fost setat pentru a aplica o proprietate la elementul BODY. Cu toate acestea, cu eliberarea de IE6, aceste stiluri nu funcționează întotdeauna. De ce?
Acest comportament se datorează directivei DOCTYPE și impactul acesteia asupra modelului caseta de browser. În general, în cazul în care browser-ul este în modul de compatibilitate (modul Quirks), apoi toate OK, astfel încât în cazul în care browser-ul respectă standardele (modul standard), stilurile pentru scrollbar utilizate pentru organism nu funcționează. Fără a intra în detalii, voi spune că acest lucru este ușor de remediat prin aplicarea de stiluri și, de asemenea, elementul HTML (a se vedea exemplul de mai jos).
Cateva cuvinte despre celelalte browsere
În plus față de Internet Explorer 5.5+ scrollbar izmenenyat cu CSS poate Opera 7.23+ și Konqueror 3.1+. Cu toate acestea, în Opera la versiunea 7.5 pentru acest lucru trebuie să modificați setările browser-ului (opțiuni de stil). În plus, Opera vă permite să modificați derularea numai dacă este în modul de compatibilitate (modul Quirks).
-> Discutați despre articol pe forum
<- Назад к списку статей