Sostituire Testo con Immagini – CSS Trick #5

- Letture: 5.087

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.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

15 Commenti

  1. @135design: Hai ragione! Ma sono sicuro che ci siano persone che non abbiano la pallida idea di cosa sia text-indent quindi meglio prevenire…

  2. Arrivano sempre gli espertoni… scusate se non tutti sono super aggiornati come voi… questa tecnica non la conoscevo e non mi vergogno a dirlo quindi per me questo è un ottimo trick!

  3. Molto interessante, quindi lato SEO il testo nascosto viene sempre indicizzato?

  4. deja_rulez

    Really old school! Non è appurato al 100% ma il text-indent negativo e con numeri molto alti non è ben visto da google.

    Piuttosto meglio dargli una larghezza fissa e mettere il text indent di un pixel in più e overflow hidden

    ciiaaps

    @Nando non è questione di essere espertoni, ma non essere aggiornati su una tecnica vecchia di anni per il mondo del webnon è proprio il massimo se ci lavori:) peace!

  5. grande trick, oramai lo uso da tempo, utile per effetti di rollover di immagini tramite css. L’unico problema è creato quando si naviga col caricamento delle immagini disattivato (x esempio io talvolta con il cellulare lo disattivo)

  6. Mi sembrava di leggere che per i motori di ricerca in particolare google questo “Trick” causerebbe esattamente l’effetto contrario in fatto di indicizzazione SEO. Anzi era proprio una tecnica utilizzata da “pseudo” creatori di siti per posizionarsi meglio sui motori di ricerca. Peccato che una volta che google se ne è accorto, quello che fa è sicuramente penalizzare. Comunque penso questo accada per grosse quantità di testo nascosto.. per 2 o 3 parole per me google non si offende, come non si offenderebbe se le cancellassimo del tutto al posto di nasconderle…

  7. Vittorio

    Ragazzi vi assicuro che google non penalizza nessuno!

    Se il testo nascosto sono porzioni di caratteri non contestuali magari o con parole ripetute mille volte, quel testo viene penalizzato come se il testo fosse visibile, stessa storia…

    Google non legge un sito con i fogli di stile… enjoy!

  8. Google penalizza in questo caso. Io utilizzo uno span all’interno della classe, nel quale assegnare il testo, rendendolo non visibile, senza text-indent.

  9. ciao a tutti, per risolvere i problemi di SEO vi consiglio di usare cufón: si tratta di una tecnica che usa javascript per scrivere i testi con la font desiderata. l’output non è un’immagine, bensì una serie di testi impacchettati in uno span.

  10. Ciao.

    Vi segnalo anche questo link che riporta alcuni spunti sull’utilizzo di questa tecnica: http://css-tricks.com/css-image-replacement/ e quest’altro link che propone un’idea alternativa e più performante (almeno a detta loro) a questa tecnica: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

    Ritengo, a mio personale gusto, che l’utilizzo di immagini o alternative quali librerie JS, Flash e similari, siano un po’ superate con gli attuali browser ed il supporto ai @font-face, tanto più che quasi tutti i browser ne forniscono pieno supporto.

    :)

Commenti