Esplorando funzionalità poco conosciute e tecniche avanzate di CSS per un design web innovativo

Carlo: Ciao a tutti! Oggi io e Martina presenteremo una lista di tips & tricks, offrendo spunti utili sia per migliorare l’efficienza dello sviluppo front-end, ma anche per creare effetti estetici che colpiscano gli utenti. 

Martina: Proprio così! Il mondo del CSS è diventato man mano smisurato, e alcune novità importanti possono passare inosservate. Presenteremo questi concetti attraverso esempi pratici, spiegazioni dettagliate ed immagini esplicative.

Mix-blend-mode

Carlo: Una proprietà sottovalutata dagli esperti del CSS è mix-blend-mode. Questo effetto definisce come i colori di un elemento vengono combinati con il suo sfondo o con altri elementi; esso supporta un’ampia varietà di valori ma noi ne approfondiremo alcuni:

• multiply: I colori del livello superiore e di quello inferiore si mescolano, producendo un effetto scuro.
• screen: Produce un effetto più chiaro, come se si stessero combinando due luci.
• overlay: Combina multiply e screen, a seconda della luminosità del colore di base.
• difference: Sottrae i colori del livello superiore da quelli del livello inferiore (o viceversa), creando un effetto ad alto contrasto.

Personalmente, questa proprietà mi è tornata utile nel processo di sviluppo del portale di donazioni dell’Università di Bologna, Unimpatto. In particolare, nella creazione del seguente hero:


Creando due contenitori separati per titolo e descrizione, mi è bastato applicare la proprietà 

mix-blend-mode: screen;

sul primo contenitore, ciò ha fuso il titolo con lo sfondo creando un effetto coinvolgente!

Gradient CSS

Martina: Combinando l'eleganza dei gradienti sfumati con la dinamicità delle animazioni fluide, si possono trasformare gradienti statici in elementi dinamici grazie al solo uso del CSS. Il seguente snippet

mostra come ottenere un effetto accattivante e interattivo perfetto per hero section e landing page.
Usando proprietà come linear-gradient, background-size, @keyframes, e sfruttando un’animazione che chiameremo moveGradient, è possibile creare una transizione di colori fluida. Nello specifico cosa permettono di fare?

• linear-gradient: Crea una transizione graduale tra più colori.
• background-size: Controlla l’ampiezza dell’area dello sfondo, creando l’effetto di movimento del gradiente durante l’animazione.
• @keyframes moveGradient: Crea un’animazione che sposta la posizione dello sfondo da 0% a 100%, da sinistra verso destra.

Inoltre, sfrutta proprietà come ease per un’animazione fluida e infinite per cicli continui.
Con poche righe di codice, è possibile ottenere un impatto visivo moderno e coinvolgente, semplificando il design e migliorando le prestazioni evitando di appesantire il sito con JavaScript. 

Animazione con display: none

Carlo: Se avete mai giocato con le animazioni e transizioni in CSS puro, sicuramente all’inizio del vostro percorso avrete provato, invano, ad animare un elemento con display: none/block per nasconderlo o mostrarlo, ma senza successo. Questo perché display è una proprietà discreta, ovvero può assumere solo un numero definito di valori distinti, a differenza delle proprietà continue.

Queste regole però, stanno lentamente cambiando, vediamo un esempio:

Applicando il valore

animation : display .3 ease allow-discrete;

si permette la gestione della transizione per la proprietà display, e congiuntamente alla transizione sull’opacità che viene settata a 0 grazie alla regola @starting-style, si ottiene l’effetto desiderato.

Attenzione però! E’ sempre buona regola controllare quali browser supportano le novità più recenti.

Typing & erasing text animation

Martina: Un semplice elemento di testo può essere trasformato in un’animazione dinamica e coinvolgente, sfruttando l’effetto ciclico di scrittura e cancellazione. Questo tipo di animazione, per esempio, può simulare il comportamento realistico di una macchina da scrivere, come si può vedere nell’esempio:

