Oggi vedremo se possiamo scattare una singola immagine inserita tramite HTML e farla apparire come una pila disordinata di immagini usando solo CSS. La chiave: pseudo elementi.
Lungo la strada vedremo come intraprendere un progetto come questo può portare rapidamente a qualche codice disordinato e come possiamo contrastarlo con alcune pratiche di codifica DRY.
La sfida
Stavo controllando alcuni dei fantastici contenuti sul nostro nuovo sito per i download, Pixels Daily, e ho trovato un fantastico piccolo PSD gratuito chiamato Stacks che ti aiuta a creare rapidamente e facilmente una pila di immagini Polaroid in Photoshop.
Come puoi vedere, è un effetto piuttosto attraente. Appena l'ho visto, ho immediatamente voluto provare a farcela con i CSS. È una situazione complicata, però, perché ci sono più livelli sovrapposti l'uno sull'altro e non vogliamo ingombrare il nostro markup con tre immagini per ogni articolo della galleria. Quindi, come possiamo realizzare questa illusione riducendo al minimo il nostro markup HTML?
Si scopre che la risposta che stavo cercando si trova in pseudo elementi. Questo è un caso d'uso perfetto per mostrare la magia di: prima e: dopo. Iniziamo.
L'HTML
Per creare il nostro primo stack, l'unico codice HTML di cui abbiamo bisogno è un div con un'immagine al suo interno. È tutto! Il resto del gioco di fantasia sarà eseguito tramite CSS. Assicurati di aggiungere lo "stackone"? classe al div.
Qui abbiamo preso di mira la classe che contiene la nostra immagine principale, quindi abbiamo implementato: prima pseudo elemento senza contenuto. Questo aggiunge efficacemente un altro elemento al flusso di documenti con cui possiamo lavorare. Ora diamo uno stile come abbiamo fatto con la nostra immagine precedente:
La cosa fondamentale da notare qui è che non stiamo realmente lavorando con un'immagine. Potrei caricare un'altra immagine, ma sarebbe una cattiva idea considerando che stiamo facendo pile di tre. Per ogni immagine nella galleria, non vogliamo caricare in tre! Fortunatamente, dal momento che la maggior parte della superficie degli elementi pseudo sarà nascosta, possiamo semplicemente usare un colore solido e tirare ancora fuori l'effetto che stiamo cercando.
Posizionamento
A questo punto, le cose non stanno andando così bene. In effetti, abbiamo davvero incasinato la nostra immagine!
Come puoi vedere, il nostro pseudoelemento interferisce con l'immagine. Per risolvere questo problema, è necessario aggiungere un contesto di posizionamento, quindi spostarlo sul retro con z-index. Ho suddiviso i diversi blocchi di stili qui in modo da poter vedere chiaramente cosa sta succedendo in ogni blocco.
Utilizzando il posizionamento assoluto, possiamo quindi spostare la nostra immagine in posizione data la posizione iniziale dell'immagine originale. Come abbiamo detto, z-index spinge quindi l'immagine sullo sfondo, il che aiuta con l'interferenza che stavamo ottenendo in precedenza. Infine, abbiamo lanciato un effetto di trasformazione per tirare la rotazione disordinata che vedi nel PSD originale di Stack.
Controllo avanzamento
A questo punto, tutto sembra fantastico! La nostra seconda foto (beh, foto finta) si trova bene sotto il nostro primo e ha una rotazione sufficiente per distinguerla. Ancora uno e siamo a casa gratis.
Il secondo pseudo elemento
Come puoi probabilmente intuire, per aggiungere una terza foto allo stack, dobbiamo utilizzare l'elemento: dopo pseudo. Funziona esattamente come quello che abbiamo appena fatto, quindi non c'è bisogno di esaminarlo nei dettagli. Le differenze primarie saranno un diverso colore di sfondo, posizione e rotazione.
Controllo avanzamento
Lo guarderesti? Abbiamo terminato il nostro primo stack di immagini! È un effetto piuttosto sgargiante considerando che in realtà utilizza solo una singola immagine.
Un flusso di lavoro difettoso
Dato che il PSD originale aveva diversi stack di immagini tra cui scegliere, volevo fare la stessa cosa con le classi CSS. Per fare ciò, potremmo facilmente copiare e incollare tutto il codice sopra in un nuovo? Stacktwo? classe e modificare la rotazione / posizionamento per gli elementi pseudo. Bam: ti sei procurato un nuovo stack.
Ecco il problema però: l'ho fatto con otto enormi stack diversi e il risultato è stato un orrendo grumo di codice.Seriamente, era più brutto di un layout basato su tabelle del 1997. Il problema, naturalmente, è che mi sto ripetendo all'infinito. Più della metà del mio codice è costituito da pura ridondanza. Non posso, in buona consa- pevolezza, trasmetterti tali orribili pratiche.
CSS ASCIUTTO
Andy Hunt e Dave Thomas hanno coniato il termine? ASCIUTTO? in relazione alla programmazione, che sta per? Non ripetere te stesso? Per fare un punto semantico, il CSS non è tecnicamente un linguaggio di programmazione, è un linguaggio di stile. Tuttavia, se lo trattiamo come un linguaggio di programmazione e applichiamo i concetti della codifica DRY, otteniamo risultati molto migliori.
Vediamo se possiamo applicare queste pratiche per rendere il nostro codice un po 'più breve e più estensibile.
Proviamo di nuovo
Se creiamo un sacco di classi e seguiamo il nostro attuale percorso, il nostro CSS diventerà poco maneggevole. A prima vista, dovremo dichiarare ogni classe individualmente e poi passare una grande porzione di codice a ciascuno. E questo prima ancora di avvicinarci agli elementi pseudo, che letteralmente triplicheranno il nostro codice!
Dato che gran parte degli stili saranno condivisi, riduciamo il nostro codice e posizioniamo alcuni di questi stili in un unico blocco di dichiarazioni.
Questo prende i nostri stili principali e li applica a tutte le classi di avviamento in un colpo solo, che è tanto meglio che ripeterci all'infinito. Come passo successivo opzionale, potresti diventare ancora più esperto con i tuoi selezionatori.
Nota come tutte le nostre classi iniziano con le stesse cinque lettere:? Stack ?. Date queste informazioni, possiamo estrarre il selettore del valore dell'attributo della sottostringa arbitraria e scegli come target qualsiasi classe che inizia con questa stringa di cinque lettere.
Com'è fantastico? Questo selettore si rivolge a tutte quelle classi per noi! Ancora meglio, se scegliamo di aggiungere altre otto classi di stack al mix, questo selettore funzionerà perfettamente.
Prendiamo questo all'estremo e vediamo quanto breve possiamo rendere il nostro codice. La chiave qui è trovare tutto ciò che viene ripetuto e invece tentare di usarlo solo una volta. Come puoi vedere, ho iniziato con le dichiarazioni che possono essere applicate solo allo? Stack? classi. Poi sono passato agli stili che potevano essere applicati alle classi dello stack insieme agli elementi: before e: after. Restringendolo ancora una volta ho impostato un blocco di dichiarazione solo per gli stili: before e: after. Alla fine, ho terminato con il colore diverso che stiamo usando per: before classes.
Quello che abbiamo fatto qui è letteralmente preso centinaia di linee di codice e compresso in un piccolo spazio. Questo è fantastico per la manutenzione, i tempi di caricamento e la tua sanità mentale generale! All'inizio è un po 'complicato avvolgere la tua mente intorno ai principi ASCIUTTI, ma una volta fatto non guarderai mai indietro.
Altre pile
Da qui fuori, ogni stack sarà abbastanza unico quindi dovremo codificare il resto uno alla volta. Un piccolo Sass o meno andrebbe a lungo modo di aiutare questa parte, ma voi ragazzi siete stufi di me che si lamenta della meraviglia dei preprocessori, quindi l'ho fatto a lungo.
Compatibilità del browser
Nei miei test, la compatibilità del browser qui è stata davvero impressionante.Tutto dovrebbe funzionare bene in Safari, Firefox, Chrome, Opera e IE9 +. Per IE7, si ottiene una semplice galleria di immagini senza l'effetto di fantasia, che considero completamente accettabile in quanto si tratta di un tocco puramente estetico simile agli angoli arrotondati.
IE8 è il difficile perché supporta in parte abbastanza cose per rovinare davvero tutto. Puoi decidere come affrontare questo problema come preferisci, ma la soluzione che ho trovato è stata quella di usare un hack orribile e sporco per indirizzare solo IE8, che è quello di aggiungere \ 9 a tutti gli stili di IE8. Utilizzando questa tecnica, ho semplicemente nascosto gli elementi: before e: after in modo che IE8 ottenga una semplice galleria di immagini come IE7.
I selettori di fantasia sono dove IE8 tende ad essere inciampato, in realtà supporta prima e dopo il tempo in cui si attacca alla sintassi dei due punti. Se si elencano le classi con le virgole anziché utilizzare il selettore del valore dell'attributo, si dovrebbe essere in grado di ottenere IE8 per eseguire l'effetto stack.
Conclusione
Abbiamo fatto molte cose oggi. Abbiamo costruito una fantastica illusione dello stack delle immagini, imparato come implementare: before e: after, e poi abbiamo discusso le migliori pratiche per la codifica mentre utilizzavamo una mentalità DRY. Spero che tu abbia imparato qualcosa e mi sia divertito tanto quanto me!
Tieni d'occhio PixelsDaily nei giorni a venire per un fantastico download gratuito contenente tutto il codice sorgente per questo tutorial insieme a otto fantastici stack di immagini che puoi utilizzare nei tuoi progetti.