CSS  »  Articoli  »  CSS Sprite e Image Replacement 

BIR - Bob Image Replacement

La Bob Image Replacement presentata da Neal Venditto nel Marzo 2005 è una tecnica molto semplice, che richiede però la comprensione di un concetto fondamentale: lo z-index. I posizionamenti CSS permettono di esprimere coordinate sui due assi dello schermo (verticale e orizzontale). C'è in realtà nei CSS una sorta di profondità, o terza dimensione: lo z-index, che stabilisce la disposizione degli elementi posizionati lungo l'asse perpendicolare allo schermo. Una trattazione esauriente dello z-index esula dagli scopi dell'articolo: basti sapere che elementi con z-index maggiore vengono disposti sopra (o ancor meglio, davanti) ad elementi con z-index minore.

Dopo questa piccola premessa teorica, siamo pronti a presentare l'esempio. Anche la BIR, come la tecnica appena vista, richiede uno <span> aggiuntivo: in questo caso lo span invece di essere vuoto ha lo scopo di racchiudere il testo:

Piccola curiosità: il markup ricalca bene la prima tecnica di image replacement nella storia dei CSS, ovvero la FIR, ed è quindi adatta per CSS Zen Garden.

Siamo pronti a procedere con il CSS. Per prima cosa è importante stabile un contesto di pagina per lo z-index, indispensabile perchè la tecnica funzioni anche ad immagini disabilitate. Si renderà quindi il body con posizionamento relativo e si dichiarerà uno z-index pari a 1. Per il titolo h2 verranno specificate le dimensioni, un font piccolo e azzurro e l'immagine di sfondo.

Infine, la parte essenziale: lo span. Per poterlo disporre "sotto" il titolo h2 che lo contiene basterà posizionarlo relativamente e specificare uno z-index minore di quello del body, ad esempio -1. Ecco quindi le tre regole:

body{position:relative;z-index: 1}

h2#soluzioni{width: 260px;height: 60px;
    font: bold 12px Arial,sans-serif;color: #36A2D8;
    background:url(titolo.png)}

h2#soluzioni span{position: relative;z-index:-1}

Il nostro esempio è così ultimato. Anche in questo caso ho predisposto un link per verificare come renderebbe la tecnica con immagini disabilitate. Siamo pronti a procedere con l'ultima tecnica.

Altri articoli

Altre guide

Altre newsletter