CSS  »  Articoli  »  CSS 3 

I CSS3 hanno ormai da un po' lasciato la fase di sperimentazione e, grazie a browser più recenti, possono essere già utilizzati nei nostri progetti.

Con questo tutorial spiegherò come realizzare un accattivante effetto sulle immagini sfruttando le caratteristiche di controllo sui bordi arrotondati e supporto RGBa che i CSS3 hanno introdotto.

Prima di iniziare: Opacity o RGBa nei CSS3?

L’idea di una proprietà che riuscisse a rendere trasparente un particolare elemento era già da tempo utilizzata nei CSS, e si tratta della proprietà opacity. Ovviamente tale proprietà viene supportata nativamente dai browser più recenti quali Firefox, Safari, Opera e Chrome, mentre per Internet Explorer è necessario applicare dei filtri Microsoft che comunque permettono l’effetto desiderato.

Purtroppo la proprietà opacity ha un problema, quello di far ricadere le sue impostazioni, quindi l’effetto trasparenza, anche su tutti gli elementi figli dell’elemento su cui è impostata. Questo significa che se rendete trasparente un box con la proprietà opacity, otterrete trasparente anche il testo che è contenuto al suo interno.

Questa limitazione non affligge invece la proprietà RGBa; infatti RGBa imposta il valore di opacità solo per la singola dichiarazione a cui é legata.

Vediamo nel codice qual è la reale differenza:

#box1 {
	width:200px;
	height:200px;
	background-color: rgb(226,0,26);
	}

#box2 {
	width:200px;
	height:200px;
	background-color: rgb(0,107,179);
	opacity:0.5;
	margin:-150px 0 0 60px;
	}

Osservando l’esempio uno si può notare come il box azzurro, sovrapposto a quello rosso, presenti un’opacità impostata a 0.5 e che anche il testo all’interno del div eredita il valore di opacità del suo genitore.

A questo punto proviamo ad utilizzare la trasparenza RGBa con il seguente codice e notiamo anche le differenze:

#box2 {
	width:200px;
	height:200px;
	background-color: rgba(0,107,179,0.5);
	margin:-150px 0 0 60px;
	}

Come si può notare nell’esempio due il div azzurro rimane sempre trasparente, però, a differenza del precedente, il testo non eredita la trasparenza e rimane sempre visibile.

La sintassi per utilizzare la trasparenza RGBa non é molto differente da quella vista precedentemente, bisogna solamente aggiungere i valori alfa di trasparenza (RGBa). Quindi in una dichiarazione dello sfondo bisogna scrivere rgba e poi aggiungere i primi tra valori dedicati al colore e il quarto che gestisce il livello di opacità.

I bordi arrotondati

Con i CSS3 è possibile controllare i bordi degli elementi grazie all’ausilio della proprietà border-radius; con questa possiamo arrotondare quindi gli angoli dei nostri elementi e possiamo decidere l’ampiezza dell’angolo impostando direttamente i pixel.

I browser e i prefissi proprietari

Bisogna chiarire subito un aspetto: i CSS3 non sono ancora uno standard, motivo per cui gli sviluppatori dei browser ne utilizzano le proprietà tramite un prefisso proprietario. Per Firefox/Mozilla si utilizza -moz-, per Safari/Chrome/Webkit si utilizza -webkit-.

Quindi oggi possiamo utilizzare queste implementazioni per specificare le proprietà, una volta che i CSS3 diventeranno standard non dovremo ritornare sul nostro codice, ma sarà già gestito.

Altri articoli

Altre guide

Altre newsletter