Pulsante aggiungi ai preferiti via css

[ghisirds]

Pulsante aggiungi ai preferiti via css

Ciao a tutti.
Mi è venuta l'idea di voler alleggerire ulteriormente i miei siti, mettendo le immagini dei pulsanti come sfonfo css.
Quindi faccio una classe chiamata appunto preferiti e la applico alla scritta "aggiungi ai preferiti".
Metto il pulsante nel backround e dimensione del pulsante.

Ma il testo: Come lo nascondo? display none mi nasconde tutto, pulsante compreso!

Oltre questo c'è qualcos'altro che mi sfugge? C'è qualche guida o esempio da seguire?
E' consigliato mettere i pulsanti via css o è meglio inserirli normalmente?

Grazie a tutti
Marco

--

[laburno]

Ciao,
esistono parecchie tecniche per sostituire un testo con un immagine, dette tecniche di *image replacement.
*Il denominatore comune di queste tecniche è nascondere il testo di un elemento in favore della sua immagine di sfondo.

Presumo che la tua immagine di sfondo da sostituire al testo sia molto piccola. Potresti provare così:
[html]
<h4 classe="miotesto"><span></span>Aggiungi ai Preferiti</h4>

h4.miotesto{position: relative;width: Xpx;height: Xpx;}

h4.miotesto span{position: absolute;width: 100%;height: 100%; background:url(preferiti.png)}
[/html]Questa tecnica si chiama cover-up span, e in pratica lo span vuoto va a coprire tutto lo spazio occupato dall'elemento h4, coprendone di fatto il testo con la sua imamgine di sfondo.

Per approfondire ti segnalo questi ottimi articoli di Fulciniti:
http://css.html.it/articoli/leggi/351/le-tecniche-di-image-replacement/
http://css.html.it/articoli/leggi/2030/image-replacement-le-3-tecniche-migliori/1/

Tieni presente che ce ne sono parecchie, e che l'uso dell'una o dell'altra dipende dall'applicazione.
Ad esempio io personalmente se devo sostituire con immagini particolarmente grandi (ad esempio degli header) di solito imposto il testo dello stesso colore dello sfondo e lo riduco a dimensione minime: di fatto non nascondo nulla ma il risultato ottenuto è lo stesso

[ghisirds]

grazie, Laburno
marco