Continua la rubrica su JuliusDesign, CSS Trick in cui vedremo alcuni codici CSS per facilitare o agevolare il flusso di lavoro.

Oggi vediamo insieme come sostituire un testo con una determinata immagine.

Può capitare di avere l’esigenza di utilizzare un elemento immagine per alcuni paragrafi, ma lasciare invariato lato codice il testo, per non perdere del tutto una possibile indicizzazione lato SEO.

La Proprietà text-indent

La proprietà text-indent definisce l’indentazione da sinistra verso destra dell’elemento HTML che lo specifica.

Impostando un valore negativo alla proprietà text-indent, potremo rendere invisibile dalla visualizzazione il contenuto testuale, lasciando invariate le posizioni native dell’elemento.

Codice CSS

#titolo{
text-indent:-9999px;
background:url("titolo.jpg") no-repeat;
width:100px;
height:50px;
}

In questo caso abbiamo un ID titolo che indenterà il contenuto testo a -9999px, rendendolo invisibile alla visualizzazione standard e associerà uno sfondo esterno.

Ricordiamoci sempre di impostare una larghezza e altezza per visualizzare correttamente l’immagine che verrà caricata.

Segnala un Tuo CSS Trick!

Conosci un codice CSS che potrebbe essere utile ai lettori di JuliusDesign?

Invia una email con il codice CSS+HTML dettagliato a csstrick@juliusdesign.net, il prossimo codice potrebbe essere firmato da te!

Conoscevi questo codice CSS?

Lascia un Mi Piace se non conoscevi questo Trick, o se ti piace la rubrica.

Letture Consigliate per CSS Trick


Autore: Giuliano Ambrosio

Creative Strategist e Designer Freelance di Torino, fonda il blog JuliusDesign nel 2007, attualmente collabora con diverse agenzie su tutta Italia con le quali ha avuto modo di lavorare per diversi big brand.