Soluzioni CSS intelligenti per le sfide comuni dell'interfaccia utente

È incredibile vedere cosa possiamo fare oggi con i CSS, specialmente se ricordi ancora quanto fosse difficile una volta capire i contesti di stacking o perché i margini sono crollati e perché top: float non ha funzionato. In questo post, esamineremo proprio questo: cose eccitanti e divertenti che possiamo fare con i CSS , esplorando problemi comuni e casi d'uso che tutti dobbiamo affrontare nel nostro lavoro.

Ombre più ricche e realistiche con CSS

Le ombre aiutano a trasmettere significato e aggiungono valore extra a un'interfaccia utente. Tuttavia, molte ombre che vediamo sul web in questi giorni non sfruttano appieno il loro potenziale. Cambiamo quello!

Un approfondito approfondimento su tutto ciò che è ombra viene da Rob O'Leary. Il suo articolo sui CSS Tricks esplora il modo in cui la luce influisce sulle ombre e come definire una fonte di luce, la base per creare effetti ombra autentici. Una volta impostata quella base, imparerai come usare le ombre per evocare profondità, elevare elementi e inserirli, come sovrapporre le ombre e, naturalmente, quale proprietà CSS usare per quale caso d'uso. Rob dà anche un'occhiata all'accessibilità e alle implicazioni sulle prestazioni che le ombre portano con sé, oltre a come animarle.

Un altro fantastico articolo sull'argomento viene da Josh W Comeau. Per porre fine a quelle "scatole grigie sfocate che non assomigliano molto alle ombre", mentre Josh descrive lo stato attuale della maggior parte delle ombre sul web, mostra come trasformare le tipiche ombre dei box in belle e realistiche . Un piccolo dettaglio che rende qualsiasi interfaccia utente molto più tattile.

Effetto di ritaglio della carta CSS

Se hai mai voluto creare un effetto di ritaglio della carta per un'intestazione, potresti aver faticato un po'. Forse è necessario impostare due div separati che poi sarebbero sovrapposti l'uno sull'altro. La spaziatura dovrebbe essere definita in unità relative, ovviamente, potrebbe essere un po' difficile da ottenere attraverso gli schermi.

L'effetto CSS Paper Cut-Out di Stephanie Eckles risolve definitivamente il problema con le proprietà personalizzate CSS, la griglia CSS, le trasformazioni CSS e una buona vecchia funzione CSS attr() . Stephanie sta usando un attributo data su h1 insieme a un span al suo interno. attr() raccoglie il valore dell'attributo data , che viene quindi utilizzato per la proprietà del content in un elemento :after -pseudo. Le luci, le ombre e i colori possono quindi essere regolati con le proprietà personalizzate CSS. Riutilizzabile e di semplice manutenzione!

E se sei interessato alla magia di Stephanie e di altre persone meravigliose che amano i CSS, dai un'occhiata a StyleStage, dove i CSS moderni ottengono i riflettori che meritano.

Inoltre, dai un'occhiata al pezzo di Ahmad Shadeed su Thinking About The Cut Out Effect, che entra nei minimi dettagli per decidere quando SVG potrebbe avere più senso e come implementarlo in uno scenario di vita reale. L'articolo fornisce anche molti esempi di codice con cui iniziare!

La minimappa per il web

Li abbiamo già visti: minuscole barre orizzontali che di solito risiedono nella parte superiore della pagina. Mentre un utente scorre verso il basso, la barra orizzontale si sta riempiendo, quindi l'utente sa quanto è rimasto effettivamente da scorrere.

E se lo rendiamo un po' più contestuale ? Forse la pagina include alcune immagini e video, o citazioni e sezioni distinte: non sarebbe interessante evidenziarle in modo diverso, consentendo anche ai lettori di appuntare una posizione sulla pagina e tornare indietro se necessario? Ebbene, lo pensava anche Rauno Freiberg.

La minimappa di Rauno per il web (attualmente funziona solo in Firefox) rende banale creare una rappresentazione della minimappa dell'intera pagina, consentendo anche ai lettori di bloccare sezioni della pagina e navigare tra di esse. Per ottenerlo, Rauno utilizza una proprietà CSS sperimentale element() per visualizzare un'immagine live da un elemento HTML arbitrario (che attualmente è disponibile solo in Firefox).

Raggio di confine condizionale nei CSS

Quando si progettano le carte, potresti volere che un border-radius abbia un valore abbastanza considerevole quando c'è abbastanza spazio per visualizzarlo insieme ad altre carte. Tuttavia, quando non c'è spazio e forse nessun margine sulla scheda, come potrebbe essere il caso su schermi più piccoli, potresti voler ridurre border-radius a 0 . Come lo raggiungeresti?

