Share
Deze tip zal u begeleiden bij het verbeteren van het uiterlijk van de schuifbalken om te passen bij uw UI-ontwerp. We zullen een kijkje nemen naar wat WebKit-browsers ons bieden in termen van CSS, plus we zullen een back-up van jQuery gebruiken voor andere browsers..
Als je hulp nodig hebt bij het stylen van een bepaald onderdeel van je website, kan het sneller zijn om hulp te krijgen van een professional. Envato heeft experts klaar om te helpen met het opnieuw stylen of aanpassen van allerlei webonderdelen.
Wanneer we naar Webkit-gebaseerde browsers verwijzen, hebben we het in wezen over Apple Safari en Google Chrome. Samen zijn ze momenteel goed voor meer dan 40% van de totale markt voor desktopbrowsers. Voor tablets zal de iPad van Apple altijd Webkit gebruiken, ongeacht de browser van het bedrijf. Google heeft Chrome ook toegevoegd aan zijn Android-besturingssysteem en Chromebooks zijn natuurlijk gebaseerd op Google Chrome.
Kijkend naar deze cijfers zou er een zeer mooie toekomst moeten zijn voor het stijlen van de schuifbalk!
Voordat we kunnen beginnen met het eigenlijke onderwerp van het stylen van schuifbalken met CSS, hebben we een functionele demo nodig; een pagina met schuifbalken. Scrollbars zijn te zien als:
Accentsconagua
textarea bevat voldoende tekst zodat schuifbalken verschijnen.iframe wordt gebruikt om een andere pagina weer te geven.div of een ander blokelement heeft zijn overloop eigenschap ingesteld.In het belang van deze demo gaan we met de laatste optie. Dit is mijn eerste opmaak:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla niet semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In de felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Mecenas zit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Klasse aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sedat imperdiet aliquet vestibulum. Curabitur viverra tortor augue, een aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscising malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus bij frusilla metus ultricies. Maecenas sed lacus aliquam nibh sempre dignissim et quis est.
Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. 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 consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sedumacademie erat quis mi luctus porta.
Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, en fringilla lectus porta quis. Donec eu fermentum mi. Donec heeft pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis zit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequent sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.
Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa boog, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris een risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula bij libero.
Het is gewoon een div met veel dummy-inhoud. En hier is de initiële CSS, die een aantal vaste dimensies instelt en zowel horizontale als verticale schuifbalken triggert:
.container breedte: 400 px; hoogte: 300 px; achtergrondkleur: #DCDCDC; overloop: scrollen; / * toont schuifbalken * /
U zou iets dergelijks als dit kunnen zien:
Eens terug (meerdere jaren) CSS Pseudo Elements werden geïntroduceerd in Webkit-browsers om schuifbalken te targeten, die de mogelijkheid bieden om je pagina volgens jouw thema in te richten.
Laten we iets stijlen, met behulp van de -webkit- prefix en webkit's aangepaste schuifbalkeigenschappen. Houd in gedachten dat ik vasthoud aan alleen de basis CSS-eigenschappen voor een beter begrip, met uitleg in opmerkingen.
:: - webkit-schuifbalk width: 15px; / * dit is gericht op de standaard schuifbalk (verplicht) * /
Wanneer dit pseudo-element aanwezig is, zal WebKit de ingebouwde weergave van de schuifbalk uitschakelen en de informatie in CSS gebruiken. - Surfin 'Safari
En nu voor enkele van de andere pseudo-elementen:
:: - webkit-scrollbar-track achtergrondkleur: # b46868; / * de nieuwe schuifbalk krijgt een plat uiterlijk met de ingestelde achtergrondkleur * / :: - webkit-scrollbar-thumb background-color: rgba (0, 0, 0, 0.2); / * dit zal de duim stylen, de track negeren * / :: - webkit-schuifbalk-knop background-colour: # 7c2929; / * optioneel kun je de bovenste en onderste knoppen stylen (links en rechts voor horizontale balken) * / :: - webkit-scrollbar-corner background-color: black; / * als zowel de verticale als de horizontale balk verschijnen, dan moet misschien ook de rechter benedenhoek gestyled worden * /
Na het toevoegen van deze CSS zou je het volgende effect moeten zien (nogmaals, alleen Webkit-browsers).
Dat klopt - in feite was IE de eerste browser die de vormgeving van schuifbalken via CSS ooit ondersteunt. Dit was in de tijd van IE 5.5, maar alleen de kleur kan worden gewijzigd.
Deze eigenschappen kunnen nog steeds worden gebruikt; Bekijk deze enkele eigenschap op IE 9 voor demonstratiedoeleinden:
body scrollbar-face-color: # b46868;
Zie hoe het eruit zou zien:
Genoeg over WebKit. Firefox, IE en Opera kunnen ook meedoen met het plezier. Voor hen hebben we een zeer mooie fallback-benadering in de vorm van jScrollPane. Deze plug-in voor jQuery is ontwikkeld door Kelvin Luck en het zal onze redder voor de dag zijn.
Kelvin's website heeft veel goede voorbeelden, maar voor basisgebruik hoeven we alleen jQuery en de jScrollPane-bestanden te downloaden en ze op de volgende manier te implementeren:
Alleen voor het afstemmen van ons thema, laten we openen jquery.jscrollpane.css en bewerk de volgende regels met onze kleurwaarden (voor prestatieverbeteringen wilt u mogelijk alle stijlen in uw eigen bestanden plaatsen):
.jspTrack background: # b46868; / * veranderd van #dde * / position: relative; .jspDrag background: rgba (0,0,0,0.2); / * veranderd van #bbd * / position: relative; boven: 0; links: 0; cursor: pointer;
Hier is een screenshot van wat u in Firefox ziet:
Webapps zoals Gmail en Google+ (samen met vele andere voorbeelden) hebben het idee al omarmd en als dit momentum aanhoudt, zullen Firefox en IE misschien ook hun eigen oplossingen bieden.
Ik hoop dat je deze snelle tip leuk vond en ik kijk er naar uit om te zien wat je doet met schuifbalken in je ontwerpwerk!
Als u op zoek bent naar een kant-en-klare oplossing, biedt Envato Market een selectie schuifbalken die u op uw website kunt aansluiten om een reeks effecten te bereiken. Hier zijn enkele van hen:
Lazybars is een eenvoudig te gebruiken, handige jQuery-invoegtoepassing. U kunt deze schuifbalken implementeren door een klassenaam toe te voegen aan een schuifbaar element op uw website.
Maak gebruik van de thema's die zijn gebundeld met Lazybars, of maak uw eigen met enkele eenvoudige CSS.
Lazybars - Mogelijke responsieve jQuery-invoegtoepassing in de schuifbalk"Fancy Scrollbar - WordPress" is een plug-in die een aangepaste schuifbalk op WordPress-sites kan maken. Het heeft veel aanpassingsopties. U kunt de kleur, effecten, schuifvertraging, spoorstrook en nog veel meer parameters aanpassen.
Fancy Scrollbar - WordPressAwesome Custom Scrollbar is een zeer aanpasbare aangepaste schuifbalk jQuery-plug-in voor uw WordPress-website. Met deze plug-in kunt u de schuifbalk van uw webpagina aanpassen en kunt u Custom Scrollbar insluiten via shortcode waar u maar wilt, zelfs in themabestanden.
Geweldige aangepaste schuifbalkDZS Scroller biedt een schuifbalk voor uw site die u heel gemakkelijk via CSS kunt aanpassen als de drie meegeleverde skins niet voldoende zijn. Het komt ook met verbeterde functionaliteit, zoals scroll by hover of fade op mouse leave. En het werkt op iPhone / iPad.
DZS ScrollerHet is gemakkelijk om de prachtige en kleurrijke CSS3-schuifbalk voor uw website te gebruiken. Voeg eenvoudig in het bestaande CSS-bestand in en geniet van de nieuwe CSS3-schuifbalk.
CSS3 schuifbalkstijlen
