Per creare un effetto ombreggiatura ai testi in css, è stato introdotto nella stesura del modulo CSS3 Testo, la proprietà text-shadow (ombreggiatura del testo). Purtroppo, al momento questa proprietà css3, non fa parte delle specifiche css e non è supportata da tutti i browser (vedi le prove della proprietà css3 text-shadow).
Nel frattempo, vediamo come ricreare lo stesso effetto usando solo le regole del css2. Prima con un contenuto del testo duplicato, poi creando invece dinamicamente il contenuto testo del ombreggiatura con il pseudo elemento :before
Ombreggiatura css con contenuto testo duplicato
La struttura html di base:
<h1 class="ombreggiatura_css"><span>OMBREGGIATURA CSS</span>OMBREGGIATURA CSS</h1>
In questo caso, il testo originale è piazzato dentro un elemento <span> e posizionato in modo assoluto in rapporto al suo elemento genitore (h1 in questo esempio) per toglierlo del suo flusso naturale e riposizionarlo al di sopra del resto del testo (l’ombreggiatura).
Le regole css usate:
.ombreggiatura_css{
/*la misura dei caratteri*/
font-size:30px;
/*il colore del ombreggiatura del testo*/
color:#CCCCCC;
/*necessario per poi posizionare l’elemento span in modo assoluto*/
position:relative;
}
.ombreggiatura_css span{
/*il colore del testo*/
color:#3399CC;
/*trasformazione da elemento di riga a elemento di blocco*/
display:block;
/*posizione assoluta in rapporto a l’elemento genitore*/
position:absolute;
/*spostamento di 2 px verso l’alto*/
top:-2px;
/*spostamento di 2 px verso la sinistra*/
left:-2px;
}
Nota: lo spostamento dell’elemento span di un paio di pixel è ovviamente per lasciare intravedere il testo di colore grigio (l’ombreggiatura) al di sotto. I valori di -2px possono essere cambiati con valori positivi o possono essere usati anche le dichiarazione bottom e right per cambiare l’effetto d’ombreggiatura.
Il risultato:
OMBREGGIATURA CSSOMBREGGIATURA CSS
Questa soluzione è compatibile con la maggiorità dei browser (Internet Explorer 6 incluso).
Come fare se non vogliamo duplicare il contenuto testo nella struttura html?
Usando il pseudo-elemento ‘:before’ (vedi i selettori css), possiamo aggiungere dinamicamente contenuto prima dell’elemento h1 dal css. Questo contenuto sarà allora riposizionato aggiustando le sue margine per spostarlo al di sotto del testo originale.
Html di base per un titolo h1.
<h1 class="ombreggiatura_css">OMBREGGIATURA CSS</h1>
Le regole css usate:
.ombreggiatura_css{
/*la misura dei caratteri*/
font-size:30px;
/*l’altezza della riga di testo*/
line-height:30px;
/*il colore del testo*/
color:#3399CC;
/*evita che il testo ritorna a capo linea se la larghezza è limitata, il quale renderebbe l’effetto ombreggiatura inutile (Vedi le proprietà del testo)*/
white-space:nowrap;
}
.ombreggiatura:before{
/*il contenuto testo aggiunto dinamicamente prima del testo originale*/
content:”OMBREGGIATURA CSS”;
/*trasformazione da elemento di riga a elemento di blocco*/
display:block;
/*spostamento del contenuto dinamico di 32px verso il basso - pare a 30px d’altezza del testo originale + un extra 2px*/
margin-bottom:-32px;
/*spostamento del contenuto dinamico di 2px verso la destra*/
margin-left:2px;
/*il colore del ombreggiatura del testo*/
color:#CCCCCC;
}
Nota: come prima, i valori di margin-bottom e margin-left possono essere cambiati.
Il valore di margin-bottom di -30px (pare a l’altezza del testo originale) sarebbe equivalente ad avere l’ombreggiatura esattamente al di sotto.
Aggiungendo o togliendo qualche pixel a questo valore di base, l’ombreggiatura si sposterà verso l’alto o il basso. Mentre cambiando, il valore da negativo a positivo di margin-left, sposterà l’ombreggiatura verso la sinistra.
Il risultato:
OMBREGGIATURA CSS
Il problema di Internet Explorer
Il problema nel usare il pseudo-elemento ‘:before’ è con Internet Explorer che non supporta questo selettore (per chi usa IE in questo momento, l’ombreggiatura non è visibile nel esempio di sopra).
Solamente per Internet Explorer, si potrebbe ricorrere a l’uso del filtro dropshadow:
.ombreggiatura_css{
/*il filtro con colore, spostamento orizzontale e verticale*/
filter: dropshadow(color=#CCCCCC,offX=2,offY=2);
/*IE richiede una larghezza per il buon funzionamento del filtro*/
width:100%;
/*misura dei caratteri*/
font-size:30px;
/*colore del testo*/
color:#3399CC;
}
Il risultato (solo per utenti di Internet Explorer):
FILTRO IE DROPSHADOW
Nota: Inutile dire, che l’uso dei filtri della casa Microsoft non è raccomandato della W3C e rende il css non valido. Se volete usarli, meglio inserirli dentro un foglio di stile a parte e usare i commenti condizionali per richiamarli solo per IE.
{ 3 comments… read them below or add one }
Uhm… testo duplicato? Sarà felice Google
Hey…lo so che a Google non li piace il contenuto duplicato. Di la anche l’uso della seconda soluzione. Comunque con un uso limitato, non credo che un sito puo essere penalizzato per ripetere qualche parole. Poi SEO non è il mio campo e sarebbe da chiedere il parere d’un guru nella materia.
Penso che il problema de l testo duplicato non si pone se queste regole vengono applicate solo nei titoli o comunque nel limite del 5% del testo oltre il quale c’è key stuffing .