Ahmad Shadeed ha esaminato questo problema in modo abbastanza dettagliato nel suo articolo su Conditional Border Radius In CSS. L'idea, originariamente suggerita da Heydon Pickering e Naman Goel, è quella di utilizzare un numero abbastanza grande per attivare uno stato o l'altro. Su schermi più piccoli, se la differenza tra 100vw e 100% è 0 , anche il raggio sarà 0 ; ma se la differenza è maggiore, verrebbe utilizzato un valore maggiore. Puoi anche dare un'occhiata a CodePen.

Gradienti granulosi CSS

E se volessi aggiungere un po' di rumore per dare un po' di consistenza a un'immagine? Ovviamente puoi esportare immagini come PNG, WebP o AVIF, ma idealmente vorremmo aggiungere "rumore" sopra gli SVG, quindi possiamo sempre disattivare e disattivare il rumore se lo desideriamo.

Nel suo articolo CSS-Tricks sui gradienti granulosi, Jimmy Chion spiega come possiamo generare rumore colorato per aggiungere texture a un gradiente con un semplice tocco di CSS e SVG. Come spiega Jimmy, l'idea è quella di utilizzare un filtro SVG per creare il rumore, quindi applicare quel rumore come sfondo. Quindi lo stratifichiamo sotto una sfumatura, perfezioniamo la luminosità e il contrasto e, voilà, hai una sfumatura che gradualmente si attenua.

Problema risolto! Puoi anche esplorare il parco giochi Grainy Gradient che Jimmy ha allestito.

Gradiente di sfondo multilinea

Alcune cose potrebbero sembrare impossibili da fare con i CSS — beh, fino a quando qualcuno non trova un trucco per realizzarlo. Come in questo caso: puoi ottenere un testo imbottito su più righe con un gradiente che non viene ripristinato per ogni riga?

Sì, come dimostra Matthias Ott. La soluzione di Matthias è un po' truccata, ma porta al risultato sperato grazie a uno pseudo-elemento che viene aggiunto sopra il testo. Un'idea interessante con cui armeggiare.

Focus campo modulo senza contorni

Chi ha detto che i moduli devono essere noiosi? Hakim El Hattab ha creato una demo che dimostra che anche qualcosa di semplice come un modulo che richiede nome, e-mail e password è un'occasione per pensare fuori dagli schemi e soddisfare una scintilla di gioia.

Per raggiungere questo obiettivo, Hakim combina la messa a fuoco della forma e la convalida in un'animazione sottile ma sorprendente che procede senza alcun contorno di messa a fuoco sui campi stessi. Al contrario, un punto contrassegna il campo focalizzato. Quando lo stato attivo passa a un altro campo, l'animazione viene attivata e il punto salta al nuovo campo attivo, disegnando una connessione tra i due. Anche la convalida del campo modulo è integrata senza problemi, con il punto che si espande e mostra un segno di spunta. Se desideri approfondire il codice, Hakim ha anche pubblicato una demo su Codepen. Ispirante!

Gradienti CSS di transizione

Se hai mai provato a eseguire la transizione dei gradienti in CSS, probabilmente avrai notato che in realtà non funziona. Invece di sfumare gradualmente da un gradiente all'altro, il cambiamento avviene immediatamente, bruscamente, senza una transizione graduale tra i due.

Come ha scoperto Keith J. Grant, possiamo tuttavia ottenere la transizione con una soluzione alternativa intelligente . Usiamo uno pseudo-elemento e una trasformazione di opacità per questo. Innanzitutto, applichiamo una sfumatura all'elemento, quindi posizioniamo il suo pseudoelemento per riempire l'elemento, quindi applichiamo la seconda sfumatura ad esso. E noi "transizione" tra due gradienti facendo passare l'opacità dello pseudo-elemento. Puoi controllare un esempio di lavoro completo su CodePen.

Miglioramento delle prestazioni delle immagini con image-set()

Hai già sentito parlare di image-set() ? Puoi pensarlo come uno sfondo CSS equivalente all'attributo HTML srcset per i tag img . I browser basati su Chromium e Safari lo supportano da alcuni anni, Firefox è seguito solo di recente. Ollie Williams dà un'occhiata a cosa possiamo e cosa non possiamo farci oggi.

Come descrive Ollie, un caso d'uso per image-set() è quello di fornire più risoluzioni di un'immagine di sfondo e lasciare che sia il browser a decidere quale immagine viene offerta a un utente: una versione ad alta risoluzione per utenti su dispositivi fantasiosi e un immagine a bassa risoluzione per quelli con connessioni lente o schermi con una densità di pixel inferiore, ad esempio.

