L'argomento immagini con effetto cornice non è totalmente nuovo
sulle pagine di HTML.it: ne abbiamo parlato in Effetto ombra
sulle immagini della serie Usare il background
(qui il relativo esempio).
In realtà, grazie all'effetto ombra è possibile assegnare un'immagine
sui due lati, mentro in questo appuntamento vedremo due semplici tecniche
per avere un effetto cornice sui quattro lati. Cominciamo subito.
Una cornice attorno all'immagine
Presentiamo subito il primo esempio,
che è davvero semplice: si tratta infatti solo di attribuire uno sfondo
all'immagine vera e propria.
L'immagine di sfondo che farà da cornice può essere semplicemente
messa come sfondo all'immagine stessa. Nell'HTML basterà attribuire
una classe "pic" all'immagine. Ecco invece l'unica
regola CSS necessaria:
img.pic{padding:10px; background: url(bk.png) no-repeat}
In sostanza basta attribuire un padding di 10 pixel sui quattro lati così
da poter lasciar spazio all'immagine di sfondo che fa da cornice.
L'esempio appena visto ha un piccolo difetto:
su IE5 e IE5.5 l'immagine di sfondo non viene mostrata, dato che questi due browser
non accettano il padding sugli elementi replaced quali le immagini appunto.
Se la necessità è di estendere la resa anche a IE5.x, si può pensare a un'alternativa.
Il più delle volte infatti le immagini si trovano all'interno di un elemento "dedicato".
sia esso un list-item, un div, un elemento delle liste di definizione o un link.
In tali casi, lo sfondo si può attribuire al contenitore, avendo cura di renderlo
float (o specificare le dimensioni), insieme al padding. Ecco l'esempio alternativo,
e il CSS relativo:
div.pic{float: left;padding: 10px;
background: url(bk.png) no-repeat top left}
Una cornice "sopra" all'immagine
Recentemente Nathan Smith ha presentato in PNG Overlay
una tecnica per avere una cornice in grado
di coprire parzialmente gli angoli dell'immagine che racchiude, sfruttando
la trasparenza delle PNG.
Ho pensato di riprendere qui la tecnica, che nella sua sempicità si
rivela accattivante ed efficace. Ecco quindi il secondo esempio
in cui le immagini di base hanno gli angoli squadrati, e l'effetto ombra e arrotondato
viene conferito da una immagine PNG semitrasparente. Vediamo il markup:
<div class="pic"><div></div><img src="sea.jpg" alt="immagine"></div>
Da notare il div vuoto che precede l'immagine: grazie ai CSS sarà possibile
posizionarlo così da coprire la stessa con la PNG. Vediamo come.
Per prima cosa il div class="pic" verrà reso float, così da assumere la larghezza
strettamente necessaria per il suo contenuto, e posizionato relativamente in modo da consentire
il posizionamento assoluto al suo interno.
Il div vuoto che precede l'immagine viene infatti posizionato assolutamente, con dimensioni
pari al suo contenitore. Viene infine assegnata l'immagine di sfondo. Ecco le due regole CSS necessarie:
div.pic{position:relative;float:left}
div.pic div{position: absolute;
width: 100%;height: 100%;
background: url(roundedBk.png) no-repeat}
C'è ancora una questione da trattare però.
Internet Explorer fino alla versione 6 non supporta le PNG trasparenti. Una possibile
strada è usare la proprietà filter e l'AlphaImageLoader che
abilita la trasparenza su Internet Explorer dalla versione 5.5. La regola CSS, basandosi su una proprietà non standard, è in grado di invalidare il foglio di stile:
in tal caso la soluzione ottimale è quindi usare il commento condizionale. Ecco il
codice inserito nella sezione head della pagina di esempio:
<!--[if lte IE 6]>
<style type="text/css">
div.pic div{
background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='roundedBk.png', sizingMethod='crop');
</style>
<![endif]-->
Per brevità e praticità, è comunque consigliabile inserire la regola CSS in un foglio di stile esterno.
La seconda alternativa è servire la tecnica solo ai browser che supportano naturalmente l'opacità
delle PNG, ovvero Internet Explorer 7, Opera, Firefox e Safari. Ecco il relativo esempio,
in cui viene usato il child selector per filtrare la regola, che quindi non sarà
visibile a Internet Explorer fino alla versione 6:
div.pic{position:relative;float:left}
div.pic>div{position: absolute;
width: 100%;height: 100%;
background: url(roundedBk.png) no-repeat}
In questo caso quindi non c'è necessità di commento condizionale. Volendo, la tecnica può
essere affinata servendo una GIF trasparente invece di una PNG per IE fino alla versione 6,
come abbiamo fatto ad esempio in Usare il
formato PNG su Internet Explorer.
Conclusioni
Abbiamo visto due semplici modi per attribuire delle cornici alle immagini.
Tecniche simili ci risparmiano, una volta preparate le immagini che faranno
da cornice, di aprire un programma di grafica ogni volta.
D'altra parte le tecniche qui viste, seppur graficamente accattivanti, sono
poco flessibili: le cornici andranno realizzate "a misura per ogni dimensione
di immagine che vorremo usare. Il secondo esempio poi richiede un elemento div
privo di significato semantico, ma con il solo scopo decorativo. Tale elemento
non ha effetti negativi per l'accessibilità, né sacrifica i contenuti, ma i puristi
del codice semantico e minimale potrebbero avere dei dubbi per una tecnica simile,
e preferire ad esempio aggiungere la cornice editando l'immagine stessa.
In quanto alla flessibilità sulle dimensioni della cornice, l'effetto
drop shadow
che abbiamo citato in apertura è da preferire qualora ci fosse
la necessità di una cornice in grado di racchiudere immagini di dimensioni diverse.
Per adottare le tecniche qui viste con immagini di dimensioni non note a priori, sarebbero necessari
altri elementi aggiuntivi nel markup, ma ritengo che non ne valga la pena.
Questo è tutto per ora: codice, immagini ed esempi sono disponibili per il download.
Alla prossima.
