Effetti di trasparenza ed opacità con i CSS - seconda parte -

Cominciamo con il seguente tutorial:

Applicare un effetto opaco ad un paragrafo.

Il risultato finale saranno due elementi di blocco, uno posto sotto l' altro e che si intersecano tra di loro nella parte destra. Uno, quello orizzontale, ha un colore di sfondo giallo. L' altro, quello verticale, ha un colore di sfondo trasparente e nella parte in cui si incontrano, riusciremo a vedere una parte di colore più sbiadito, appartenente al contenitore sottostante. Cominciamo con il codice, premettendo che questi due elementi, saranno inscritti a loro volta, in un contenitore generale.

.container{
 width:500px;
 height:400px;
 position:relative;
 }  

Questo è come ho scritto su, il contenitore generale. Position:relative perchè esso conterrà degli elementi in posizione assoluta.

.orizzontale{
 margin:0;
 padding:0;
 position:absolute;
 top:150px;
 left:0;
 height:100px;
 width:500px;
 background:#f90;
 text-align:left;
 }  

Questo è il box al quale non verrà applicato nessun effetto di trasparenza e si trova al di sotto di:

.verticale{
 margin:0;
 padding:0;
 position:absolute;
 top:0;
 right:0;
 width:200px;
 height:400px;
 text-align:left;
 border:1px dotted maroon;
 }  

Se si riportassero questi 2 elementi nella pagina e si scrivesse del testo al loro interno, vedremmo, nella parte destra, delle parole che non riusciremmo a leggere in quanto si sovrapporrebbero tra di esse. Per poterle distinguere chiaramente, dobbiamo dichiarare dei tag p; uno, contraddistinto dalla classe p.normal, è quello che ci serve per la parte sinistra e l' altro, p.transp, ci serve per la parte destra.

p.normal{
 margin:0;
 padding: 5px 200px 5px 5px;
 } 

 p.transp{
 margin:0;
 padding:5px;
 height:400px;
 line-height:1.5em;
 background:#fff;
 color:#000;
 filter:alpha(opacity=70);
 -moz-opacity:.70;
 opacity:.70;
 }  

p.normal deve necessariamente avere un padding destro di 200 pixel in quanto non deve assolutamente "incontrarsi" con l' altro testo. Invece a p.transp ho dato tutte le proprietà per fare in modo che si riesca a vedere al di sotto di esso. Ovviamente si possono modificare i valori della trasparenza. Divertitevi voi a farlo. Intanto adesso possiamo vedere il primo esempio completo.

Effetto opaco su una foto

Simile all' effetto appena visto è quello che andremo a creare; questa volta, però scriveremo su una foto. Al posto di rendere opaca l' immagine con un editor grafico, scrivere su di essa sempre con lo stesso editor, ed importarla nella pagina html, possiamo fare il tutto attraverso i CSS. In questo modo, se il foglio di stile fosse disabilitato, il testo lo si leggerebbe comunque, anzichè "privare" l' utente di poter leggere una parte del testo. Una parte dell' immagine rimarrà intatta, senza nessun effetto. La parte destra, invece, è quella che subirà qualche piccola modifica.

Il codice CSS

Prima di passare alla descrizione del codice, anticipo quello che sarà fatto: avremo un elemento di blocco che funge da contenitore generale. All' interno di esso ne metteremo altri 2: quello di sinistra conterrà la foto con i colori normali, senza effetti. Quello di destra sarà alto il doppio (immagine ripetuta in verticale) ed al paragrafo applicheremo l' effetto opaco.

.container{
 margin:0;
 padding:0;
 width:600px;
 height:440px;
 background:transparent;
 }  

Al contenitore ho semplicemente impostato una larghezza ed una altezza (pari al doppio della foto). Il codice degli altri due elementi è:

.left{
 margin:0;
 padding:0;
 width:300px;
 height:220px;
 background:url(imm.jpg) no-repeat transparent;
 float:left;
 } 
 .right{
 margin:0;
 padding:0;
 width:300px;
 height:440px;
 background:url(imm.jpg) repeat-y transparent;
 float: right;
 }  

Fin qui nulla di particolare. Ho solo dichiarato come devono essere visualizzati i due contenitori nella pagina. Il prossimo codice è il più importante al fine di ottenere l' opacità.

p.transp{
 margin:0;
 padding:0 10px 0 10px;
 font-size:1.3em;
 width:280px;
 height:440px;
 background:#fff;
 color:#000;
 text-align:left;
 filter:alpha(opacity=40);
 -moz-opacity:.40;
 opacity:.40;
 }  