Un altro caso d'uso molto promettente è ancora privo del supporto del browser, sfortunatamente: l'idea di utilizzare nuovi formati di immagine come AVIF, WebP o HEIF aggiungendo un fallback per i browser più vecchi. Se vuoi ottenere qualcosa del genere già oggi e non hai bisogno background-image , <picture> elemento potrebbe essere un'alternativa degna di considerazione, come suggerisce Ollie. Un'ottima lettura per aiutarti a migliorare le prestazioni dell'immagine.

Effetto pop-out del percorso di clip

Con clip-path: path() supportato dai principali browser, è tempo di diventare creativi. Mikael Ainalem mostra un bellissimo caso d'uso per la caratteristica piuttosto nuova: un effetto pop-out liscio e burroso.

Mikael usa clip-path: path() per distinguere la foto di una persona dal suo sfondo a forma di cerchio. Mentre ci passi sopra, la persona sembra salire dall'interno del cerchio, creando una fantastica impressione 3D. Perfetto per le pagine "Chi siamo".

Pulsante 3D stravagante

I dettagli contano. Progettare un bel pulsante non sembra essere un'impresa complicata: un po' di riempimento qua e là, un colore originale, testo accessibile e alcuni stati dei pulsanti. Bene, Josh Comeau ha fatto tutto il possibile per progettare un pulsante 3D davvero stravagante che potresti voler fare clic più di una volta.

L'idea è semplice: creiamo due livelli e all'inizio sfalsiamo leggermente il livello in primo piano. Al passaggio del mouse, spostiamo lo strato anteriore verso il basso. Quindi, regoliamo il contorno della messa a fuoco con outline-offset o usiamo :focus:not(:focus-visible) per nascondere il contorno quando il pulsante è focalizzato e l'utente utilizza un dispositivo puntatore.

Quindi spostiamo il pulsante verso l'alto di alcuni pixel quando si spostano con il mouse, animiamo un po' la trasformazione, regoliamo la curva di Bezier per l'animazione e aggiungiamo un po' di sfocatura, per un'ombra più morbida e naturale. E voilà: abbiamo un pulsante 3D stravagante che è accessibile, funziona su dispositivi mobili e desktop ed è un piacere toccarlo e cliccarci sopra. Naturalmente, puoi trovare lo snippet di codice completo sul blog di Josh.

Grafici CSS

Forse è necessario progettare un istogramma, un grafico a barre o anche un istogramma con più set di dati o colonne impilate. Da dove inizi? Forse con Charts.css, un framework di visualizzazione dei dati CSS che utilizza classi di utilità CSS per definire gli elementi HTML come grafici.

Creato da Lana Gordiievski e Rami Yushuvaev, il framework supporta molti tipi di grafici, non ha dipendenze ed è molto leggero. Include anche una documentazione completa sui suoi componenti e sui tipi di grafici integrati, inoltre il codice sorgente è disponibile su GitHub (con licenza MIT). E se hai bisogno di approcci leggermente più creativi, Preethi spiega come creare grafici CSS con forme interessanti anche su CSS-Tricks.

Il nuovo ripristino CSS

Cosa usi per normalizzare gli stili tra i browser ? Di recente, ci sono stati nuovi approcci per ridurre la dimensione del ripristino CSS globale e forse sarebbero anche buoni candidati per i tuoi progetti.

Con il suo Modern CSS Reset, Andy Bell ha ridotto al minimo il CSS reset aggiungendo regole di ridimensionamento dei riquadri, rimuovendo i margini predefiniti, impostando i valori predefiniti della radice principale e del corpo. Insieme ad esso, Andy rimuove tutte le animazioni, le transizioni e lo scorrimento fluido per le persone che preferiscono non vederle e ha aggiunto proprietà moderne come scroll-behavior e text-decoration-skip-ink per impostazione predefinita.

Il nuovo CSS Reset di Elad Shechter adotta un approccio leggermente più aggressivo. Elad rimuove tutti gli stili predefiniti che stiamo ottenendo su elementi HTML specifici eccetto la display property . Vale la pena esaminare entrambi gli approcci!

Grondaie stabili della barra di scorrimento con CSS

Ah, il buon vecchio layout cambia! Come spiega Bramus Van Damme, uno dei motivi leggermente più oscuri per i cambiamenti di layout è dovuto ai diversi tipi di barre di scorrimento sul web. Mentre le barre di scorrimento sovrapposte su iOS/macOS sono posizionate sopra il contenuto (e non sono mostrate per impostazione predefinita), le altre barre di scorrimento sono posizionate nella "grondaia della barra di scorrimento", ovvero lo spazio tra il bordo del bordo interno e il bordo del padding esterno.

