La scorsa settimana ho presentato su web-graphics un metodo semplice ed efficace per rimpiazzare graficamente più titoli in una pagina con un'immagine
unica: Single Image Multi Replacement. Presento qui l'articolo in italiano.
Più che una tecnica, quella che presento è un possibile approccio di sviluppo, che personalmente trovo sia in grado di snellire molto il processo di image replacement.
Ecco qui l'esempio che ho preparato, in cui i titoli sono rimpiazzati graficamente, ed ecco l'unica immagine utilizzata.
Il risultato è facilmente ottenibile in tre passi.
- preparazione dell'immagine;
- preparazione del markup;
- definizione del CSS.
Quanto al primo punto, nell'esempio l'immagine usata è larga 350 pixel e alta 200, e si compone di cinque titoli ciascuno alto 40 pixel. Una volta preparata l'immagine con il vostro programma di grafica preferito, queste tre misure saranno indispensabili per adattare la tecnica alle vostre esigenze.
Ora veniamo al codice HTML dell'esempio: ciascun titolo
è marcato con un h2, ha un id e prima del testo c'è un elemento
span vuoto:
<div id="contenuto">
<h2 id="azienda"><span></span>L'azienda</h2>
<h2 id="servizi"><span></span>I nostri servizi</h2>
<h2 id="dove"><span></span>Dove siamo</h2>
<h2 id="consegna"><span></span>Metodi di consegna</h2>
</div>
Prima di procedere con il CSS dell'esempio, c'è ancora una cosa da notare: rimpiazzeremo tutti i titoli h2 all'interno del div id="contenuto". L'implementazione del CSS è piuttosto semplice: in sostanza grazie allo span vuoto e ai posizionamenti assoluti siamo in grado di coprire i titoli testuali con la porzione di immagine necessaria. àˆ per questo motivo che ogni titolo ha un id, così che sia possibile individuarlo univocamente. La tecnica usata è la cover-up span, che ha il vantaggio significativo di rimanere accessibile anche ad utenti che navigano con le immagini disabilitate. Per prima cosa la regola sui titoli:
div#contenuto h2{position: relative;width: 350px;height:40px;margin: 2em 0 0;
font: bold small-caps 90% Arial,sans-serif;color: #847FB7}
Vengono definite le dimensioni, i margini e il font con cui si vorrà presentare il titolo nel caso (seppur raro, ma possibile) in cui l'utente abbia le immagini disabilitate. Una cosa importantissima è dichiarare i titoli position: relative, questo è infatti il modo per consentire il posizionamento assoluto al loro interno.
Gli elementi span verranno infatti posizionati assolutamente, avranno la stessa dimensione del titolo che li contiene e avranno tutti come sfondo l'immagine utile per il replacement:
div#contenuto h2 span{position: absolute;
width: 100%;height: 100%;
background-image: url(titoli.jpg)}
Non si sono specificate le coordinate del posizionamento assoluto, che comunque restano implicitamente definite, e sarebbero top:0; left:0;. Gli span quindi ricopriranno per intero i titoli, ora non ci resta che definire per ciascuno la porzione di immagine da utilizzare grazie alla proprietà background-position:
h2#azienda span{background-position: 0 0}
h2#storia span{background-position: 0 -40px}
h2#servizi span{background-position: 0 -80px}
h2#dove span{background-position: 0 -120px}
h2#consegna span{background-position: 0 -160px}
Per ciascuno span individuato dal corrispondente titolo, l'immagine di sfondo viene traslata verso l'alto (per questo l'uso di valori negativi) di un multiplo di 40 pixel.
Il nostro esempio è così ultimato. La compatibilità della tecnica è buona e dovrebbe essere estesa a tutti i browser con un minimo supporto dei CSS: l'esempio è stato testato su IE5, IE5.5, IE6, Opera, Firefox e Safari.
I vantaggi sono diversi: un'immagine singola pesa sicuramente meno di cinque immagini distinte e richiede una sola richiesta http e soprattutto la tecnica resta accessibile con immagini disabilitate. Lo svantaggio più significativo è un basso livello di personalizzazione: è infatti indicata per siti in cui i titoli grafici difficilmente aumenteranno di numero. Inoltrem l'immagine singola richiede un tempo iniziale di caricamento maggiore rispetto alla prima delle cinque immagini separate. Il mio consiglio è di mantenerla leggera: al massimo 20-30Kb di peso.
Infine è possibile considerare diverse strategie di sviluppo: attribuendo un id
al body per esempio abbiamo un ulteriore grado di personalizzazione, e potremo
usare per esempio un'immagine per pagina. Per esempio questo potrebbe essere un'estratto
del CSS se volessimo utilizzare un'immagine per la home page e una per la pagina di portfolio:
div#contenuto h2 span{position: absolute;width: 350px;height: 40px}
body#home div#content h2 span{background: url(home.jpg)}
body#portfolio div#content h2 span{background: url(folio.jpg)}
Le restanti regole saranno simili a quelle dell' esempio appena visto, e si riferiranno all'immagine corrispondente alla pagina. Alla prossima.
