La pratica di implementare immagini reattive è ancora agli inizi. Abbiamo visto molte idee e suggerimenti su come dovrebbe essere fatto e siamo costretti a vedere molto di più.
Oggi esamineremo una piccola struttura affascinante che ti consente non solo di ridimensionare automaticamente le tue immagini quando la finestra cambia, ma anche di ritagliare le immagini con uno specifico punto focale importante in mente. Sorprendentemente, fa tutto questo con puro CSS. Continua a leggere per vedere come funziona.
Scopri il punto focale
Focal Point è un progetto GitHub e un framework CSS creato da Adam Bradley. Come sapete, il concetto di immagini reattive richiede che qualsiasi immagine sulla vostra pagina venga ridimensionata e ridimensionata per ottenere un layout ottimale per le dimensioni della finestra corrente. Focal Point porta questa idea un ulteriore passo avanti e non solo ridimensiona le immagini, ma le ritaglia anche.
Il problema con questa idea, naturalmente, è che se ritagli in modo arbitrario un'immagine, potresti ritagliare la parte più importante dell'immagine! Ad esempio, nell'immagine sopra, il soggetto è sul lato destro dell'immagine. Come possiamo impedirle di essere ritagliata?
Fortunatamente, il Punto Focale consente di specificare un'area mirata dell'immagine da conservare (il punto focale). In questo modo, quando la struttura ritaglia l'immagine, lo farà in un modo che assicura che l'immagine sia ancora bella.
Come funziona?
L'implementazione del punto focale è un processo piuttosto unico, ma è abbastanza semplice. Innanzitutto, parleremo del processo generale utilizzato per scegliere un punto focale, quindi ci tufferemo nel codice.
Quando inserisci un'immagine nella tua pagina web utilizzando il punto focale, quell'immagine verrà automaticamente suddivisa in una griglia invisibile 12? 12. Non importa quali siano le dimensioni delle immagini, la griglia si adatta a qualsiasi cosa tu abbia bisogno.
Ora che sappiamo come è suddivisa l'immagine, dobbiamo decidere un punto specifico in quella griglia che servirà da punto focale. Ciò significa che, man mano che l'immagine viene ritagliata, il punto che scegliamo servirà da zona centrale attorno alla quale accadrà il raccolto. Quindi, se scegliamo il volto dell'uomo, possiamo garantire che gli aspetti importanti di questa foto siano mantenuti.
Qui il processo consiste nel trovare la faccia, quindi contare le unità della griglia dal centro. In questo caso, la sua faccia è di tre unità a destra e tre unità in alto dal centro della griglia.
Il codice
Ora che abbiamo il nostro punto focale in mente, è tempo di pianificare il nostro codice. Per iniziare, assicurati di scaricare il progetto da GitHub e collega il file CSS incluso al tuo documento HTML.
Una volta che sei pronto, è tempo di impostare due div e un tag immagine. Sì, lo so, è un gran numero di markup per una singola immagine e sicuramente un enorme svantaggio per usare questo framework. Ecco il markup di base:
Abbastanza semplice vero? Ora aggiungiamo un'intestazione e un paragrafo solo per alcuni contenuti generici della pagina.
Quindi, lancia l'immagine proprio come abbiamo fatto sopra usando il? Right-3? e? up-3? classi e due div.
Guardalo in azione
Ora che la nostra demo è stata creata, diamo un'occhiata. Se diamo un'occhiata alla pagina su un computer desktop o portatile, vediamo che le immagini si sono automaticamente adattate alle dimensioni della nostra colonna e stanno visualizzando l'intera area dell'immagine.
demo: Clicca qui per il lancio.
Ora, se restringiamo le dimensioni della finestra o passiamo a un dispositivo mobile, possiamo vedere le immagini adattarsi perfettamente. Man mano che diventiamo sempre più piccoli, interviene una query sui media e improvvisamente le immagini non sono solo più piccole, ma ritagliate.
Dal punto di vista del design, quanto è bello !? Più l'immagine diventa piccola, più è facile per quello che un tempo era un punto focale largo e prominente per diventare un piccolo granello. Con questo framework, puoi assicurarti che gli spettatori su dispositivi di piccole dimensioni continuino a ricevere immagini di grande impatto.
Compatibilità del browser
Questo dovrebbe funzionare bene in tutti i principali browser moderni. Per IE8, le immagini verranno ridimensionate correttamente, semplicemente non si ritagliano. Questa non è la fine del mondo dato che il 99,99% dei siti sul Web non ha comunque questa funzionalità di ritaglio automatico!
Cool, ma come funziona?
Ora sappiamo che il Punto Focale funziona, ma è importante sapere Come Funziona.In questo modo, se vuoi modificare ciò che accade o fare qualcosa di simile senza il framework, sarai in grado di farlo senza problemi.
La prima parte del codice è una soluzione di immagine reattiva di base CSS. Sarebbe bello fare un back up con qualche JavaScript, ma è un buon inizio. Come puoi vedere, sfrutta la larghezza del 100%, il 100% della larghezza massima e l'altezza automatica per far funzionare la sua magia.
Quello che succede dopo è un po 'più complicato. Innanzitutto, una query multimediale di base è implementata a 767px. Quindi, per fare in modo che il crop si verifichi, vengono utilizzati alcuni margini negativi per ciascuna delle possibili classi. Ho ripulito questo codice per includere solo il? Up-3? e? right-3? classi che abbiamo usato sopra.
Come puoi vedere, non c'è davvero molto codice al lavoro qui, ma è un bel po 'complicato di CSS. I margini negativi vengono utilizzati con le unità em per ritagliare l'immagine rispetto a un punto specifico. Gravi complimenti a Adam Bradley per aver ripensato a questa tecnica intelligente!
Cosa pensi?
Ora che hai visto cosa fa Focal Point e come funziona, è il momento di farti sentire il tempo e fammi sapere cosa ne pensi. Lo useresti in un progetto? Perché o perché no? Come lo renderesti ancora migliore?
Inoltre, se hai visto altri grandi strumenti di immagine reattiva, tecniche o framework, lascia un link e io li verificherò.