C'era una volta che ci affidavamo esclusivamente a Photoshop per creare effetti di fantasia. In questi giorni, però, stiamo diventando sempre più un puro CSS per aggiungere un tocco di colore alle nostre immagini. L'applicazione di trattamenti di immagine personalizzati tramite codice consente un flusso di lavoro infinitamente flessibile che è facile da modificare in qualsiasi momento.
Oggi ti guiderò nella creazione di trucchi di immagini CSS estremamente semplici e divertenti. Dalle polaroid alle vignette, non crederai a cosa possiamo realizzare.
Polaroid
demo: Clicca qui per vedere la demo su Tinkerbin.
La nostra prima immagine è una semplice tecnica polaroid. Utilizzando diverse dimensioni dei bordi, possiamo creare facilmente la cornice bianca che circonda lo stile popolare di foto istantanee di qualche decennio fa.
Certo, questo effetto è super-gentile, ma sono sicuro che puoi trovare un'applicazione decente.
HTML
Il nostro codice HTML per questo effetto è un div con la classe? Polaroid? applicato. Quindi useremo sia un paragrafo sia un'immagine per il nostro markup core. Userò un'immagine da 200px per 200px (questo è importante).
Il risultato dovrebbe apparire come due bordi 5px, uno nero e uno bianco.
CSS
Ora che conosci il senso di come funzionano le ombre, è il momento di implementare il nostro attuale CSS. Il vero problema è che dobbiamo usare tre diverse versioni di questo, ma vogliamo assolutamente assicurarci che tutti i possibili browser siano coperti.
vignette
demo: Clicca qui per vedere la demo su Tinkerbin.
Questa volta utilizzeremo un diverso tipo di box-shadow per creare un effetto molto diverso. Utilizzando un? Inserto? ombra, possiamo creare una bella vignetta simile a Photoshop su un'immagine usando solo CSS. È un trucco abbastanza carino che può davvero far risaltare le tue immagini.
HTML
Questa volta avremo bisogno di un div vuoto. Puoi opzionalmente inserire del testo all'interno ma l'immagine dovrà essere inserita tramite CSS. Questo perché l'ombra inserita apparirà effettivamente sotto il contenuto inserito tramite HTML, il che significa che un'immagine lo nasconderà completamente.
CSS
Per il CSS, avremo bisogno di impostare un'immagine sullo sfondo, quindi definire una larghezza e un'altezza per il div. Dopo aver impostato il div, è il momento di applicare le ombre. Si noti che il valore di inserimento è implementato e sia l'offset verticale che orizzontale è impostato su 0.
Potresti trovare strano che io abbia implementato tre versioni della stessa ombra inset esatta per ciascun browser. La ragione per cui l'ho fatto è semplicemente perché volevo una vignetta molto scura e intensa e un'ombra non la stava tagliando!
Foto sgangherata
demo: Clicca qui per vedere la demo su Tinkerbin.
Per preparare questo, è necessario creare una sovrapposizione di immagini di sfondo sgangherate trasparenti. Ho usato questa texture per creare questa immagine. Il trucco qui è quello di rendere la texture dello stesso colore dello sfondo della pagina su cui la posizionerai.
Fondamentalmente, ciò che faremo è sfruttare molteplici sfondi per applicare una texture grunge riutilizzabile. Potremmo mascherare l'immagine con la texture, ma questo non sarebbe supportato al di fuori di Webkit, quindi questo è un modo molto più facile da usare.
HTML
Stesso trapano dell'ultima volta, basta creare un div vuoto su cui possiamo applicare le immagini di sfondo.
CSS
Solo per mescolare le cose, facciamo in modo che l'effetto grunge appaia solo al passaggio del mouse. Per iniziare, applichiamo un'immagine di sfondo, tagliamo il div e creiamo una leggera vignetta come l'ultima volta. Ora tutto ciò che dobbiamo fare è aggiungere la nostra immagine di sfondo grunge al passaggio del mouse.
Gli sfondi CSS multipli sono davvero facili da utilizzare. Proprio come con le ombre precedenti, è sufficiente aggiungerne una seconda usando una virgola per separare le due. L'immagine del grunge è la prima da quando la vogliamo sopra.
Conclusione
Spero che ti siano piaciuti questi quattro trucchi di immagine CSS. Ognuno dovrebbe richiedere solo un minuto per essere applicato, ma tutti aggiungono un deciso aumento di stile a immagini altrimenti semplici. Come con qualsiasi trucco di design, assicurati di usarli in modo selettivo e non esagerare!
Se hai dei tuoi effetti immagine CSS veloci, faccelo sapere nei commenti. Inoltre, tutte le demo sopra sono live e modificabili, quindi assicurati di modificarle e lasciare un link alla tua versione di seguito.