Italiano

Tutorial CSS

Tutorial CSS3

CSS Avanzato

Riferimenti CSS

CSS Reattivo

CSS - Scrollbars: A Beginner's Guide

Ciao a tutti, futuri maghi del design web! Oggi esploreremo il magico mondo dei cursori di scorrimento CSS. Non preoccupatevi se non avete mai scritto una riga di codice prima - sarò il vostro guida amichevole in questo viaggio, e alla fine, sarete in grado di stilizzare i cursori di scorrimento come un professionista!

CSS - Scrollbars

Table of Contents

  1. Introduzione ai Cursori di Scorrimento
  2. Come Stilizzare i Cursori di Scorrimento?
  3. Selettori dei Cursori di Scorrimento
  4. Creare un Curatore di Scorrimento Personalizzato
  5. Stilizzare un Curatore CSS
  6. Proprietà Relate ai Cursori di Scorrimento CSS

Introduzione ai Cursori di Scorrimento

Prima di addentrarci nei dettagli, parliamo di cosa sono i cursori di scorrimento. Li avete visti ogni giorno mentre navigate su internet - sono quelle piccole barre sui lati o in basso di una pagina web che vi permettono di scorrere verso l'alto, il basso, la sinistra o la destra quando c'è più contenuto di quanti ne può entrare sullo schermo in una volta sola.

Ora, immagina se potessi muovere una bacchetta magica e cambiare l'aspetto di questi cursori di scorrimento. Beh, esattamente questo è ciò che impareremo oggi con CSS!

Come Stilizzare i Cursori di Scorrimento?

Stilizzare i cursori di scorrimento con CSS è come dare alla vostra pagina web un restyling. È un modo per fare emergere il vostro sito e fornire un'esperienza utente unica. Iniziamo con un esempio semplice:

/* Questo si applica a tutto il corpo della vostra pagina web */
body::-webkit-scrollbar {
width: 12px;               /* larghezza di tutto il curatore di scorrimento */
}

body::-webkit-scrollbar-track {
background: arancione;        /* colore dell'area di tracciamento */
}

body::-webkit-scrollbar-thumb {
background-color: blu;    /* colore del pollice di scorrimento */
border-radius: 20px;       /* rotondità del pollice di scorrimento */
border: 3px solid arancione;  /* crea un padding attorno al pollice di scorrimento */
}

In questo esempio, stiamo dicendo al browser di:

  1. Fare il curatore di scorrimento 12 pixel largo
  2. Colorare l'area di tracciamento arancione
  3. Fare il pollice di scorrimento blu
  4. Dare al pollice di scorrimento angoli arrotondati
  5. Aggiungere un bordo arancione attorno al pollice di scorrimento

Pretty cool, vero? Ma aspettate, c'è di più!

Selettori dei Cursori di Scorrimento

Per stilizzare i cursori di scorrimento, usiamo selettori speciali. Pensate a questi come a parole magiche che dicono a CSS quale parte del curatore di scorrimento cambiare. Ecco i principali:

Selettori Descrizione
::-webkit-scrollbar Stilizza tutto il curatore di scorrimento
::-webkit-scrollbar-button Stilizza i pulsanti sul curatore di scorrimento (freccia che punta verso l'alto e verso il basso)
::-webkit-scrollbar-track Stilizza l'area di tracciamento del curatore di scorrimento
::-webkit-scrollbar-track-piece Stilizza la parte dell'area di tracciamento non coperta dalla maniglia
::-webkit-scrollbar-thumb Stilizza la parte trascinabile del curatore di scorrimento
::-webkit-scrollbar-corner Stilizza l'angolo inferiore del curatore di scorrimento, dove si incontrano i cursori di scorrimento orizzontali e verticali
::-webkit-resizer Stilizza la maniglia trascinabile che appare nell'angolo inferiore di alcuni elementi

Creare un Curatore di Scorrimento Personalizzato

Ora che conosciamo le nostre parole magiche (selettori), creiamo un curatore di scorrimento personalizzato:

/* Creiamo un curatore di scorrimento a tema neon! */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grigio;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

In questo esempio, abbiamo creato un curatore di scorrimento che sembra appartenere a un film cyberpunk! L'area di tracciamento è nera con un'ombra interna leggera, e il pollice ha una gradiazione che cambia quando passate sopra. Applicate questa classe a qualsiasi elemento con overflow, e vedrete la magia accadere!

Stilizzare un Curatore CSS

Scomponiamo il processo di stilizzazione di un curatore di scorrimento in passaggi:

  1. Scegliete il vostro obiettivo: Decidete se volete stilizzare il curatore di scorrimento per l'intera pagina (usate body) o solo per un elemento specifico (usate una classe o un ID).

  2. Impostate la larghezza: Usate il selettore ::-webkit-scrollbar per impostare la larghezza complessiva del curatore di scorrimento.

  3. Stilizzate l'area di tracciamento: Usate ::-webkit-scrollbar-track per impostare lo sfondo, aggiungere ombre o altri stili all'area di tracciamento.

  4. Progettate il pollice: Usate ::-webkit-scrollbar-thumb per stilizzare la parte trascinabile del curatore di scorrimento. Questo è dove potete essere creativi con i colori, le gradazioni e le forme.

  5. Aggiungete interattività: Usate pseudo-classi come :hover o :active per cambiare l'aspetto del curatore di scorrimento quando gli utenti interagiscono con esso.

Ecco un esempio che mette tutto insieme:

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

Questo crea un curatore di scorrimento elegante e moderno per qualsiasi elemento con la classe cool-scroll. Il curatore di scorrimento è un po' più largo del default, ha angoli arrotondati, e si scurisce quando passate sopra.

Proprietà Relate ai Cursori di Scorrimento CSS

Mentre ci siamo concentrati sui browser WebKit (come Chrome e Safari), ci sono alcune proprietà standard CSS che funzionano su diversi browser. Ecco una tabella di queste proprietà:

Proprietà Descrizione
scrollbar-width Imposta la larghezza del curatore di scorrimento (solo per Firefox)
scrollbar-color Imposta il colore del curatore di scorrimento (solo per Firefox)
overflow Specifica cosa fare se il contenuto supera la casella dell'elemento
overflow-x Specifica cosa fare con i bordi sinistro/destra del contenuto se esso supera l'area di contenuto dell'elemento
overflow-y Specifica cosa fare con i bordi superiore/inferiore del contenuto se esso supera l'area di contenuto dell'elemento

Ecco come potreste usarle:

/* Per Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* Per altri browser */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

Questo codice imposta uno stile di curatore di scorrimento coerente su diversi browser. È sottile, con un'area di tracciamento chiara e un pollice scuro.

E voilà, ragazzi! Avete appena migliorato le vostre abilità CSS e imparato come stilizzare i cursori di scorrimento. Ricordate, con grande potere viene grande responsabilità - usate queste tecniche saggiamente per migliorare l'esperienza utente, non per creare interfacce distraenti o difficili da usare.

Continuate a sperimentare, continuate a imparare, e soprattutto, divertitevi! Chi lo sa, magari la prossima grande tendenza nel design web sarà il vostro curatore di scorrimento personalizzato. Buon coding!

Credits: Image by storyset

Tutorial precedente:
CSS - Dimensione
Prossimo tutorial:
CSS - Inline Block