Wordpress, PHP, CSS e Javascript tips!

CSS. Inserire un effetto ombra nelle nostre immagini

di  /  A- A A+
  Attenzione! Questo post non è stato più aggiornato da almeno 90 giorni. Potrebbe contenere dati, notizie e scripts non aggiornati o non in linea con gli attuali standard!

Se utilizzassimo la regola CSS box-shadow su una immagine non otterremo alcun risultato, perché tale regole va a incidere sul background dell’immagine e non sull’immagine stessa. Perciò la domanda è: è possibile applicare un effetto ombra sulle nostre immagini, utilizzando le regole CSS?

Sì, è possibile, anche se la tecnica non è certo perfetta e richiede comunque un pieno accesso al codice sorgente della pagina web, perché è una tecnica che presente parecchie limitazioni.

Prendiamo a esempio questa bellissima immagine panoramica tratta da pixabay.com.

mountain-landscape-640617_960_720

Ora applichiamo l’effetto ombra sulla foto e vediamo un po’ il risultato:

mountain-landscape-640617_960_720

Che ne dite? Ci sta o non ci sta questo bellissimo effetto? Certo che sì. A questo punto è giusto spiegare come ho potuto applicarlo. In parole povere, ho racchiuso l’immagine in un tag span, a cui ho assegnato la classe xclip (un nome vale l’altro però). Dopo di che, ho sfruttato lo pseudo-elemento CSS :before per appendere l’effetto. Ecco il codice html:

Ed ecco il codice CSS:

Le limitazioni di questa tecnica riguardano appunto il pieno controllo del codice sorgente e della possibilità di applicare questo effetto a ogni immagine che voi desiderate, di qualunque dimensione e per qualunque posizione.

In particolare, se intendete applicare questa tecnica a un’immagine ridotta (es. 300px) posizionata a sinistra (o a destra), la flottazione dell’immagine richiede l’applicazione della regola float:left sul container .xclip e non già sull’immagine stessa, altrimenti la tecnica non funziona. Inoltre sia al container e sia allo pseudo-elemento :before è necessario assegnare la larghezza e l’altezza precisa dell’immagine.

Insomma, non è una tecnica precisa, e richiede particolari accorgimenti non sempre agevoli da applicare. Inoltre, non è inopportuno ricordare che questa tecnica non funziona con i browser più datati che non implementano le regole CSS3.

© 2016 Il Jester – Note Legali
Archiviato in: CSS  /  Tags: , , ,