Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Rýchly tip: Styling posuvníkov, aby zodpovedali vášmu UI

by
Length:LongLanguages:

Slovak (Slovenčina) translation by Jakub Dokoupil (you can also view the original English article)

Tento tip vás prevedie zlepšením vzhľadu scrollbar, aby odpovedali návrhu vášho používateľského rozhrania. Pozrieme sa na to, čo nám prehliadača WebKit ponúkajú z hľadiska CSS, a navyše použijeme záchranu jQuery, ktorý bude vyhovovať ďalším prehliadačom.

Hľadáte skratku?

Ak potrebujete pomoc sa stylingom konkrétne komponenty vášho webu, môže byť rýchlejší získať pomoc od profesionála. Envato má odborníkmi pripravené pomôcť s re-stylingom alebo prispôsobenie všetkých druhov webových komponentov.

Web component services on Envato Studio

Rýchla poznámka o prehliadačoch

Keď sa odkazujeme na prehliadača založené na Webkit, v podstate hovoríme o Apple Safari a Google Chrome. Spoločne v súčasnosti drží viac ako 40% celkového trhu prehliadačov pre stolné počítače. U tabletov Apple iPad bude vždy používať Webkit bez ohľadu na to, ktorý prehliadač používa. Google tiež pridal Chrome do svojho OS Android a Chromebooky sú samozrejme založené na Google Chrome.

Keď sa pozriete na tieto čísla, malo by to značiť veľmi pestrú budúcnosť pre styling scrollbar!


Krok 1: Jednoduchá stránka s posuvníky

Než začneme s aktuálnou témou styling posuvníkov s CSS, potrebujeme funkčné demo; Stránky s posuvníky. Posuvníky možno vidieť, ak:

  • Obsah je väčšia ako plocha viditeľného okna (vpravo sa zobrazí posúvač).
  • textarea obsahuje dostatok textu, aby sa objavili posuvníky.
  • iframe sa používa na zobrazenie inej stránky.
  • Div alebo iný blokový prvok má nastavenú property overflow.

Kvôli demoverziu zvolíme poslednú možnosť. Tu je môj počiatočný zápis:

Je to len div s dostatkom fiktívneho obsahu. A tu je počiatočný CSS, ktorý nastavuje niektoré pevné rozmery a spúšťa horizontálne i zvislé posuvníky:

Mali by ste vidieť niečo podobné:


Krok 2: Začíname s Webkit prehliadači

Niekedy staré (niekoľko rokov) CSS Pseudo Elements boli predstavené v prehliadačoch Webkit pre zacielenie na posuvníky, ktoré predstavujú príležitosť pre štýlovanie vašej stránky podľa vášho téme.

Poďme niečo stylovať pomocou vlastností posuvníka -webkit- prefixu. Majte na pamäti, že sa držím iba základných vlastností CSS pre jednoduché porozumenie, s vysvetlením v komentároch.

Keď je tento pseudo prvok prítomný, WebKit vypne vstavané vykresľovanie scrollbaru a použije informácie poskytnuté v CSS. - Surfin 'Safari

A teraz pre niektoré z ďalších pseudo-elementov:

Po pridaní tohto CSS by ste mali vidieť nasledujúce efekt (opäť len prehliadača Webkit).

Hádajte čo? Internet Explorer má vlastný Styling posuvníkov!

Je to pravda - v skutočnosti bol IE prvým prehliadačom, ktorý niekedy podporoval styling posuvníkov cez CSS. To bolo v čase IE 5.5, ale išlo zmeniť len farbu.

Tieto vlastnosti možno používať ešte dnes; Pozrite sa na túto vlastnosti na IE 9 pre demonštračné účely:

Pozrite sa, ako to vyzerá:


Krok 3: Záloha pre prehliadače Non-Webkit

Dosť o WebKite. Firefox, IE a Opera sa môžu tiež pripojiť k zábave. Pre nich máme veľmi pekný záložný prístup vo forme jScrollPane. Tento plugin jQuery je vyvinutý spoločnosťou Kelvin Luck a bude to náš spasiteľ pre tento deň.

Kelvinova webová stránka má veľa dobrých príkladov, ale pre základné použitie stačí stiahnuť súbory jQuery a jScrollPane a implementovať ich nasledujúcim spôsobom:

Len pre náš účel. Otvorte jquery.jscrollpane.css a upravte nasledujúce riadky hodnotami farieb (pre zlepšenie výkonu môžete všetky štýly umiestniť do vlastných súborov):

Tu je screenshot toho, čo uvidíte vo Firefoxe:


Zhrnutie

Webové aplikácie, ako je Gmail a Google+ (spolu s mnohými ďalšími príkladmi), túto myšlienku už prijali a ak táto dynamika bude pokračovať, možno Firefox a IE tiež poskytnú vlastné riešenia.

Dúfam, že sa vám tento Rýchly tip páčil a ja sa teším na to, že sa pozriem na to, čo robíte s posuvnými lištami vo svojej práci!


Ďalšie zdroje

Prispôsobiteľné posuvníky na Envato Market

Ak hľadáte hotové riešenie, Envato Market ponúka výber posuvníkov, ktoré môžete pripojiť k vašim webovým stránkam, aby ste dosiahli radu efektov. Tu je pohľad na niektoré z nich:

1. Lazybars - upraviteľná responsívna posuvníky jQuery plugin

Lazybars je ľahko použiteľný plugin pre posuvníky jQuery. Tieto posuvníky môžete implementovať iba pridaním názvu triedy k akémukoľvek rolovaciemu prvku na vašom webe.

Využite témy, ktoré sú súčasťou programu Lazybars, alebo vytvorte svoj vlastný s jednoduchým CSS.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - upraviteľné responsívné posuvníky jQuery plugin

2. Fancy Scrollbar - WordPress

"Fancy Scrollbar - WordPress" je plugin, ktorý môže vytvárať vlastné posuvník na stránkach WordPress. Má veľa možností prispôsobenia. Môžete prispôsobiť farby, efekty, oneskorenie posunu, pásy koľajníc a mnoho ďalších parametrov.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar je vysoko prispôsobiteľný plugin jQuery pre váš WordPress web. Pomocou tohto pluginu môžete prispôsobiť posuvník na webových stránkach a môžete vkladať vlastné scrollbar cez krátky kód kdekoľvek chcete, dokonca aj do súborov tém.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller poskytuje posuvník pre vaše stránky, ktorý možno veľmi ľahko prispôsobiť pomocou CSS, pokiaľ vám nestačia tri zahrnuté skiny. Dodáva sa tiež s vylepšenou funkčnosťou, scrollovanie iba nabehnutím myšou alebo vyblednutie myši. A funguje to na iPhone / iPad.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

Je ľahké používať krásny a pestrý posuvník CSS3 pre vaše webové stránky. Jednoducho vložte do existujúceho súboru CSS a vychutnajte si nový posuvník CSS3.

CSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.