Share
Dette tipset vil veilede deg i å forbedre utseende og følelse av rullestenger for å matche din UI-design. Vi tar en titt på hva WebKit-nettlesere tilbyr oss når det gjelder CSS, pluss vi bruker et jQuery-tilbakeblikk for å imøtekomme andre nettlesere.
Hvis du trenger hjelp til å utforme en bestemt del av nettstedet ditt, kan det være raskere å få hjelp fra en profesjonell. Envato har eksperter klar til å hjelpe med å omforme eller tilpasse alle typer webkomponenter.
Når vi refererer til webkitbaserte nettlesere, snakker vi egentlig om Apple Safari og Google Chrome. Sammen holder de for tiden mer enn 40% av det totale skrivebordsbrowsermarkedet. For tabletter vil Apples iPad alltid bruke Webkit uansett hvilket selskaps nettleser som brukes. Google har også lagt til Chrome i sitt Android OS, og Chromebooks er selvsagt basert på Google Chrome.
Når man ser på disse figurene, burde det være en veldig lys fremtid for rullestangs styling!
Før vi kan begynne med selve temaet for styling-rullestenger med CSS, trenger vi en funksjonell demo; en side med rullestenger. Rullestenger kan ses hvis:
Accentsconagua
textarea inneholder nok tekst slik at rullestenger vises.iframe brukes til å vise en annen side.div eller noe annet blokkelement har sin flyte eiendomssett.For denne demonstras skyld vil vi gå med det siste alternativet. Her er min første oppslag:
Kjæresten er dum og sitter, og er en avgjørende forfatter. Curabitur rhoncus tortor eget orci fringilla, ikke noe spesielt. Allikevel er det noe som. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. I hagen har vi en rekke plater. På felis massa. Maecenas vitae quam non elit porta pellentesque ac i erat. Nullam an ante felis, ullamcorper suscipit felis. Maecenas sitter med høyttalere, og har en bredde på hverandre. Klassifiserende taciti sociosqu ad litora torquent per conubia nostra, per incepos himenaeos.
Sed sed tellus dolor, non lobortis felis. Klassifiserende taciti sociosqu ad litora torquent per conubia nostra, per incepos himenaeos. På egenhånd er det en god opplevelse å få et godt tempo og lejon. Nam metus nibh, tristique non sodales ikke, interdum et neque. Kjæresten er dum og sitter, og er en avgjørende forfatter. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, en aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, en feugiat tortor sagittis eu. Det er ikke noe problem, men det er ikke noe problem. I tillegg til metus på metus ultricies fringilla. Maecenas sed lacus aliquam nibh sempre dignissim et quis est.
Prøve sodavater, sapien setter seg på en måte som er en stor del av massen, og det er ikke noe problem. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut følgelig nisi posuere id. Cras elit orci, vehicula i sagittis a, faucibus vitae dui. Nunc ikke lorem i metus adipiscing adipiscing ikke en sapien. Sed dikter ultrices nibh i tristique. Nulla dapibus laoreet tincidunt. Du er sikker på at du er i nærheten av dette.
Bare sett inn, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, kurset eget consectetur i, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla medus i libero luktus eu condimentum nulla pretium. Kjæresten er dum og sitter, og er en avgjørende forfatter. Alkalisk soda lorem, nek dignissim turpis pharetra et. Nullam kommodo hendrerit elementum. Donec porta faucibus ligula ikke blandet. I ultrices vehicula pretium.
Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus i masse arcu, ut auktor tellus. Alt du kan gjøre er at du ikke har mulighet til å sende en e-post. Vestibulum i enim vitae metus vulputate interdum. Mauris en risus auktor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit i mauris. Aenean quis risus ante. Donec bibendum er et eksempel på alt du trenger. Vivamus imperdiet congue leo, ikke ultralyd urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc i nisi i ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.
Det er bare en div med mye dummy innhold. Og her er den opprinnelige CSS, som angir noen faste dimensjoner og utløser både horisontale og vertikale rullebjelker:
.beholder bredde: 400px; høyde: 300px; bakgrunnsfarge: #DCDCDC; overløp: bla; / * viser rullestenger * /
Du bør kunne se noe som ligner på dette:
Noen gang tilbake (flere år) CSS Pseudo Elements ble introdusert i Webkit-nettlesere for å målrette scrollbars, og presenterte muligheten til å utforme siden din etter temaet ditt.
La oss stil noe, ved hjelp av -webkit- prefiks og webkit tilpassede rullefeltegenskaper. Husk at jeg holder fast i bare de grunnleggende CSS-egenskapene for enkel forståelse, med forklaring i kommentarer.
:: - webkit-rullefelt bredde: 15px; / * Dette retter seg mot standardrullebeltet (obligatorisk) * /
Når dette pseudoelementet er til stede, slår WebKit av den innebygde rullegjengivelsen, og bruker bare informasjonen som er oppgitt i CSS. - Surfin 'Safari
Og nå for noen av de andre pseudo-elementene:
:: - webkit-scrollbar-spor bakgrunnsfarge: # b46868; / * Den nye rullebaren vil ha et flatt utseende med den angitte bakgrunnsfargen * / :: - webkit-rullebjelke-tommel bakgrunnsfarge: rgba (0, 0, 0, 0.2); / * dette vil stile tommelen, ignorerer sporet * / :: - webkit-rulleknapp bakgrunnsfarge: # 7c2929; / * valgfritt, du kan stile topp og nederste knapper (venstre og høyre for horisontale streker) * / :: - webkit-rullehjørne bakgrunnsfarge: svart; / * Hvis både de vertikale og de horisontale linjene vises, må kanskje også høyre nederste hjørne være utformet * /
Etter å ha lagt til dette CSS bør du kunne se følgende effekt (igjen, bare nettlesere).
Det er riktig - faktisk var IE den første nettleseren som noen gang støttet styling av rullestenger gjennom CSS. Dette var tilbake i dagene til IE 5.5, men bare fargen kan endres.
Disse egenskapene kan fortsatt brukes i dag; ta en titt på denne ene eiendommen på IE 9 for demonstrasjonsformål:
kropp rullefarge-ansiktsfarge: # b46868;
Se hvordan det ville se ut:
Nok om WebKit. Firefox, IE og Opera kan også bli med i moroa. For dem har vi en veldig fin fallback-tilnærming i form av jScrollPane. Denne jQuery-plugin er utviklet av Kelvin Luck, og det vil bli vår frelser for dagen.
Kelvins nettsted har mange gode eksempler, men for grunnleggende bruk er alt vi trenger å laste ned jQuery og jScrollPane-filene og implementere dem på følgende måte:
Bare for å samsvare med temaet, la oss åpne jquery.jscrollpane.css og rediger følgende linjer med våre fargeværdier (for ytelsesforbedringer kan det være lurt å plassere alle stilene i dine egne filer):
.jspTrack bakgrunn: # b46868; / * endret fra #dde * / stilling: relativ; .jspDrag bakgrunn: rgba (0,0,0,0,2); / * endret fra #bbd * / posisjon: relativ; topp: 0; venstre: 0; markør: pointer;
Her er et skjermbilde av hva du vil se i Firefox:
Webapps som Gmail og Google+ (sammen med mange andre eksempler) har allerede omfavnet ideen, og hvis denne momentum fortsetter, vil kanskje Firefox og IE også gi sine egne løsninger.
Jeg håper du likte denne Quick Tip, og jeg ser frem til å se hva du gjør med scrollbars i designarbeidet ditt!
Hvis du leter etter en ferdig løsning, tilbyr Envato Market et utvalg av rullestenger som du kan plugge inn på nettstedet ditt for å oppnå en rekke effekter. Her er en titt på noen av dem:
Lazybars er en brukervennlig, temabar rullebar jQuery-plugin. Du kan implementere disse rulleskjermene bare ved å legge til et klassenavn til et rullbart element på nettstedet ditt.
Gjør bruk av temaene som følger med Lazybars, eller lag din egen med noen enkle CSS.
Lazybars - Formbar responsiv rullebar jQuery plugin"Fancy Scrollbar - WordPress" er et plugin som kan skape en tilpasset rullefelt på WordPress-nettsteder. Den har mange tilpasningsalternativer. Du kan tilpasse farge, effekter, rulleforsinkelse, rail strip, og mange flere parametere.
Fancy Scrollbar - WordPressAwesome Custom Scrollbar er et svært tilpassbart tilpasset rulleboks jQuery-plugin for ditt WordPress-nettsted. Med dette pluginet kan du tilpasse nettsideskrollruten, og du kan legge inn egendefinert rullelinje via kortnummer hvor som helst du vil, selv i temafiler.
Awesome Custom ScrollbarDZS Scroller gir en rullestol for nettstedet ditt som du kan tilpasse veldig enkelt via CSS hvis de tre skinnene som følger med, ikke er nok. Det kommer også med forbedret funksjonalitet som bla gjennom svinger eller fade på musen forlate. Og det fungerer på iPhone / iPad.
DZS ScrollerDet er enkelt å bruke den vakre og fargerike CSS3 Scrollbar for nettstedet ditt. Bare sett inn i den eksisterende CSS-filen og nyt den nye CSS3-rullegardinen.
CSS3 Scrollbar Styles