Da notare, oltre alle ultime 3 righe di codice ormai note, che per il paragrafo ho settato una larghezza inferiore rispetto alla larghezza della foto o del contenitore con classe .right. In questo modo non avremo il testo ataccato ai lati. Altro non rimane da dire, se non il fatto che possiamo vedere il file di esempio finale e cosa abbiamo ottenuto.

Collocare un' immagine su uno sfondo opaco

Anche in questo caso, sempre attraverso l' uso dei CSS, otterremo un bell' effetto applicato ad una immagine in bianco e nero. Possiamo, attraverso la regolazione dei filtri, renderla "invecchiata". Ovviamente se avessimo realizzato il tutto con un programma grafico, avremmo ottenuto una foto più "pesante" in fatto di bytes. Il tutto consta di due elementi di blocco: al primo si deve dichiarare l' opacità dello sfondo. Al secondo il filtro da applicare alla foto.

Il codice CSS

Cominciamo con il codice del primo contenitore:

.container{
 margin:0;
 padding:0;
 width:498px;
 height:226px;
 background:blue;
 filter:alpha(opacity=90);
 -moz-opacity:.90;
 opacity:.90;
 }  

L' unica cosa che dobbiamo stabilire, oltre alla larghezza ed altezza del div, è la "quantità" di filtro che desideriamo. Infatti questo dà alla foto l' effetto più o meno invecchiato. Il secondo, invece, avrà questo codice:

.container2{
 margin:0;
 padding:0;
 width:498px;
 height:226px;
 background: url(imm.gif) no-repeat left top ;
 filter:alpha(opacity=70);
 -moz-opacity:.70;
 opacity:.70;
 }  

Questo è tutto quello che ci serve. Come avete potuto vedere, abbiamo posato l' immagine su uno sfondo opaco. Visualizziamo l' esempio completo e provate voi ad apportare modifiche ai filtri da applicare. Provate anche a cambiare il colore di sfondo al pri?mo contenitore, con un colore rosso oppure giallo o verde.

Effetti misti di opacità con i CSS

Questo ultimo esempio mi pare il più carino dal punto di vista estetico ed è una "raccolta" di affetti visti fino' ora. Non sapendo effettivamente che titolo dare, ho optato con un semplice "effetti misti". Cosa otterremo: filtro ad una foto e, in una parte di essa, avremo altre 3 immagini alle quali è stato applicato l' effetto opaco nello stato hover. Se mostrassi prima la pagina finale, potrebbe sembrare chissà quale codice "arcano" è stato scritto. Invece non è nulla di particolare se sono stati seguiti fin qui gli esempi dall' inizio. In un elemento contenitore generale, avremo al suo interno una foto messa come background. Un titolo <H1> ed un altro contenitore che racchiude 3 piccole foto con effetto trasparenza quando passeremo con il mouse.

.container{
 margin:0 auto;
 padding:0;
 width:498px;
 height:226px;
 background: url(imm.gif) no-repeat;
 position:relative;
 }  

È importante dichiarare questo elemento con una posizione "relative". Al suo interno ne metteremo un altro ad una determinata misura dall' alto.

h1{
 color:maroon;
 width:498px;
 height:226px;
 filter:alpha(opacity=50);
 -moz-opacity:.50;
 opacity:.50;
 font-size:2.4em;
 line-height:3em;
 text-align:center;
 }  

Questo tag imposta al titolo un effetto di opacità, in modo tale da avere un effetto omogeneo su tutta l' immagine. Adesso impostiamo il secondo div che conterrà le 3 piccole foto:

.effect{
 margin:0;
 padding:0;
 position:absolute;
 top:170px;
 left:0;
 background:transparent;
 width:498px;
 height:?60px;
 }  

A questo punto non ci resta che stabilire "quanto" devono essere opache le 3 foto che andremo ad inserire in questo div. La classe che ho utilizzato è sempre la stessa che abbiamo visto nella prima parte del tutorial.

Come avete potuto vedere, non ho inserito altro codice nuovo rispetto a quello che già conoscevamo. Pronti? Ci attende la pagina con l' esempio finale.

Come avete potuto vedere, non pare esserci proprio limite a quello che si può fare con i CSS. Sono una valida alternativa, quando lo possono sostituire, al codice di scripting lato client, mantenendo le pagine molto leggere e scritte con codice standard.
Alla prossima.