Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Creare una galleria di immagini con CSS Grid (con effetto sfocatura e interazione delle media query)

by
Difficulty:IntermediateLength:MediumLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

In questo tutorial prenderemo un mucchio di link di anteprima ordinari e li trasformeremo in una galleria con CSS Grid responsive con un effetto hover sfocato. Useremo anche un fantastico trucco CSS per assicurarci che gli utenti con schermo touch non se lo perdano!

Ecco ciò che creeremo:

Un po' di storia

Recentemente, Rachel McCollin ha scritto un tutorial che spiega come aggiungere una galleria di link di anteprima ai temi di WordPress.

I link agiscono come navigazione nelle pagine figlio su qualunque pagina l'utente sia (o qualsiasi pagina specifichiate) e il plugin risultante dà come risultato qualcosa del genere:

wordpress thumbnail links to child pages
Prendete i file del plugin e del tema dal repository su Github.

Utilizzando il markup generato dal plugin di Rachel, eseguiremo le seguenti operazioni:

  • Organizzeremo le miniature utilizzando CSS Grid, dandoci una galleria responsive.
  • Creeremo un effetto hover utilizzando i filtri e le transizioni CSS.
  • Utilizzeremo una media query CSS elegante per assicurarci che gli utenti con schermo touch possano ancora vedere ogni titolo della miniatura, anche senza passarci sopra con il mouse.

1. Modificare il Markup (un po')

Diamo un rapido sguardo al markup generato dal codice di Rachel. Quando è ripulito sembra effettivamente come questo:

Abbiamo un <div> genitore, che tiene un <h2> e alcuni elementi <article>. Quando stiamo usando CSS Grid abbiamo innanzitutto definito un contenitore grid. In questo caso abbiamo potuto utilizzare il <div> genitore, ma ciò renderebbe ogni figlio diretto, tra cui <h2>– un elemento della griglia, quindi abbiamo bisogno di cambiare un po' le cose.

Avvolgeremo tutti gli elementi di <article> in un altro <div> (sentitevi liberi di utilizzare qualsiasi elemento sentiate più adatto) a cui fantasiosamente daremo una classe grid-container. Usi questa starter pen come base.

2. CSS Grid responsive, in tre linee

Con poche regole possiamo trasformare le nostre miniature in una griglia:

Le linee facili qui sono display: grid; (che trasforma tutti i figli diretti in elementi della griglia e li dispone) e il grid-gap: 1em; (che definisce le nostre spaziature).

La leggera complessità deriva dal valore che abbiamo dato alla proprietà grid-template-columns, che definisce le nostre colonne. Normalmente potreste aspettarvi di vedere qualcosa di simile a repeat(3, 200px) che ci darebbe tre colonne di 200px. In questo caso abbiamo utilizzato la parola chiave auto-fill per repeat(), e quindi alcuni valori. Questo ci dà il numero di colonne con un minimo di 300px e massimo di 1fr come si adatterà nel contenitore della griglia.

Ridimensionate la finestra del browser e vedete come si comporta!

Un ultimo dettaglio che sarà necessario aggiungere:

Questo farà in modo che le immagini riempiano correttamente i loro contenitori (particolarmente necessario per utilizzare la demo di Rachel, poiché abbiamo bisogno di sovrascrivere le proprietà width e height inline degli output di WordPress).

3. Effetto hover

Utilizzeremo i titoli come sovrapposizioni per le miniature, rivelandoli al passaggio del mouse. Daremo anche le immagini su cui passeremo con il mouse un effetto rosso e una leggera sfocatura per aiutare la leggibilità del testo sovrapposto.

Sovrapporre il titolo

Per sovrapporre il titolo abbiamo bisogno di posizionarlo, così potremo iniziare rendendo article con position: relative; e title con position: absolute;. Daremo anche uno sfondo rosso e gli faremo riempire lo spazio disponibile:

Buon inizio!

thumbs step 1

Ci sono una o due cose già da migliorare, compreso quello spazio supplementare nella parte inferiore (il titolo è leggermente più grande della miniatura). Questo può essere risolto rimuovendo qualsiasi line-height dal contenitore dell'immagine:

Dare uno stile al titolo

Alcuni stili tipografici miglioreranno l'aspetto del nostro titolo, e tre linee magiche di flexbox le allinearanno centralmente per noi:

Molto meglio:

Nascondere il titolo

Ora cerchiamo di nascondere il titolo rimuovendo l'opacità, in modo che possiamo vederla solo al passaggio del mouse. Un paio più regole sotto a quelle che già abbiamo aggiunto alla nostra .location-title dovrebbero farlo:

Qui impostiamo anche una regola transition in modo che quando portiamo indietro l'opacità accadrà gradualmente (nel corso di 0,5 secondi). Riportiamola indietro ora:

Grande! Ora il nostro titolo apparirà di nuovo al passaggio del mouse:

title back on hover

Linee sfocate

Abbiamo già creato un effetto hover di grande impatto, ma vogliamo passare a un livello superiore? Aggiungiamo un filtro di sfocatura anche all'immagine. Inizieremo impostando il filtro sfocatura allo stato normale, al fine di dare qualcosa da cui iniziare la transizione. Poi sfocheremo le cose da 2px per lo stato hover (fate questo numero quanto più estremo volete, ma penso che 2px ci dà un'ottima visuale):

