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

Consiglio Veloce: Modellare la Barra di Scorrimento per Abbinarla al tuo UI Design

by
Length:LongLanguages:

Italian (Italiano) translation by Mariano Serafini (you can also view the original English article)

Questo suggerimento vi guiderà nel migliorare l'aspetto delle barre di scorrimento per abbinarle al tuo design UI. Daremo un'occhiata a ciò che i browser di WebKit ci offrono in termini di CSS, oltre a utilizzare una fallback di jQuery per tutti gli altri browsers.

Cerchi una Scorciatoia?

Se hai bisogno di aiuto per disegnare un particolare componente del tuo sito web, può essere più veloce chiedere aiuto ad un professionista. Envato ha esperti pronti ad aiutarti a fare un re-styling o personalizzare tutti i tipi di componenti web.

Web component services on Envato Studio

Nota veloce sui browsers

Quando ci riferiamo a browser basati su Webkit, stiamo parlando essenzialmente di Apple Safari e di Google Chrome. Insieme attualmente detengono più del 40% del mercato globale dei browser desktop. Per i tablets, l'iPad di Apple utilizzerà sempre Webkit a prescindere dal browser utilizzato. Google ha anche aggiunto Chrome al suo sistema operativo Android e i Chromebook sono naturalmente basati su Google Chrome.

Basandoci su questi dati dovrebbe esserci un futuro molto brillante per la modellazione delle barre di scorrimento!


Passo 1: una semplice pagina con barre di scorrimento

Prima di iniziare con la creazione di barre di scorrimento con CSS, abbiamo bisogno di una demo funzionale: una pagina con barre di scorrimento. Le barre di scorrimento possono essere viste se:

  • I contenuti sono più grandi dell'area della finestra visibile (una barra di scorrimento apparirà sulla destra).
  • Una textarea contiene abbastanza testo da far apparire una barra di scorrimento.
  • Una iframe è usata per visualizzare una pagina differente.
  • Un div o altri elementi hanno impostata la loro proprietà overflow

Per questa demo, useremo l'ultima opzione. Ecco il mio markup iniziale:

è solo un div con un sacco di contenuti fittizi. Ed ecco il CSS iniziale, che imposta alcune dimensioni fisse e attiva entrambe le barre di scorrimento orizzontali e verticali: 

Dovresti essere in grado di vedere qualcosa di simile a questo:


Passo 2: iniziare con browser Webkit

Una volta (molti anni fa) sono stati introdotti gli peudo elementi CSS nei browsers Webkit per indicare le barre di scorrimento, dando l'opportunità di personalizzare la tua pagina in base al tuo tema.

Aggiungiamo qualche stile, usando il prefisso -webkit- e la barra di scorrimento personalizzata di webkit. Tieni presente che mi sto attenendo alle proprietà CSS di base per facilitare la comprensione, con spiegazioni nei commenti.

Quando questo pseudo elemento è presente, WebKit spegnerà il rendering di base della barra di scorrimento e utilizza solo le informazioni fornite nel CSS. - Navigando Safari

E ora per altri pseudo elementi:

Dopo aver aggiunto questo CSS dovresti essere in grado di vedere il seguente effetto (di nuovo, solo nei browser Webkit).

Indovina un po'? Internet Explorer ha il proprio stile per la barra di scorrimento!

Questo è vero - in effetti IE è stato il primo browser a supportare la modellazione delle barre di scorrimento tramite CSS. Questo è dai tempi di IE 5.5, ma solo il colore può essere modificato.

Queste proprietà possono ancora essere utilizzate oggi; Date un'occhiata a questa singola proprietà su IE 9 per scopi dimostrativi:

Guardate come apparirebbe:


Passo 3: fallback per browser non-Webkit

Basta Webkit. Firefox, IE e Opera possono unirsi al divertimento. Per loro abbiamo un approccio con fallback molto carino sotto forma di jScrollPane. Questo plugin jQuery è stato sviluppato da Kelvin Luck e sarà il nostro salvatore di oggi.

Il sito web di Kelvin ha molti buoni esempi, ma per l'uso di base tutto quello che dobbiamo fare è scaricare jQuery e i file di jScrollPane e implementarli nel modo seguente: 

Semplicemente per abbinarlo al nostro tema, apriamo jquery.jscrollpane.css e modifichiamo le seguenti righe con i nostri valori di colore (per migliorare le prestazioni è possibile posizionare tutti gli stili all'interno dei propri file):

Ecco una schermata di ciò che vedrai in Firefox:


Conclusioni

applicazioni web come Gmail e Google+ (insieme a molti altri esempi) hanno già abbracciato l'idea e se questo slancio continua, forse anche Firefox e IE forniranno le proprie soluzioni. 

Spero ti sia piaciuto questo consiglio rapido e non vedo l'ora di vedere cosa fai con le barre di scorrimento nel tuo lavoro di design!


Ulteriori Risorse

Barre di scorrimento personalizzabili su Envato Market

Se sei alla ricerca di una soluzione pronta, Envato Market offre una selezione di barre di scorrimento che è possibile collegare al tuo sito web per ottenere una serie di effetti. Ecco uno sguardo ad alcuni di loro:

1. Lazybars - Plugin jQuery per barre di scorrimento responsive e personalizzabili

Lazybars è un plugin jQuery semplice da utilizzare e personalizzabile. È possibile implementare queste barre di scorrimento semplicemente aggiungendo ilnome di una classe a qualsiasi elemento scorrevole sul tuo sito web.

Utilizza i temi che sono raccolti in Lazybars, o crea il tuo con semplice CSS.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Plugin jQuery per barre di scorrimento responsive e personalizzabili

2. Fancy Scrollbar - WordPress

“Fancy Scrollbar – WordPress”  è un plugin che può creare una barra di scorrimento personalizzata nei siti di WordPress. Ha molte opzioni di personalizzazione. È possibile personalizzare il colore, gli effetti, il ritardo di scorrimento, la striscia dei binari e molti altri parametri.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar è un plugin jQuery altamente personalizzabile per barra di scorrimento per il tuo sito web di WordPress. Con questo plugin è possibile personalizzare la barra di scorrimento della tua pagina web e puoi incorporare la barra di scorrimento personalizzata tramite il codice ovunque desideri, anche nei file del tema.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller fornisce una barra di scorrimento per il tuo sito che è possibile personalizzare facilmente tramite CSS se i tre temi inclusi non sono sufficienti. Viene inoltre fornito di funzionalità avanzate come lo scorrimento quando il mouse punta sulla barra o la dissolvenza quando il mouse si leva.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

La barra di scorrimento CSS3 è bella, colorata e facile da usare per il tuo sito web. Inseriscila semplicemente nel file CSS esistente e godetevi le nuove barre di scorrimento 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.