Immagini con effetto cornice.

Probabilmente avrete notato notato che nel mio wordpress blog, le immagini dei post hanno delle cornici. Bene, dato che wordpress crea delle anteprime per immagini 4:3 tutte della stessa grandezza allora ho pensato di sfruttare una tecnica chiamata PNG Overlay.
Implementazione:

1)Scarica il file PNG con trasparenza: photo_oriz.png
2)Fai l’upload del file nella directory /wp-content/themes/__MIOTEMA__/images
3)Inserisci nel file style.css le seguenti righe
div.pic_oriz{
position:relative;
float:left
}
div.pic_oriz div{
position: absolute;
width: 100%;
height: 100%;
background: url(images/photo_oriz.png) no-repeat
}

4) Bene, ora ogni qualvolta inseriamo una foto 4:3 (orizzontale) in un post, ci dobbiamo ricordare che:
la nostra <img src=”mia_foto_uploadata.jpg”/> dovrà essere inserita tra i tag DIV; Il codice Html diventerà:
<div class= “pic_oriz”>
<div></div>
<img src=”mia_foto_uploadata.jpg”/>
</div>
Nota: Essenziale è il DIV vuoto annidato nel DIV con classe “pic_oriz” infatti è lui che imposta l’immagine di background.
Nota2: i Png con trasparenza nn sono supportati da vecchi browser quali MSIE < 7