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

Kratki Savjet: Stiliziranje Kliznog Traka Koji Pristaje Vašem UI Dizajnu

by
Length:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Ovaj savjet će vam poslužiti kao vodič da unaprijedite izgled i dojam kliznih traka kako bi se uklopile u vaš UI dizajn. Pogledati ćemo što WebKit pretraživači nude što se tiče CSS-a, i povrh toga, upotrijebiti ćemo jQuery fallback za druge pretraživače.

Tražite Brže Rješenje?

Ako trebate pomoć sa stiliziranjem određene komponente za vašu web stranicu, moglo bi biti brže potražiti pomoć profesionalaca. Envato ima stručnjake koji su spremni pomoći oko re-stiliziranja ili prilagođavanja svih vrsta web komponenti.

Web component services on Envato Studio

Kratka Napomena o Pretraživačima

Kada se referiramo na Webkit-bazirane pretraživače, doslovno govorimo o Apple Safari i Google Chrome-u. Trenutno, zajedno drže više od 40% ukupnog tržišta desktop pretraživača. Za tablete, Apple-ov iPad će uvijek koristiti Webkit neovisno o pretraživaču koji je korišten. Google je također dodao Chrome u svoj Android OS i Chromebook-ovi su, naravno, bazirani na Google Chrome-u.

Uzevši u obzir navedeno, stiliziranje klizne trake trebala bi čekati veoma svijetla budućnost!


1. korak: Jednostavna Stranica sa Kliznim Trakama

Prije nego što možemo početi sa aktualnom temom stiliziranja kliznih traka sa CSS-om, trebamo funkcionalni demo; stranicu sa kliznim trakama. Klizne trake mogu se vidjeti ako:

  • Su sadržaji veći od vidljivih prozora (klizna traka će se pojaviti zdesna).
  • textarea sadrži dovoljno teksta da se pojavi klizna traka.
  • se iframe koristi da prikaže drugu stranicu
  • div ili bilo koji drugi blok element ima svoj overflow pravilno podešen

Za ovaj demo odabrati ćemo posljednju opciju. Ovo je moj inicijalni markup:

To je samo div sa dummy sadržajem. I ovdje je inicijalni CSS, koji podešava neke popravljene dimenzije i i trigere horizontalne i vertikalne klizne trake.

Trebali biste vidjeti nešto poput ovog:


2. korak: Početak sa Webkit Pretraživačima

Nekada (prije nekoliko godina) CSS Pseudo Elementi su uvedeni u Webkit pretraživače da ciljaju klizne trake, predstavljajući mogućnost da stilizirate svoju stranicu prema temi.

Stilizirajmo nešto koristeći -webkit- prefiks i svojstva klizne trake webkit-a. Imajte na umu da se držim samo osnovnih svojstva CSS-a za lakše razumijevanje, sa objašnjenjima u komentarima.

Kada je prisutan ovaj pseudo element, Webkit će isključiti renderiranje svoje ugrađene klizne trake i samo upotrijebiti informaciju u CSS-u. - Surfin' Safari

I sada neki drugi pseudo elementi:

Nakon dodavanja ovog CSS-a trebali biste vidjeti sljedeći efekt (opet, samo Webkit pretraživači).

Znate što? Internet Explorer ima svoj stil klizne trake!

Tako je - ustvari, IE je bio prvi pretraživač koji podržava stiliziranje klizne trake kroz CSS- To je bilo još u vrijeme IE 5.5, ali samo boja se mogla mijenjati.

Ova svojstva mogu se koristiti još i danas; pogledajte ovo jedno svojstvo na IE 9 za potrebe demonstracije:

Pogledajte kako bi trebalo izgledati:


3. korak: Fallback za Pretraživače Koji se Ne Baziraju na Webkitu

Dosta o WebKit-u. Firefox. IE, i Opera mogu se također pridružiti zabavi. Za njih imamo zaista zgodan fallback pristup u obliku jScrollPane-a. Ovaj jQuery plugin razvio je Kelvin Luck i biti će naš spasioc dana.

Na Kelvinovoj web stranici ima mnogo dobrih primjera, ali za osnovnu upotrebu trebamo samo preuzeti jQuery i jScrollPane datoteke te ih implementirati na sljedeći način:

Samo u svrhu rada s našom temom, otvorimo jquery.jscrollpane.css i editirajte sljedeće redove sa vrijednostima boje (za poboljšanje performansi možda ćete željeti smjestitisve stilove u svoje datoteke):

Na screenshot-u je prikazano što ćete vidjeti u Firefoxu:


Zaključak

Web aplikacije kao što su Gmail i Google+ (zajedno s mnogim drugim primjerima) već su prihvatile ideju i ako se ovako nastavi, možda će Firefox i IE također ponuditi svoja rješenja.

Nadam se da ste uživali u ovom Krakom Savjetu i radujem se vidjeti što ćete vi učiniti sa kliznim trakama u svojem dizajnu!


Dodatni Izvori

Klizne Trake Koje Možete Prilagoditi na Envato Marketu

Ako tražite već gotovo rješenje, spremno za upotrebu, Envato Market nudi odabir kliznih traka koje možete uključiti u svoju web stranicu da postignete cijeli niz efekata. Pogledajte neke od njih:

1. Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars je lagan za korištenje, tematska klizna traka, jQuery plugin. Ove klizne trake možete implementirati samo dodavanjem imena klase bilo kojem kliznom element na vašoj web stranici.

Iskoristite teme koje se nalaze u Lazybars plugin-u, ili izradite vlastiti sa jednostavnim CSS-om.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themeable responsive scrollbar jQuery plugin

2. Fancy Scrollbar - WordPress

“Fancy Scrollbar – WordPress” je plugin koji može kreirati prilagodljivu kliznu traku na WordPress stranicama, Ima mnogo opcija koje možete prilagođavati. Možete prilagođavati boju, efekte, odgodu skrola, i mnoge druge parametre.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar je veoma prilagodljiv 'scrollbar' (klizna traka) jQuery plugin za vašu WordPress web stranicu. Sa ovim pugin-om možete prilagoditi kliznu traku na svojoj web stranici, i možete ga ugnjezditi sa shortcode-om gdje god želite, čak i u datoteke teme.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

 4. DZS Scroller

DZS Scroller pruža kliznu traku za vašu stranicu koju možete prilagoditi vrlo lako sa CSS-om ako tri uključena skina nisu dovoljna. Također dolazi sa naprednom funkcionalnošću. I radi na iPhone/Ipad-u.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

Lako je koristiti prekrasan i raznobojan CSS3 Scrollbar za vašu web stranicu. Jednostavno ga ubacite u postojeću CSS datoteku i i uživajte u novom CSS3 Scrollbar-u.

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.