V tem članku se bomo potopili v svet drsnih trakov. Vem, ne zveni preveč glamurozno, a verjemite mi, dobro oblikovana stran gre z roko v roki z ustreznim drsnim trakom. Staromoden kromiran drsni trak preprosto ne sodi toliko.
Preučili bomo malenkosti drsnega traku in si nato ogledali nekaj kul primerov.
Sestavni deli drsnega traku
To je res bolj osvežitev. Obstajajo veliko objav tukaj na CSS-Tricks ki gredo v podrobnosti, ko gre za oblikovanje drsnega traku po meri v CSS.
Če želite oblikovati drsni trak, morate poznati anatomijo drsnega traku. Oglejte si to ilustracijo:
Pri tem morate upoštevati dve glavni komponenti:
- O sledenje je ozadje pod šankom.
- O palec je del, ki ga uporabnik klikne in vleče naokoli.
Lastnosti celotnega drsnega traku lahko spremenimo z uporabo predpone prodajalca::-webkit-scrollbar selektor. Drsnemu traku lahko damo fiksno širino, barvo ozadja, zaobljene vogale ... veliko stvari! Če prilagajamo glavni drsni trak strani, lahko uporabimo ::-webkit-scrollbar neposredno na element HTML:
html::-webkit-scrollbar {
/* Style away! */
}Če prilagajamo drsno polje, je to rezultat overflow: scroll, potem lahko uporabimo ::-webkit-scrollbar namesto tega elementa:
.element::-webkit-scrollbar {
/* Style away! */
}Tukaj je hiter primer, ki stilizira drsni trak elementa HTML tako, da je širok z rdečim ozadjem:
Kaj pa, če želimo spremeniti samo palec ali sledi drsnega traku? Uganili ste – za ta dva imamo posebne psevdoelemente s predpono: ::-webkit-scrollbar-thumb in ::-webkit-scrollbar-track, oz. Tukaj je ideja o tem, kaj je mogoče, če vse te stvari združimo skupaj:
Dovolj krtačenja! Želim vam pokazati tri stopnje oblikovanja drsnega traku po meri, nato pa odpreti veliko staro izložbo primerov, povzetih iz celega spleta za navdih.
Preprosti in elegantni drsni trakovi
Drsni trak po meri je lahko še vedno minimalen. Sestavil sem skupino primerov, ki subtilno spremenijo videz, bodisi z rahlo spremembo barve palca ali sledi ali nekaj svetlega oblikovanja ozadja.
Kot lahko vidite, nam ni treba ponoreti, ko gre za oblikovanje drsnega traku. Včasih je za izboljšanje splošne uporabniške izkušnje z drsnim trakom, ki se ujema s splošno temo, dovolj le subtilna sprememba.
Cool privlačni drsni trakovi
A priznajmo: zabavno je iti malo pretiravati in pokazati nekaj ustvarjalnosti. Tukaj je nekaj nenavadnih in edinstvenih drsnih trakov, ki so lahko v nekaterih primerih "preveč", vendar so zagotovo privlačni.
Še en…
Kaj če bi vzeli drsni trak za vrtenje v vlaku za palec in sledi za, no, stezo!
