Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. CSS
Webdesign

Rychlý tip: Styling posuvníků, aby odpovídaly vašemu UI

by
Length:LongLanguages:

Czech (Čeština) translation by Karel Krkoska (you can also view the original English article)

Tento tip vás provede zlepšením vzhledu scrollbarů, aby odpovídali návrhu vašeho uživatelského rozhraní. Podíváme se na to, co nám prohlížeče WebKit nabízejí z hlediska CSS, a navíc použijeme záchranu jQuery, který bude vyhovovat dalším prohlížečům.

Hledáte zkratku?

Pokud potřebujete pomoc se stylingem konkrétní komponenty vašeho webu, může být rychlejší získat pomoc od profesionála. Envato má odborníky připravené pomoci s re-stylingem nebo přizpůsobení všech druhů webových komponent.

Web component services on Envato Studio

Rychlá poznámka o prohlížečích

Když se odkazujeme na prohlížeče založené na Webkit, v podstatě mluvíme o Apple Safari a Google Chrome. Společně v současné době drží více než 40% celkového trhu prohlížečů pro stolní počítače. U tabletů Apple iPad bude vždy používat Webkit bez ohledu na to, který prohlížeč používá. Google také přidal Chrome do svého OS Android a Chromebooky jsou samozřejmě založeny na Google Chrome.

Když se podíváte na tyto čísla, mělo by to značit velmi pestrou budoucnost pro styling scrollbarů!


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

Než začneme s aktuálním tématem styling posuvníků s CSS, potřebujeme funkční demo; Stránky s posuvníky. Posuvníky lze vidět, pokud:

  • Obsah je větší než plocha viditelného okna (vpravo se zobrazí posuvník).
  • textarea obsahuje dostatek textu, aby se objevily posuvníky.
  •  iframe se používá k zobrazení jiné stránky.
  • Div nebo jiný blokový prvek má nastavenou property overflow.

Kvůli demoverzi zvolíme poslední možnost. Zde je můj počáteční zápis:

Je to jen div s dostatkem fiktivního obsahu. A zde je počáteční CSS, který nastavuje některé pevné rozměry a spouští horizontální i svislé posuvníky:

Měli byste vidět něco podobného:


Krok 2: Začínáme s Webkit prohlížeči

Někdy zpátky (několik let) CSS Pseudo Elements byly představeny v prohlížečích Webkit pro cílení na posuvníky, které představují příležitost pro stylování vaší stránky podle vašeho tématu.

Pojďme něco stylovat pomocí vlastností posuvníku -webkit- prefixu. Mějte na paměti, že se držím pouze základních vlastností CSS pro snadné porozumění, s vysvětlením v komentářích.

Když je tento pseudo prvek přítomen, WebKit vypne vestavěné vykreslování scrollbaru a použije informace poskytnuté v CSS. - Surfin 'Safari

A teď pro některé z dalších pseudo-elementů:

Po přidání tohoto CSS byste měli vidět následující efekt (opět jen prohlížeče Webkit).

Hádejte co? Internet Explorer má vlastní Styling posuvníků!

Je to pravda - ve skutečnosti byl IE prvním prohlížečem, který někdy podporoval styling posuvníků přes CSS. To bylo v době IE 5.5, ale šlo změnit pouze barvu.

Tyto vlastnosti lze používat ještě dnes; Podívejte se na tuto vlastnosti na IE 9 pro demonstrační účely:

Podívejte se, jak to vypadá:


Krok 3: Záloha pro prohlížeče Non-Webkit

Dost o WebKitu. Firefox, IE a Opera se mohou také připojit k zábavě. Pro ně máme velmi pěkný záložní přístup ve formě jScrollPane. Tento plugin jQuery je vyvinutý společností Kelvin Luck a bude to náš spasitel pro tento den.

Kelvinova webová stránka má spoustu dobrých příkladů, ale pro základní použití stačí stáhnout soubory jQuery a jScrollPane a implementovat je následujícím způsobem:

Pouze pro náš účel. Otevřete jquery.jscrollpane.css a upravte následující řádky hodnotami barev (pro zlepšení výkonu můžete všechny styly umístit do vlastních souborů):

Zde je screenshot toho, co uvidíte ve Firefoxu:


Shrnutí

Webové aplikace, jako je Gmail a Google+ (spolu s mnoha dalšími příklady), tuto myšlenku již přijali a pokud tato dynamika bude pokračovat, možná Firefox a IE také poskytnou vlastní řešení.

Doufám, že se vám tento Rychlý tip líbil a já se těším na to, že se podívám na to, co děláte s posuvnými lištami ve své práci!


Další zdroje

Přizpůsobitelné posuvníky na Envato Market

Pokud hledáte hotové řešení, Envato Market nabízí výběr posuvníků, které můžete připojit k vašim webovým stránkám, abyste dosáhli řady efektů. Zde je pohled na některé z nich:

1. Lazybars - Upravitelne responsivní posuvníky jQuery plugin

Lazybars je snadno použitelný plugin pro posuvníky jQuery. Tyto posuvníky můžete implementovat pouze přidáním názvu třídy k jakémukoli rolovacímu prvku na vašem webu.

Využijte témata, které jsou součástí programu Lazybars, nebo vytvořte svůj vlastní s jednoduchým CSS.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Upravitelne responsivní posuvníky jQuery plugin

2. Fancy Scrollbar - WordPress

"Fancy Scrollbar - WordPress" je plugin, který může vytvářet vlastní posuvník na stránkách WordPress. Má spoustu možností přizpůsobení. Můžete přizpůsobit barvy, efekty, zpoždění posunu, pásy kolejnic a mnoho dalších parametrů.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar je vysoce přizpůsobitelný plugin jQuery pro váš WordPress web. Pomocí tohoto pluginu můžete přizpůsobit posuvník na webových stránkách a můžete vkládat vlastní scrollbar přes krátký kód kdekoli chcete, dokonce i do souborů témat.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller poskytuje posuvník pro vaše stránky, který lze velmi snadno přizpůsobit pomocí CSS, pokud vám nestačí tři zahrnuté skiny. Dodává se také s vylepšenou funkčností, scrollovaní pouze najetím myší nebo vyblednutí myši. A funguje to na iPhone / iPad.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

Je snadné používat krásný a pestrý posuvník CSS3 pro vaše webové stránky. Jednoduše vložte do existujícího souboru CSS a vychutnejte 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.