Quando il contenuto di una casella diventa troppo grande, il browser mostrerà, per impostazione predefinita, una barra di scorrimento. In quest'ultimo caso, causerà uno spostamento del layout. Fortunatamente, questo problema potrebbe scomparire presto. Scopri una nuova brillante proprietà scrollbar-gutter : impostandola su stable , possiamo fare in modo che il browser mostri sempre il gutter della barra di scorrimento, anche se la casella non è traboccante.

E per mantenere le cose simmetriche, possiamo usare scrollbar-gutter: stable both-edges . La funzione non è ancora disponibile, ma arriverà molto presto in Chromium, con altri motori di rendering che si spera seguiranno presto.

Le cose sorprendenti che i CSS possono animare

Quando pensi di animare le proprietà CSS, quali ti vengono in mente? Will Boyd ha esaminato la questione da una prospettiva diversa e ha deciso di esplorare le proprietà che non vengono in mente immediatamente, quelle che non sono tipicamente associate all'animazione, ma che risultano essere animabili.

Nel suo post "Le cose sorprendenti che i CSS possono animare", Will approfondisce queste proprietà inaspettatamente animabili e, naturalmente, le cose ingegnose che puoi fare animandole. z-index , ad esempio, può essere utilizzato per animazioni a strati, l' opacity ti aiuta a sfumare un modale solo con CSS. Un ottimo promemoria di quanto sia potente il CSS.

Risorse di apprendimento

L'apprendimento non si ferma mai, giusto? Di seguito ne abbiamo compilati alcuni utili e divertenti! — risorse perfette per portare le tue abilità CSS al livello successivo . E se sei già un professionista CSS, ci sono anche sfide per mettere alla prova le tue conoscenze. Divertiti!

CSS Vocab e Cheatsheet

Potresti essere stato lì prima. Proprio quando stai lavorando con una scadenza ravvicinata , devi cercare qualcosa in fretta. Per CSS, non sbaglierai mai con CSS Tricks Almanac e puoi anche cercare il vocabolario CSS raccolto anche da Ville V. Vanninen dalla Finlandia.

Impara Flexbox in modo divertente

Cosa hanno in comune rane, zombi e torri ? Bene, sono i tuoi migliori amici quando impari Flexbox. Perché, siamo onesti: Flexbox è molto potente una volta capito, ma arrivarci può essere piuttosto difficile. Quindi rendiamo l'apprendimento un po' più divertente.

Nel gioco Flexbox Froggy, aiuti una piccola rana e i suoi amici a trovare le loro ninfee scrivendo CSS. Il gioco è composto da 24 livelli che ti portano dalle basi del posizionamento di Flexbox a sfide più avanzate.

Se gli zombi sono più adatti a te, Flexbox Zombies fa per te. Ogni sezione del gioco svela parte della trama, introduce un nuovo concetto di Flexbox e presenta le cosiddette "sfide di sopravvivenza agli zombi" che ti aiutano a consolidare le tue nuove abilità.

Ultimo ma non meno importante, potresti anche voler dare un'occhiata a Flexbox Defense. Ispirato ai giochi di difesa della torre, il tuo compito è impedire ai nemici in arrivo di superare le tue difese, posizionando le tue torri con i CSS, ovviamente. Tutti e tre i giochi vengono eseguiti direttamente nel tuo browser. Felice flexboxing!

Griglia CSS, selettori CSS e altre competizioni

Vuoi portare le tue abilità CSS al livello successivo? Questi tre piccoli giochi ti aiutano a fare proprio questo, letteralmente. In Grid Garden, diventerai l'orgoglioso proprietario di un giardino di carote . 28 livelli ti stanno aspettando in cui devi prenderti cura del tuo raccolto con l'aiuto della griglia CSS.

Se ritieni che le tue capacità di selezione CSS potrebbero aver bisogno di un po' di rifinitura, CSS Diner fa per te. Piatti, mele, sottaceti : ​​in ciascuna delle 32 sfide, dovrai utilizzare un selettore CSS diverso per selezionare elementi specifici su un tavolo.

E se sei pronto per una competizione, assicurati di dare un'occhiata anche a CSSBattle. Nel gioco di golf CSS , utilizzerai le tue abilità CSS per replicare visivamente gli obiettivi con il codice più piccolo possibile per arrivare in cima alla classifica. Ciascuna delle sfide è dedicata a un argomento specifico come visibility , display , transition o z-index .

Avvolgendo

Di recente ti sei imbattuto in una risorsa o tecnica CSS che ha cambiato il tuo modo di affrontare una particolare sfida? Fateci sapere nei commenti qui sotto! Ci piacerebbe sentirlo.