Chi scrive e lavora con il codice CSS, saprà benissimo che ormai è in continua evoluzione, e le sue proprietà continuano ad aumentare.
Ormai il CSS3 si possono realizzare grafiche, animazioni ed effetti visivi che, anni fa, non avremmo mai immaginato di fare.
Questo è dovuto alla grande rivoluzione del web e del design digitale.
Avevo già trattato, pochi mesi fa, quelle che è stata l’evoluzione del web design, che ci ha portato a stravolgere molte
Con le proprietà più recenti si è arrivati ad un livello alto di personalizzazione della grafica di un sito.
Ormai si può veramente realizzare cose molto complesse, andando a coinvolgere sempre di più gli utenti che visitano i nostri siti web.
queste righe vedremo come personalizzare una scrollbar, infatti, con le ultime prprietà, si può realmente andare a personalizzare un componente che può sembrare poco influente per la grafica delle nostre pagine.
Prima di cominciare a descrivere come personalizzare la scrollbar con i css; rispondo a quella che è la domanda che si fanno i designer meno esperti: Cos’è la scrollbar?
La scrollbar è la barra che, solitamente si trova in una posizione laterale o orizzontale rispetto alla finestra del browser.
Questo perchè serve a ‘rivelare’ del contenuto di una pagina con un semplice scorrimento del mouse da parte dell’utente.
Molto più semplicemente è la barra che ci permette di scorrere la nostra pagina, se il contenuto di essa è abbondante.
L’azione di scorrimento della pagina attraverso la scrollbar, è detta scrolling.
Solitamente può essere di colore azzurro oppure grigio scuro e, fino a poco tempo fa, non si poteva personalizzare.
Quindi senza la scrollbar, non riusciremmo a leggere correttamente le pagine che hanno un contenuto che è più lungo della finestra del nostro browser.
Sullo scrolling, sono stati realizzati tanti plugin che permettono di realizzare animazioni allo scroll dell’utente con il suo mouse.
In questi anni, va di moda l’effetto fade allo scroll dell’utente, per migliorarne la user experience e lasciarlo a bocca aperta.
Ma, fino a poco tempo fa, non esistevano delle righe di codice css che ci permettessero di personalizzare l’aspetto dalla nostra barra di scorrimento.
Esistono degli script, ma serve l’ausilio e la conoscenza di codice Javascript e Jquery.
Un’esempio è il plugin Jquery SimpleBar, con cui può modificare l’aspewtto della scrollbar con poche righe di codice.
Invece, ora esistono due-tre proprietà css con cui si piò modificare il design della scrollbar, senza aggiungere codice Jquery..
Come detto, esiste una soluzione per personalizzarla senza il supporto di script differenti rispetto al CSS.
Ma..Attenzione! Questa soluzione non è ancora supportata da Firefox, Internet Explorer o Edge.
Le proprietà per agire sul design della scrollbar sono le seguenti:
Queste, spiegate in poche parole, sono le principali proprietà per personalizzare il componente della sscrollbar di una pagina.
Ora che abbiamo visto le basi per lavorare con le proprietà css per agire sul design della scrollbar, possiamo passare ai procedimenti più pratici.
Per prima cosa, voglio dire che per agire sulla grafica della scrollbar, si utilizzerà solo il codice css, senza aggiungere elementi html.
L’elemento è già prsente, quindi è solo da modificare e da lavorare.
Come primo passo andiamo a cambiare il colore al box in cui è inserita solitamente il componente, perciò all’interno del nostro file ccss inseriamo il seguente codice
<p>
<pre class="EnlighterJSRAW" data-enlighter-language="css">
::-webkit-scrollbar-track {
background-color:grey
}
</pre>
</p>
Successivamente andiamo a modificare quella che è la barra di navigazione, quindi useremo la proprietà ::-webkit-scrollbar-thumb.
<p>
<pre class="EnlighterJSRAW" data-enlighter-language="css">
::-webkit-scrollbar-track {
background-color:grey
}
::-webkit-scrollbar-track {
background-color:#eb9532;
border-radius:3px;
}
</pre>
</p>
In questo secondo pezzo di codice, ho inserito il mio colore di sfondo ed ho voluto dare un leggerissimo arrotondamento agli angoli della mia barra.
Ho inserito un’arancione chiaro come colore di sfondo per far vedere bene la differenza conil resto degli elementi dell’interfaccia.
Infine, si può inserire anche un’effetto hover sulla barra, in modo tale da far capire all’utente, quando sta passandoci sopra con il mouse.
Qui inserisco un’arancio leggermente più scurop per far vedere meglio l’effetto dell’animazione.
<p>
<pre class="EnlighterJSRAW" data-enlighter-language="css">
::-webkit-scrollbar-track {
background-color:grey
}
::-webkit-scrollbar-track {
background-color:#eb9532;
border-radius:3px;
}
::-webkit-scrollbar-track:hover {
background-color:#f5ab35;
}
</pre>
</p>
In questa demo molto semplice da realizzzare, abbiamo visto una personalizzazione di livello base.
Infatti, non tutte le proprietà css sono abbinabili a questa tipologia di lavoro, ad esempio non si può lavorare con la proprietà width per allargare o ingrandire la barra di scorrimento.
Anche con l’effetto hover, non si può inserire la proprietà transition o animation, per creare il tipico effetto di animazione dell’elemento.
Quindi, per ora, queste proprietà sono ancora in fase di sviluppo e di miglioramento.
Per ora, si riesce solo a lavorare su Google Chrome con esse, perchè come ben sapete, Intenert Eexplorer da sempre un pò di problemi con le proprietà css più recenti.
In questo articolo, ho descritto come personalizzare la scrollbar attraverso i css.
Ho utilizzato poche righe, perchè, come si può notare, le proprietà da utilizzare sono poche e molto facili da comprendere.
Come detto, c’è da aspettarsi un’ulteriore miglioramento nella gestione del design della scrollbar, ma nel frattempo consiglio di sperimentare e provare quelle disponibili, per dare un tocco in più al design delle nostre pagine web create con html e css.