Selles artiklis sukeldume kerimisribade maailma. Ma tean, see ei kõla liiga glamuurselt, kuid uskuge mind, hästi kujundatud leht käib käsikäes sobiva kerimisribaga. Vanamoodne kroomitud kerimisriba lihtsalt ei mahu nii palju.
Uurime kerimisriba peeneid detaile ja seejärel mõnda lahedat näidet.
Kerimisriba komponendid
See on tõesti rohkem värskendus. Seal on a hunnik postitusi siinsamas CSS-Tricksis mis lähevad CSS-i kohandatud kerimisriba stiili osas sügavatesse üksikasjadesse.
Kerimisriba stiili kujundamiseks peate olema tuttav kerimisriba anatoomiaga. Vaadake seda illustratsiooni:
Siin on kaks peamist komponenti, mida meeles pidada:
- . jälgida on taust riba all.
- . pöial on osa, mida kasutaja klõpsab ja lohistab.
Saame muuta kogu kerimisriba atribuute, kasutades tarnija eesliidet::-webkit-scrollbar valija. Saame anda kerimisribale kindla laiuse, taustavärvi, ümarad nurgad... palju asju! Kui kohandame lehe peamist kerimisriba, saame seda kasutada ::-webkit-scrollbar otse HTML-i elemendile:
html::-webkit-scrollbar {
/* Style away! */
}Kui me kohandame kerimiskasti, on see tulemus overflow: scroll, siis saame kasutada ::-webkit-scrollbar selle elemendi kohta:
.element::-webkit-scrollbar {
/* Style away! */
}Siin on kiire näide, mis stiilib HTML-elemendi kerimisriba nii, et see oleks lai ja punase taustaga:
Mis siis, kui tahame muuta ainult kerimisriba pöidla või rada? Arvasite ära – meil on nende kahe jaoks spetsiaalsed eesliitega pseudoelemendid: ::-webkit-scrollbar-thumb ja ::-webkit-scrollbar-track, vastavalt. Siin on idee, mis on võimalik, kui me kõik need asjad kokku paneme:
Aitab harjamisest! Soovin teile näidata kolme erinevat kohandatud kerimisriba stiili ja seejärel avada inspiratsiooni saamiseks suur veebist kogutud näidete esitlus.
Lihtsad ja stiilsed kerimisribad
Kohandatud kerimisriba võib siiski olla minimaalne. Panin kokku grupi näiteid, mis muudavad välimust peenelt, olgu siis pöidla või raja väikese värvimuutusega või taustal kerge stiiliga.
Nagu näete, ei pea me kerimisriba stiili osas hulluks minema. Mõnikord piisab peenest muudatusest, et parandada üldist kasutajakogemust kerimisriba abil, mis sobib üldise teemaga.
Lahedad pilkupüüdvad kerimisribad
Kuid tunnistagem: tore on veidi üle piiri minna ja loovust harjutada. Siin on mõned veidrad ja ainulaadsed kerimisribad, mis võivad mõnel juhul olla liiga palju, kuid need on kindlasti pilkupüüdvad.
Üks veel…
Kuidas oleks, kui võtaksime pöidla jaoks rongis kerimisriba ja rööbastee jaoks rööpad!
