I CSS possono trarre un sacco di trucchi di immagini davvero eccezionali: manipolazione delle dimensioni, desaturazione, persino sfocatura. Una limitazione che si incontra è che non si può realmente tagliare un'immagine in più parti. Ad esempio, se si desidera tagliare una foto a metà e animare la separazione, non si può davvero farlo con puro CSS. Potresti?
Oggi elaboreremo un lavoro che ci consente di ottenere questo trucco senza un oncia di JavaScript o file aggiuntivi. Vediamo come funziona.
Sneak Peak: Avvia demo
Punta di cappello a Kyle Foster
Recentemente, lo sviluppatore Kyle Foster ha creato un bel plugin jQuery con un effetto che mi piace molto (mostrato qui). Quando l'utente si posiziona sull'immagine, si divide a metà orizzontalmente e si separa per rivelare un messaggio nascosto. Ecco uno screenshot del suo demo:
Come puoi vedere, è un piccolo grande pezzo di interfaccia utente. Come faccio sempre quando mi imbatto in qualcosa del genere, ho iniziato a pensare a come ottenere qualcosa di simile solo con i CSS. Il problema è che i CSS non ti permettono davvero di dividere un'immagine del genere. Sapevo che più immagini di sfondo contenevano la soluzione, ma non volevo dover incorporare due immagini separate per ogni foto che utilizzava questo effetto. Fortunatamente, con un po 'di ingenuità, possiamo farcela con una singola immagine. Continua a leggere per vedere come.
Passaggio 1: formatta l'immagine
Il CSS ci consente di applicare più immagini di sfondo a un singolo elemento. È interessante notare che possiamo utilizzare questa funzionalità per applicare la stessa immagine di sfondo più volte, posizionando ogni istanza in un modo univoco. Con queste informazioni in mente, si presenta una soluzione al nostro problema.
Il trucco per eliminarlo è dividere l'immagine a metà in Photoshop prima di incorporarla. Guarda l'esempio qui sotto per vedere cosa intendo. Sembra un po 'strano, ma ci dà la possibilità di fare esattamente ciò di cui abbiamo bisogno.
Il flusso di lavoro per farlo va così (sentiti libero di modificare le dimensioni):
- Crea un'immagine di 300 px di larghezza per 300 px di altezza
- Taglia l'immagine al centro e posiziona le due metà su livelli diversi.
- Vai a Dimensioni della tela in Photoshop e aumentare la tela a 300 px per 375 px.
- Posiziona la metà inferiore della foto nella parte superiore della tela.
- Posiziona la metà superiore della foto nella parte inferiore della tela.
Questo suona come un dolore, ma una volta che hai capito come funziona, va molto velocemente. È anche possibile registrare un'azione che farà questo per te in pochi secondi. Fondamentalmente, quello che abbiamo fatto è rendere possibile che un file serva sia nella parte superiore che in quella inferiore della nostra immagine. Può eseguire questa funzione perché si adatta bene: quando due si scontrano l'una con l'altra, l'immagine fluisce senza interruzioni da una all'altra. Non preoccuparti della gigantesca striscia bianca nel mezzo, che sarà semplicemente nascosta.
Passaggio 2. Il markup
Ora che abbiamo una buona idea su come funzionerà, diciamolo. Ricorda che vogliamo che venga rivelata una didascalia, quindi inseriremo un tag di paragrafo all'interno di un div.
Questo div ha due classi: reveal e plug. Il? Rivelano? la classe è dove inseriremo molto del codice ripetibile che vorremmo realizzare attraverso tutti gli elementi simili. La spina? la classe conterrà il codice specifico relativo alla foto della spina mostrata sopra.
Passaggio 3. Starter CSS
Per iniziare, ecco il CSS di base che userò nella demo. La parte che conta davvero è il? Rivelare? codice, che imposta la dimensione del nostro contenitore.
Passaggio 4. CSS in background multipli
Ora, ricorda che la nostra immagine iniziale era 300 px per 300 px, che è la dimensione che abbiamo creato nel nostro contenitore. Ciò significa che possiamo riempire quel container con l'area dell'immagine senza lasciare alcuna barra bianca nel nostro programma di jpg.
Per fare ciò, imposteremo tre sfondi sul nostro elemento, ciascuno separato da una virgola. I primi due sono la stessa immagine plug e il terzo è un colore solido. Da un lato, lo siamo una specie di utilizzando più immagini, ma il browser deve solo caricare in un file, quindi stiamo mantenendo le nostre richieste http più basse di se avessimo usato due immagini distinte (fondamentalmente è come usare gli sprite delle immagini).
I numeri dopo ciascuno degli sfondi rappresentano i valori di posizionamento. Il primo numero è offset orizzontale e il secondo è offset verticale. Abbiamo compensato la nostra prima immagine positiva a 150 px e la seconda a negativa a 225 px. Nota che 150 + 225 equivale a 375, che è l'altezza completa del nostro jpg.
Si noti inoltre che è molto importante impostare gli sfondi su no-repeat, altrimenti, questo non funzionerà affatto.
Passaggio 5. Transizione
Quando passiamo il mouse sopra l'elemento, faremo scorrere le due istanze della nostra foto una dall'altra per rivelare una didascalia. Vogliamo assicurarci che ciò avvenga senza problemi, quindi assicurati di aggiungere una transizione.
Passaggio 5. Stili di passaggio del mouse
A questo punto, tutte le cose difficili sono finite.Tutto quello che dobbiamo fare è spostare ogni istanza dell'immagine verso l'esterno dal centro quando l'utente passa sopra l'elemento. Lo facciamo modificando il valore di posizionamento in questo modo:
Ora, quando si verifica un evento hover, la prima istanza dell'immagine scenderà di 60 px e la seconda istanza scorrerà di 60 px. Ecco come appare:
Passaggio 6. La didascalia
Con ciò, il nostro effetto apparentemente impossibile diventa in realtà piuttosto semplice! Non dimenticare però, abbiamo quella fastidiosa didascalia con cui lavorare ora. Dato che stiamo incorporando la nostra foto con immagini di sfondo CSS, il testo apparirà effettivamente in cima allo sfondo, il che non è affatto quello che vogliamo. Con un piccolo extra markup, potremmo creare un div extra e mantenere il testo altrove, il che funziona bene.
Tuttavia, possiamo mantenere il markup al minimo e semplicemente fingere se manipoliamo l'opacità del testo. Usando questo metodo, renderemmo la didascalia invisibile fino a quando l'utente non sorveglierà l'immagine, quindi la dissolverà in vista. Ecco il pezzo di CSS che avremo bisogno di fare tutto questo.
Passaggio 7. Mescolare, sciacquare, ripetere
Questo è praticamente tutto quello che c'è da fare. Abbiamo creato un sistema che può essere facilmente ampliato tra vari elementi. Qui applicheremo rapidamente questo a tre elementi.
Ora possiamo usare CSS simili su ogni versione, applicando gli stessi valori di posizionamento su tutta la scheda e mescolando le immagini di sfondo.
Guarda!
Il nostro lavoro è finito, ora è il momento di sedersi e ammirare ciò che abbiamo costruito. Dai un'occhiata seguendo il link qui sotto. Dopo aver dato un'occhiata, lascia un commento qui sotto e fammi sapere cosa ne pensi.
demo: clicca qui per il lancio