Ecco quello che ci dà:

Un paio di cose da notare:

  1. Il titolo è scomparso perché il browser esegue il rendering dell'immagine sfocata ora sopra la parte superiore di esso.
  2. L'effetto sfocato sembra buono, ma ci dà anche un bordo mosso (possiamo fare di meglio).

Correggere il titolo nascosto è semplice come l'aggiunta di z-index: 1;.location-title.

Correggere il bordo sfocato è un po' più complesso. Per cominciare scaliamo l'immagine per renderla un po' più grande, quindi impostiamo overflow: hidden; al contenitore dell'immagine (.location-listing) così che quando l'immagine più grande si sfoca i bordi vengono ritagliati efficacemente. Ecco le proprietà rifinite per i due elementi in questione:

La regola trasform: scale(1.1); ridimensiona la nostra immagine in tutte le direzioni a 1.1 (dove 1.0 manterrebbe le cose esattamente alle stesse dimensioni). Ecco il risultato molto più ordinato:

no more blurred lines

4. Il problema con gli schermi touch

Così ci siamo! Una griglia di immagini accattivante con un effetto sfocato hover su ogni miniatura. L'unica cosa è che i titoli sono nascosti a chi non passa il mouse sopra le immagini (un buon numero di tablet e smartphone non emula il passaggio del mouse con una "pressione" prolungata) che non è molto accessibile.

Fortunatamente, il CSS ha alcune media query di interazione molto utili che possono darci una mano (e godono anche di un supporto browser abbastanza decente). Queste query scopriranno il meccanismo d'ingresso – la qualità di puntamento del dispositivo, la capacità di passare sopra con il mouse, e alcune altre speciali definizioni – così possiamo abbastanza accuratamente determinare se le nostre miniature sono visualizzate su di un dispositivo touch screen.

Prendete questa media query per esempio (che fa esattamente quello che ci si potrebbe aspettare):

Tra queste parentesi graffe avremmo messo tutti gli stili che vogliamo applicare a un browser che non può gestire :hover. Facciamo che – affermeremo che per i dispositivi dove hover è impossibile, o almeno scomodo, sarà sempre sfocata l'immagine in miniatura e il titolo sarà sempre visibile:

Date un'occhiata:

Nota: come accennato, il supporto per questo è abbastanza ragionevole, ma sono ancora in corso discussioni sull'implementazione delle media query di interazione. C'è una buona probabilità che questa specifica cambierà, o avrà delle parti rimosse.

Conclusione

E abbiamo finito! Grazie per avermi seguito, spero che abbiate imparato una o due cose e che vi siate divertiti a giocare con il CSS (a chi non piace?). Ecco un altro sguardo alla demo finale – divertitevi ad aggiungerli ai file del tema creato da Rachel nella prima parte!

Ulteriori letture

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.