
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Analisi con esempi delle 3 tecniche più valide e compatibili per rimpiazzare testo con immagini con i CSS
Abbiamo parlato recentemente di Image Replacement negli articoli sulla List-Item Image Replacement e sulla MIR, un po’ di tempo fa nella carrellata Le tecniche di Image Replacement. In questo articolo presento la mia selezione personale di tecniche preferite.
L’image replacement è nato per presentare sotto forma visuale un’informazione
che si presenta naturalmente testuale nel markup. La domanda più comune che chi non
conosce l’image replacement può porsi è: Ma perchè non usare un’immagine attraverso il tag <img>
?
Sostanzialmente perchè rappresentare un’informazione testuale sotto forma
visiva dovrebbe essere compito della presentazione (i CSS) e non risiedere permanentemente
nel contenuto (l’HTML). L’image replacement consente molta più flessibilità nel processo
di design e redesign: potremo infatti cambiare i nostri titoli grafici,
o ripristinare i titoli testuali, solo attraverso i fogli di stile, svincolandoci dal
markup.
Ci sono moltissime tecniche di image replacement, ma prima di iniziare con codice ed esempi vorrei spiegare perché ho scelto le tre che sto per presentare:
Ideata da Tom Gilder e Alexander Levin intorno alla metà del 2003, la Cover-up span (che si può trovare documentata tra l’altro in Revised image replacement) è la prima tecnica che presento. Vediamo subito l’esempio, in cui ho predisposto anche un link per emulare lo scenario CSS abilitati e immagini disabilitate. Ecco il markup:
<h2 id=”soluzioni”><span></span>Soluzioni grafiche</h2>
Come si può notare, al titolo viene assegnato un id e prima del testo, al suo interno,
viene inserito un elemento span
vuoto. Compito dello span è proprio quello di
coprire il titolo testuale con un’immagine, grazie ai posizionamenti assoluti. Procediamo
ora con il CSS. Per prima cosa per il titolo h2
viene definito position:relative
così da poter stabilire un contesto di posizionamento, ovvero consentire il posizionamento
assoluto al suo interno. Vengono poi definite le dimensioni, che dovranno essere quelle
dell’immagine che useremo per il replacement, e infine le proprietà sul font nel caso in cui
siano disabilitate le immagini: ho dichiarato un testo piuttosto piccolo e ho usato un colore che
richiama quello del titolo grafico.
Arriviamo quindi allo span
: verrà posizionato assolutamente, con dimensioni
pari a quelle del suo contenitore (ovvero l’h2) e gli verrà attribuita l’immagine di sfondo
che andrà quindi a coprire il titolo testuale. Vediamo le due regole per intero:
h2#soluzioni{position: relative;width: 260px;height: 60px;
font: bold 12px Arial,sans-serif;color: #36A2D8}
h2#soluzioni span{position: absolute;width: 100%;height: 100%;
background:url(titolo.png)}
Due piccole annotazioni teoriche riguardo il posizionamento assoluto dello span. Questo elemento è per sua natura inline, ma essendo posizionato assolutamente viene promosso ad elemento block-level ed è quindi capace di avere dimensioni. Le coordinate del posizionamento assoluto non sono specificate, dato che implicitamente viene posizionato con l’angolo in alto a sinistra che coincide con quello del contenitore (ovvero il titolo) a cui si riferisce. Il nostro primo esempio è così ultimato. Siamo così pronti a procedere con la seconda tecnica.
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:
<h2 id=”soluzioni”><span>Soluzioni grafiche</span></h2>
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.
La tecnica di image replacement presentata da Jon Christopher in My latest take on image replacement è, ad oggi, quella più recente (è stata infatti pubblicata il 23 Ottobre 2006) e la prima tecnica che funziona a immagini disabilitate senza richiedere markup aggiuntivo.
Vediamo subito l’esempio. Ecco il markup:
<h2 id=”soluzioni”>Soluzioni grafiche</h2>
Il concetto alla base è tanto semplice quanto efficace. In questo caso non si tratta di nascondere il testo, né di coprirlo, ma solo di renderlo dello stesso colore dello sfondo dell’immagine per il replacement. Insieme a quest’ultima basterà specificare anche un colore di sfondo in grado di dare un contrasto tale da rendere leggibile il testo se le immagini soni disabilitate. Nell’esempio il concetto di base è facilmente comprensibile se si prova a cliccare sul link per disabilitare le immagini.
Procediamo ora con il CSS dell’esempio. Per l’header vengono specificate le dimensioni, un font di 12 pixel, uno sfondo azzurro insieme all’immagine per il replacement e il testo bianco. Tutto qui, un’unica regola davvero semplice:
h2#soluzioni{width: 260px;height: 60px;
font: bold 12px Arial,sans-serif;
background:#6BBAE9 url(titolo.png);color:#FFF}
Il nostro esempio è così ultimato. La tecnica, a fronte di una semplicità assoluta, ha solo due piccoli requisiti: il primo è che lo sfondo dell’immagine per il replacement deve essere di colore pieno, almeno nella parte superiore, e che in questa zona vanno lasciati 10-15px di spazio vuoto prima della grafica del testo. Da notare come nell’esempio il testo è selezionabile, anche con il replacement attivo.
Le tecniche di image replacement che abbiamo visto presuppongo l’attribuzione di un id univoco ad ogni elemento da rimpiazzare. Per snellire il CSS e il suo processo di stesura è possibile asegnare nel markup,oltre all’id, una classe comune a tutti gli elementi che verranno rimpiazzati. Questa classe avrà lo scopo di accorpare le dichiarazioni comuni a tutti i titoli rimpiazzati, un po’ come abbiamo fatto con la LIR.
È anche possibile utilizzare una sola immagine per rimpiazzare comodamente più titoli grafici, come nell’image replacement multiplo. È infine possibile utilizzare l’image replacement anche sul logo del sito, piccole sezioni di testo e link oltre che ai titoli. Per ciò che riguarda i link si potrebbe combinare con una delle tre tecniche viste anche il rollover, come abbiamo fatto in diverse occasioni nella serie Menu grafici e semigrafici con rollover e preload via CSS.
Abbiamo visto tre tecniche di image replacement robuste e semplici. La loro compatibilità è ottima: sono state testate su Internet Explorer dalla 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox e Safari.
Unico neo delle tre tecniche viste è che il testo verrà mostrato nel frattempo che le immagini di replacement vengono caricate. Un piccolo “difetto” che però vale la pena a parer mio, dato che sono accessibili anche a immagini disabilitate e pronte per la stampa senza troppe modifiche. Gli esempi sono disponibili per il download. Alla prossima.
Se vuoi aggiornamenti su Image Replacement: le 3 tecniche migliori inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Quando utilizziamo la posta elettronica capita molto spesso di ricevere messaggi sospetti, ad esempio email scritte in un inglese improvvisato […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Usiamo un proxy Socks5 per anonimizzare completamente le nostre connessioni
Le vulnerabilità in dettaglio: un attacco basato su chiavi SSH compromesse consente di accedere al box linux per guadagnare poi il controllo della macchina
Come eseguire le analisi di sicurezza di applicazioni Web scritte con Ajax e basate su Web service usando Firefox e le sue estensioni
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.