Il CSS non serve più solo a rendere belli i siti. Si è evoluto in uno strumento che dà vita ai siti web con movimenti e interazioni che un tempo si pensava fossero impossibili.
Per questo motivo, questa guida vi aiuterà a familiarizzare con tre potenti funzioni in particolare: transizioni, animazioni e trasformazioni. La comprensione e l’utilizzo di queste tecniche avanzate sono essenziali per i web designer e gli sviluppatori che già conoscono le basi del CSS e vogliono creare siti web che si distinguano e che resistano alla prova del tempo.
Leggendo questa guida, acquisirete competenze preziose per elevare i vostri progetti web al di là dell’ordinario. E ci auguriamo ne trarrete anche un po’ di ispirazione.
Transizioni CSS avanzate
Le transizioni CSS avanzate rendono gli elementi dell’interfaccia utente interattivi, coinvolgenti e piacevoli da vedere. Immaginate di avere un pulsante sul vostro sito. Normalmente se ne sta lì, ma con le transizioni CSS, quando qualcuno ci passa sopra, cambia colore o magari cresce un po’ di dimensioni.
Il concetto ruota attorno all’idea dell’interpolazione, ovvero la transizione fluida tra diversi stati di una proprietà CSS.
Per creare questi effetti, bisogna conoscere alcune proprietà CSS:
- Proprietà di transizione: queste comprendono l’indicazione della proprietà che volete animare (come
background-coloroopacity), l’impostazione della durata della transizione e la scelta del parametrotransition-timing-function(comeease-inolinear), che determina l’andamento della transizione. - Funzioni di temporizzazione: sono indispensabili perché controllano l’accelerazione e la decelerazione della transizione. Una delle opzioni più versatili è la funzione
cubic-bezier. Questa funzione permette di creare curve di velocità personalizzate, dando un controllo completo sul ritmo della transizione. All’inizio può essere un po’ complicato, ma strumenti come cubic-bezier aiutano nella visualizzazione e nella creazione di queste curve.
Ecco un semplice esempio che illustra come utilizzare questo strumento nel vostro CSS:
.my-element {
transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
In questo snippet, .my-element cambierà opacità con una curva di velocità unica definita dalla funzione cubic-bezier. Questa curva impone un tipo di movimento specifico, ad esempio inizia lentamente, accelera e poi rallenta verso la fine.
Assegnando valori personalizzati a transition-timing-function, è possibile muovere gli elementi web in modo più naturale, dinamico o semplicemente diverso dallo standard. È un ottimo strumento per aggiungere personalità e finezza alle animazioni web.
Ed ecco alcune tecniche avanzate:
- Combinare più proprietà: perché accontentarsi di animare solo una cosa? I CSS permettono di allineare diverse proprietà e di animarle tutte insieme. Questo è perfetto per aggiungere livelli all’animazione.
- Animazioni sincronizzate: è anche possibile allineare diverse proprietà per far muovere gli elementi allo stesso ritmo, creando un effetto più coordinato.
- Transizioni annidate: è possibile applicare le transizioni agli elementi all’interno di un container. In questo modo, quando interagite con il container, gli elementi child si comportano nel modo che preferite.
Assicuratevi che queste animazioni non siano solo belle da vedere ma anche fluide, soprattutto sui dispositivi meno potenti. Proprietà come transform e opacity sono più semplici per i browser e non dovrebbero influire troppo sulle prestazioni.
Inoltre, un avviso con la proprietà will-change consente al browser di prepararsi per l’azione, assicurando che tutto fili liscio.
Questa è solo un’ultima nota per garantire che tutto questo funzioni ovunque: i browser possono essere esigenti. I prefissi dei vendor garantiscono che le transizioni funzionino correttamente su diversi browser. Si tratta di un po’ di lavoro in più, ma strumenti come gli autoprefixers sono molto utili ed evitano eventuali errori.
Le trasformazioni nei CSS
Le trasformazioni CSS sono un ottimo strumento per rendere più interessante il vostro design. Possono essere utilizzate per spostare le cose, ovviamente, ma possono cambiare l’intera atmosfera di una pagina. La proprietà transform è l’elemento principale.
È versatile e permette di spostare gli elementi da un punto all’altro, come far scorrere un’immagine sullo schermo o cambiarne le dimensioni: ad esempio, facendo sembrare qualcosa più vicino o più lontano, proprio come lo zoom di una foto. E se volete essere un po’ più fantasiosi, potreste anche far ruotare gli elementi.
La parte impressionante sono le trasformazioni 3D. Con funzioni come translate3d, scale3d e rotate3d, gli elementi possono saltare fuori dallo schermo, creando un’esperienza più coinvolgente all’interno del browser.
Prendiamo, ad esempio, l’effetto flipping card. Si tratta di un’interessante funzione in cui un lato di una card mostra determinate informazioni e, quando si capovolge, viene rivelato un nuovo contenuto sull’altro lato. Questo elemento interattivo può davvero catturare l’attenzione dei visitatori.
Per ottenere questo effetto si può utilizzare la proprietà backface-visibility. In questo modo il retro della card rimane nascosto fino a quando non deve essere visto.
Ma perché fermarsi qui? Si può ottenere molto di più combinando queste trasformazioni con transizioni e animazioni. Potreste avere un pulsante che cresce elegantemente di dimensioni quando ci si passa sopra il mouse o un’icona che si muove allegramente sullo schermo. Questi cambiamenti dinamici aggiungono fluidità agli elementi della pagina, rendendo l’esperienza dell’utente ancora più coinvolgente.
Designmodo offre diversi ottimi esempi di questo tipo di azione. Permette di visualizzare il CSS per le trasformazioni 3D e vedere il codice in azione:
Container query
Le container query sono un’altra funzionalità CSS che vale la pena esplorare. Permettono di modellare gli elementi in base alle dimensioni del loro contenitore, anziché in base alle dimensioni dell’intero schermo. Immaginate di avere una scatola e volete che gli elementi al suo interno abbiano un bell’aspetto indipendentemente dalle dimensioni della scatola. Le container query sono perfette per questo.
Sono molto utili quando si vuole che diverse parti della pagina, come le barre laterali o le schede, cambino aspetto a seconda dello spazio che hanno a disposizione. Ogni componente può decidere il proprio stile, indipendentemente dal resto della pagina.
Ecco in breve come utilizzarle:
- Impostare il container: per prima cosa, indicate al CSS quale parte della pagina è un container utilizzando proprietà come
container-typeecontainer-name. - Scrivere le query: proprio come le media query, ma per i container. Scrivete una regola che dice: “Ehi, se il contenitore è largo almeno così, allora apporta queste modifiche allo stile”
Ecco come si presenta il codice di base:
@container (min-width: 300px) {
.component {
/* styles */
}
}In questo esempio, gli stili della classe .component verranno applicati quando il suo contenitore raggiunge una larghezza minima di 300px.
Ora, le container query possono essere utilizzate in vari contesti, come ad esempio:
- Sidebar e footer reattivi: regolazione della larghezza e del layout delle barre laterali o dei footer in base alle dimensioni del container.
- Schede reattive: modifica del layout o dello stile delle schede in un layout a griglia o flexbox in base alla larghezza del loro contenitore.
Sebbene le container query siano supportate dai principali browser, tra cui Chrome, Firefox, Safari ed Edge, è comunque buona norma utilizzarle come progressive enhancement. Iniziate con gli stili di base per i browser che non le supportano e aggiungete le container query per i browser che le supportano.
Utilizzare Flexbox per l’allineamento verticale
Flexbox è uno strumento incredibilmente utile nei CSS, soprattutto per quanto riguarda l’allineamento verticale. Anche se esiste da un po’ di tempo, è sempre molto importante, soprattutto per allineare gli elementi lungo l’asse trasversale (che, a seconda del layout, può essere verticale).
Utilizzare align-items per l’allineamento verticale
La proprietà align-items di Flexbox è ideale per allineare gli elementi in verticale all’interno di un contenitore. Funziona quando il contenitore flex ha un flex-direction row. Questa proprietà permette di controllare l’allineamento di tutti i child di un flex container lungo l’asse trasversale.
Se avete un gruppo di elementi in un contenitore flessibile e volete che siano tutti centrati verticalmente, dovrete usare align-items: center;. Ecco le opzioni principali disponibili per align-items:
flex-start: allinea gli elementi all’inizio del container.flex-end: allinea gli elementi alla fine del container.center: centra gli elementi nel container.baseline: allinea gli elementi in base alla linea di base.stretch: allunga gli elementi per riempire il contenitore (comportamento predefinito).
Utilizzare align-self per il controllo individuale
align-items è ottimo per allineare tutti gli elementi di un contenitore, ma a volte può essere necessario allineare un solo elemento in modo diverso. Ecco perché align-self è molto utile. Questa proprietà permette di sovrascrivere il valore di align-items per i singoli elementi del flex. Accetta gli stessi valori di align-items.
Supponiamo di avere un contenitore flex con align-items: center; ma c’è un elemento che volete allineare all’inizio. Potete applicare align-self: flex-start; a quell’elemento specifico. In questo modo avrete un controllo preciso sull’allineamento dei singoli elementi.
Può essere molto utile vederlo in azione.
Supponiamo che stiate progettando una barra di navigazione con un logo, alcuni link e una barra di ricerca. Volete che i link siano centrati, che il logo sia allineato in alto e che la barra di ricerca sia allineata in basso.
Ecco come fare:
.nav-container {
display: flex;
flex-direction: row;
align-items: center;
}
.logo {
align-self: flex-start;
}
.search-bar {
align-self: flex-end;
}In questo esempio, il sito .nav-container è un contenitore flessibile con gli elementi generalmente centrati. Il logo e la barra di ricerca, tuttavia, si discostano da questa regola generale, allineandosi rispettivamente all’inizio e alla fine del contenitore.
Le moderne funzioni colore nei CSS
Le funzioni di colore nei CSS si sono evolute in modo significativo, e oggi offrono soluzioni più sofisticate per definire e manipolare i colori nel web design. Analizziamo alcune di queste funzioni:
1. rgb() e rgba()
La funzione rgb() definisce i colori utilizzando i canali rosso, verde e blu. Ogni canale può avere un valore compreso tra 0 e 255. La variante rgba() aggiunge un canale alfa per l’opacità, dove 1 è completamente opaco e 0 completamente trasparente.
Ecco un esempio:
.example {
color: rgb(255, 0, 0); /* Red */
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}2. hsl() e hsla()
hsl() rappresenta i colori in termini di tonalità, saturazione e luminosità, rendendo più intuitiva la selezione delle variazioni di colore. Come rgba(), hsla() ha un canale alfa per l’opacità. Eccone un esempio:
.example {
color: hsl(120, 100%, 50%); /* Green */
background-color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent green */
}3. oklch() e oklab()
oklch() e oklab() sono state aggiunte più di recente alle funzioni di colore dei CSS. Si basano sullo CIELAB color space, che è stato progettato per essere percettivamente uniforme. Ciò significa che le variazioni dei valori del colore corrispondono più fedelmente alle variazioni percepite dall’occhio umano.
Nello specifico:
oklab()è utilizzato per definire i colori in uno spazio percettivamente uniforme.oklch()è simile ma utilizza coordinate cilindriche (luminosità, colore e sfumatura).
Queste funzioni permettono di manipolare i colori in modo più accurato e intuitivo, soprattutto per attività come la creazione di gradienti di colore uniformi. Vediamo un esempio:
.example {
color: oklch(75%, 0.25, 250); /* A color in oklch */
background-color: oklab(0.623, 0.172, -0.079); /* A color in oklab */
}Schemi di colore avanzati
Con queste funzioni, in particolare con le più avanzate oklch() e oklab(), è possibile implementare schemi di colore complessi e visivamente coerenti e accattivanti. Offrono un maggiore controllo sul modo in cui i colori vengono resi e percepiti, facendo sì che i vostri progetti siano esteticamente gradevoli e accessibili.
Se combinate queste funzioni di colore con caratteristiche CSS come le proprietà personalizzate (variabili CSS) e i calcoli, potrete sviluppare sistemi di colore dinamici e flessibili che si adattano a temi, stati e ambienti diversi.
Dato che gli standard web e il supporto dei browser per queste funzioni continuano a cambiare, l’adozione di queste moderne funzioni cromatiche può migliorare notevolmente il design visivo e l’esperienza utente dei vostri progetti web.
Curvare il testo intorno alle immagini
La proprietà CSS shape-outside avvolge il testo intorno alle immagini, permettendo di creare layout più dinamici e visivamente interessanti e uno stile delle immagini più avanzato.
Permette di definire una forma attorno alla quale il contenuto in linea deve avvolgersi. È utile per avvolgere il testo intorno alle immagini in una forma non rettangolare, creando layout più organici e visivamente accattivanti rispetto all’avvolgimento rettangolare standard del testo.
Come funziona?
È possibile definire varie forme come cerchi, ellissi e poligoni, oppure utilizzare il canale alfa di un’immagine per definire la forma.
La proprietà shape-outside si applica tipicamente agli elementi fluttuanti. Quando si fa fluttuare un’immagine e si applica una proprietà shape-outside, il testo si avvolge intorno ad essa secondo la forma definita.
Ecco un esempio di shape-outside con un cerchio:
.image {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin-right: 15px;
}In questo esempio, la classe .image viene applicata a un elemento immagine. L’immagine è spostata a sinistra e shape-outside: circle(50%); crea una forma circolare attorno alla quale si avvolgerà il testo. shape-outside può aprire nuove possibilità all’interno dei vostri progetti poiché permette al testo di scorrere intorno a forme complesse, rendendo possibile la creazione di layout simili a quelli di una rivista e di pagine web visivamente ricche.
Blend mode CSS
I blend mode CSS permettono di mescolare colori e immagini, creando effetti visivi unici. Queste modalità di blend (fusione) permettono di creare effetti di testo accattivanti, sovrapposizioni di immagini e intricati motivi di sfondo. Questa proprietà viene utilizzata per definire il modo in cui le immagini e il colore di sfondo di un elemento devono fondersi tra loro. Ad esempio, se avete un’immagine di sfondo e un colore di sfondo, potete fonderli utilizzando diverse modalità di fusione come multiply, screen, overlay, ecc. Ecco come potrebbe apparire il codice:
.element {
background-image: url('image.jpg');
background-color: blue;
background-blend-mode: multiply;
}Ora mix-blend-mode fonde il contenuto di un elemento (comprese le immagini e il testo) con il suo sfondo. Questo è utile soprattutto per gli effetti di testo o per sovrapporre un’immagine a un’altra. In questo modo:
<
.element {
mix-blend-mode: screen;
}Modalità di fusione più diffuse
Come riferimento, ecco alcune delle modalità di fusione più diffuse da conoscere per utilizzare correttamente questo effetto:
- Multiply: moltiplica i colori del livello di fusione e del livello base, ottenendo un colore più scuro.
- Screen: rende i colori più chiari, all’opposto di Multiply. È utile per creare effetti di luce.
- Overlay: combina le modalità di fusione Multiply e Screen. Le parti chiare dell’immagine diventano più chiare e quelle scure più scure.
- Darken & lighten: seleziona rispettivamente il colore più scuro o più chiaro.
- Color dodge & color burn: schiarisce o scurisce il colore di base per riflettere il colore di fusione.
- Difference & exclusion: creano effetti di colore più artistici e invertiti.
Adattarsi alle preferenze degli utenti
L’adattamento alle preferenze degli utenti nel web design è fondamentale per creare siti web accessibili e di facile utilizzo. Le media query CSS per preferenze come prefers-color-scheme e prefers-reduced-motion svolgono un ruolo importante in questo processo.
prefers-color-scheme
Questa media query viene utilizzata per rilevare se l’utente ha chiesto al sistema di utilizzare un tema di colore chiaro o scuro. È un modo conveniente per implementare una modalità scura nel design di un sito web.
Potete utilizzare prefers-color-scheme per specificare stili diversi per le modalità chiare e scure.
Ad esempio:
/* Default light mode styles */
body {
background-color: white;
color: black;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}In questo frammento, gli stili predefiniti si applicano alla modalità chiara, mentre gli stili all’interno della query @media si applicano quando l’utente preferisce una combinazione di colori scuri.
prefers-reduced-motion
Questa media query è progettata per rilevare se l’utente ha richiesto al sistema di ridurre al minimo la quantità di animazioni o movimenti utilizzati. È fondamentale per gli utenti che soffrono di cinetosi o di disturbi vestibolari.
Potete utilizzare prefers-reduced-motion per ridurre o rimuovere le animazioni e le transizioni:
/* Standard animations */
.animate {
transition: transform 0.3s ease;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.animate {
transition: none;
}
}In questo caso, vedrete che le animazioni sono disabilitate quando l’utente ha indicato la preferenza per un movimento ridotto.
Aggiungere prefers-color-scheme e prefers-reduced-motion al codice CSS è un passo avanti verso un web più inclusivo e garantisce un sito accessibile e confortevole per un’ampia gamma di utenti con esigenze e preferenze diverse.
Gli pseudo-selettori :is() e :where()
Gli pseudo-selettori :is() e :where() sono strumenti CSS avanzati che permettono di gestire la specificità e semplificare complesse catene di selettori. Vediamo come funzionano.
pseudo-selettore :is()
Questo selettore permette di indirizzare più elementi con un’unica regola e riduce la ripetizione di selettori simili. La specificità della pseudo-classe :is() è la specificità del selettore più specifico tra i suoi argomenti.
/* Selects any paragraph or heading inside an article */
article :is(h1, h2, h3, p) {
color: blue;
}pseudo-selettore :where()
È simile a :is(), ma con una differenza fondamentale: :where() ha sempre una specificità pari a zero. Ciò lo rende utile per sovrascrivere gli stili senza aumentare la specificità. Potete utilizzarlo in questo modo:
/* Selects any paragraph or heading, but with no added specificity */
:where(article, section) p {
margin-bottom: 1em;
}Utilizzando :is() e :where(), potrete creare fogli di stile più flessibili e mantenibili, soprattutto quando si tratta di progetti complessi. Questi pseudo-selettori possono essere utili se avete bisogno di:
- Semplificare i selettori annidati: possono semplificare selettori annidati in profondità o raggruppati, rendendo il vostro CSS più leggibile e mantenibile nel tempo.
- Sovrascrivere gli stili:
:where()è ottimo per creare stili di base che possono essere facilmente sovrascritti senza preoccuparsi della specificità. - Riutilizzare gli stili: entrambi gli pseudo-selettori consentono di creare stili più modulari e riutilizzabili, in quanto potrete raggruppare diversi elementi sotto un’unica regola.
Per un’applicazione pratica, immaginate un menu di navigazione con diverse sezioni. Potete usare :is() per creare uno stile uniforme per tutti i link del menu, indipendentemente dal livello di annidamento:
nav :is(ul, ol, div) > li > a {
padding: 10px;
color: white;
}Riepilogo
Ci auguriamo che ora abbiate compreso meglio alcune delle tecniche CSS più avanzate disponibili nel 2024 e oltre, dalle transizioni CSS alle trasformazioni 3D.
Questa guida illustra queste tecniche avanzate e sottolinea la loro importanza nella realizzazione di progetti web reattivi, facili da usare e visivamente accattivanti. Indipendentemente da quale deciderete di utilizzare, ricordate di dare priorità all’accessibilità e alle prestazioni dei CSS in tutto ciò che fate.
Utilizzate già alcune di queste tecniche CSS avanzate? Avete consigli da suggerire ad altri?
Lascia un commento