Attraverso le animazioni CSS @keyframes, si possono ottenere transizioni fluide e realistiche per aggiungere un tocco interattivo al testo.

Tre elementi chiave costituiscono il fulcro dell’animazione:

• Typing: gestisce l'effetto di digitazione, simulando la scrittura del testo carattere per carattere.
• Deleting: realizza l'effetto opposto a typing, simulando la cancellazione del testo.
• Blink: permette al cursore di lampeggiare, dando l’illusione di una macchina da scrivere 

Entrambi i keyframes sono combinati con la proprietà steps(37, end) che suddivide l’animazione in 37 passaggi, uno per ogni carattere presente nel testo, simulando la tipica digitazione manuale su una macchina da scrivere, carattere per carattere.

Nello snippet viene usata anche la funzione clamp(), che permette al testo di adattarsi automaticamente a schermi di diverse dimensioni, rendendolo ideale per un design responsivo.

Questa animazione ciclica alterna una fase di digitazione, una pausa e la cancellazione del testo, perfetta per introdurre elementi creativi capaci di catturare l’attenzione dell’utente.

CSS Advanced pseudo-elements

Carlo: Gli pseudo-elementi nel CSS sono delle keywords speciali che permettono la stilizzazione di alcune parti degli elementi senza la necessità di modificare la struttura HTML. Tra i più conosciuti troviamo ::before e ::after, utilizzati con la proprietà content per aggiungere contenuto decorativo.

a {
  color: #0000ff;
  text-decoration: none;
}
          
a::before,
a::after {
  content: '🔗';
  */ style .. */
}      

Sono presenti, però, altri pseudo elementi che il più delle volte vengono ignorati dagli operatori del CSS. 

selector::first-letter {
 /* style.. */
}

Com’è facilmente intuibile, questo selettore permette di modificare lo stile della prima lettera dell’elemento a cui appartiene, come un paragrafo o un titolo.

Vi è sicuramente capitato di scrivere del testo su un documento Word o simili, e vedere che alcune parole venissero flaggate come sbagliate da una linea rossa ondulata: è il caso degli pseudo elementi ::grammar-error e ::spelling-error.

selector::grammar-error {
   text-decoration: underline red;
   color: red;
}    

Clip-path

Martina: In CSS esiste una proprietà che senza modificare direttamente il contenuto, permette di ritagliare un elemento in forme geometriche predefinite (cerchi, poligoni, ecc.), rendendo visibili solo le parti dell’elemento che rientrano all'interno della forma utilizzata.
Un esempio lo troviamo in questo Snippet che ho creato.

Nello specifico vediamo le proprietà utilizzate:

• clip-path: circle(): Crea un ritaglio circolare. Il valore tra parentesi definisce il raggio del cerchio, come percentuale della dimensione più piccola del contenitore.

• transition: Crea una transizione da una forma all’altra in maniera fluida.

Nel caso in cui si volessero creare delle forme particolari, esistono online diversi siti che ne consentono la creazione. Uno di questi si trova al seguente link.

Testi sempre proporzionati grazie a clamp(min, preferred, max)

Carlo: La funzione clamp() di CSS è uno strumento potente e versatile che accetta dei parametri:

• min: Il valore minimo che il risultato può assumere.
• preferred: Il valore ideale che si tenta di applicare (prioritario, se rientra nei limiti di min e max).
• max: Il valore massimo che il risultato può assumere.

La sua applicazione più comune è definire dimensioni del testo che si adattino in modo fluido alle dimensioni dello schermo.

h1 { 
    font-size: clamp(1rem, 2vw, 3rem); 
}
/* il testo non sarà mai più piccolo di 1rem */
/* valore preferito */
/* il testo non sarà mai più grande di 3rem */          

Non solo, può essere usato anche per definire una larghezza o dei margini.

.container { 
 width: clamp(300px, 50%, 800px); 
}
.section { 
 margin: clamp(10px, 5vw, 50px); 
}          

Tra i maggiori vantaggi vediamo sicuramente un risparmio di codice (prima era necessario fare uso di JS, o media queries complesse e tediose), maggiore controllo e adattabilità.

