Abbiamo visto come giocare con le immagini e i link, in modo da renderli trasparenti in maniera “sensibile” al nostro mouse. Ora, facciamo un ulteriore passo, manipolando testo e sfondo di un DIV, in per ottenere effetti tipografici.
Gli effetti di trasparenza applicati al testo
Iniziamo con l’applicare diversi gradi di opacità al testo, facendolo giocare sullo sfondo. Non è difficile.
L’opacità del testo
Se l’oggetto è un elemento contenitore, allora l’effetto risulta come se il contenuto dell’elemento contenitore venisse sfumato sullo sfondo, usando una maschera in cui il valore di ogni pixel (della maschera) è il valore di opacità indicato.
Questo testo è di colore nero, con un valore di opacità al 50%
Vediamo il codice utilizzato per ottenere questo effetto:
Da notare che abbiamo aggiunto width:100 dato che l’opacità funziona solo tramite il posizionamento o il layout indicato (in Internet Explorer). Un valore di width o height, un float o qualcosa d’altro che consenta al navigatore di elaborare un posizionamento attiverà l’effetto.
Definire l’opacità dello sfondo
Nero e Bianco
LO SFONDO E’ BIANCO
Lo sfondo è un elemento da tenere ben in considerazione nell’utilizzo dell’effetto di opacità. Se non utilizzassimo un colore di sfondo (noi abbiamo usato white), le estremità del testo potrebbero risultare seghettate. Impostare il colore a transparent non sempre funziona.
…questo assomiglia ad alcuni
titoli o sotto titoli che siamo abituati a vedere
in una
rivistaimpaginata…
DIV
Il testo qui sulla destra è un div in cui il testo è di colore black e lo sfondo white. L’opacità del div è 50 e width è a 150px.
SPAN
L’elemento span all’interno del div ha un’opacità a 25. Le estremità non dovrebbero risultare seghettate. Il padding a 10 pixel nello span è stato utilizzato per non perderci il fondo della g in rivistaimpaginata.
FUORIUSCITA DEL TESTO
Se forzato, il testo sforerà la larghezza di 150px e, naturalmente, i navigatori non gestiscono la fuoriuscita tutti allo stesso modo. Non preoccupiamoci dello sforamento e scriviamo rivistaimpaginata tutto attaccato, in modo da esplorare da vicino l’effetto di fuoriuscita.
Per ottenere questo tipo di impaginazione, copiate il seguente codice:
L’opacità del paragrafo
Rosso Mattone e Bianco
P
In questo esempio useremo il marcatore di Paragrafo
al posto del
. Il codice è lo stesso che abbiamo appena visto, solo abbiamo sostituito div con p e cambiato il colore da black a maroon.
…questo assomiglia ad alcuni titoli o sotto titoli che siamo abituati a vedere
in una rivistaimpaginata… 
Il codice è lo stesso, solo abbiamo utilizzato il marcatore di paragrafo invece di quello del div. Alla fin fine, potrebbe addirittura risultare più semplice da comprendere per chi non è addentro alle complicazioni e idiosincrasie dei CSS.
Abbiamo utilizzato, per questo paragrafo, un bordo di 2px, nero a puntini, e lo stesso abbiamo fatto attorno all’area da 150px, qui sulla destra.
La larghezza che abbiamo definito per la trasparenza dei titoli è di 150 pixel, ma abbiamo intenzionalmente unito le parole rivistaimpaginata per mostrare che il testo non rimane necessariamente confinato nello spazio indicato.
Lo all’interno della parte destra del paragrafo mostra un’immagine che è larga esattamente 150 pixel: possiamo così vedere dove sarebbe finito il nostro paragrafo se non avessimo unito le parole rivistaimpaginata formando un testo troppo lungo per rimanere confinato.
Definire l’opacità nei CSS
Come facciamo a definire il carattere di opacità all’interno dei nostri CSS?
…questo è
lo stile p.pulltrans definito nel file stile1.css CSS che trovate qui
e può variare nel tempo…………..
P.pulltrans {
color:black;
width:150px;
background:white;
filter:alpha(opacity=50);-moz-opacity:.50;
opacity:.50;
float:right;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
font-size: 28px;
line-height:26px;
text-align: right;
}
Quello che vedete è un semplice ma flessibile stile CSS, definito come p.pulltrans nel file di stile esterno. Da notare che questo file va caricato insieme alla pagina tutte le volte che questa deve essere visualizzata al navigatore. Quindi, se pensate di usarlo molto spesso, inseritelo nel foglio di stile principale del vostro sito.
Il codice da copiare nella pagina html è molto semplice e non ci sono parti superflue, tant’è che probabilmente ci converrebbe utilizzarlo come stile in linea.
Per l’esempio dei titoli appena visti, abbiamo aggiunto un marcatore style="color:navy" per superare aggirare il colore nero predefinito e avere un bel testo azzurro.
Il codice da inserire nella nostra pagina, sarà quindi:
Bene, per ora è tutto. Fate qualche esperimento, giocate un po’, magari andate a dare un’occhiata al sito da cui ho tradotto questa guida e fra qualche giorno ci risentiremo, per approfondire ulteriormente l’interazione fra testo e immagini per il tramite dell’opacità.