Perspective

Martina: Tramite il puro CSS è possibile creare effetti tridimensionali, sfruttando la proprietà perspective per simulare profondità nello spazio, creando effetti come rotazioni o traslazioni realistiche e dinamiche. 

Nello specifico, perspective definisce la distanza tra l’osservatore e il piano dell’oggetto 3D. Valori più bassi aumentano la distorsione, creando un effetto più marcato; al contrario, valori più alti producono una prospettiva più naturale.
Per esempio:

• perspective: 200px; genera un effetto tridimensionale, ideale per oggetti singoli o piccole scene.
• perspective: 1000px; genera un effetto più naturale, adatto a layout più complessi.

Ma attenzione, perspective deve essere applicato al contenitore (genitore) degli elementi trasformati, e non direttamente sugli elementi stessi. In questo modo, tutti gli oggetti figli con trasformazioni 3D, erediteranno lo stesso punto di vista del genitore.

Grazie alla sua versatilità, l’uso di perspective può essere adattato facilmente per creare  oggetti più complessi, come cubi, card interattive, o componenti UI, rappresentando strutture dinamiche in uno spazio tridimensionale. 

Creare un carosello di loghi infinito con solo CSS

Carlo: Spesso nei siti web è presente una sezione che presenta loghi volti a mostrare marchi, partner o sponsor, ma nella maggior parte dei casi, questi sono degli elementi statici e poco coinvolgenti. Un carosello continuo, che scorre in modo fluido e costante, può rendere questo componente molto più accattivante (e non serve nemmeno una riga di javascript!). 

HTML:

Basta delimitare il carosello con un contenitore carousel. definire l’elemento carousel-track che conterrà i loghi (items) e gestirà lo scorrimento. Duplichiamo gli elementi per non avere spazi vuoti garantendo continuità visiva.

CSS::

La magia avviene qui! Limitiamo lo spazio visibile applicando al contenitore carousel overflow: hidden, mentre la traccia carousel-track è responsabile dello scorrimento, attraverso l’animation: scroll linear infinite, che definiamo in questo modo:

@keyframes scroll {
   0% {
      transform: translateX(0); 
   } 
   100% {
      transform: translateX(-100%);
   } 
}

A questo punto, basterà avere un po’ di dimestichezza con il sistema di griglia flex e il gioco è fatto!

Filter

Martina: Incredibile ma vero! Con il CSS è possibile applicare filtri grafici alle immagini con sole poche righe di codice, ottenendo effetti simili a quelli disponibili nei software di fotoritocco come Photoshop. Questi filtri sono ideali per modifiche rapide e semplici, come aggiungere un effetto di sfocatura, trasformare l'immagine in scala di grigi, regolare il contrasto e molto altro. 

Il vantaggio? Non è necessario modificare le immagini separatamente, risparmiando tempo prezioso e semplificando il flusso di lavoro.

Ma il css che filtri offre? Ecco un elenco di quelli più comuni:

• blur(): Sfoca l'immagine.
• grayscale(): Converte l'immagine in scala di grigi.
• sepia(): Applica un effetto seppia.
• contrast(): Regola il contrasto.
• brightness(): Aumenta o diminuisce la luminosità.
• hue-rotate(): Ruota i colori dell'immagine.
• invert(): Inverte i colori.

Guarda direttamente il codice:

Conclusioni

Carlo: Abbiamo visto come utilizzare strumenti potenti come mix-blend-mode per creare effetti visivi unici, sfruttare i più disparati selettori, e abbiamo toccato argomenti come animazioni avanzate per testi dinamici, sfondi animati con gradienti e persino effetti tridimensionali!

Martina: La vera forza dei fogli di stile risiede nella sua capacità di bilanciare creatività e prestazioni. Con le tecniche illustrate in questo articolo speriamo di aver ispirato qualcuno di voi a creare nuove soluzioni per i vostri progetti! 

Buona codifica e buon divertimento con il CSS! 🎨✨