Gestione Trasparenza con CSS 3

Francesco PC Academy di - 12 Ottobre 2013 in Altro, In evidenza, Web Design

Prima dell’avvento di HTML 5 e CSS 3 per rendere l’effetto trasparenza ai nostri sfondi o immagini occorreva creare dei file ad hoc.

Adesso invece, utilizzando solamente i CSS possiamo creare più effetti, ci vengono incontro infatti i tag <opacity> e <rgba>

COME FUNZIONANO.

Supponiamo di voler avere un div con uno sfondo a colore pieno, uno invisibile e uno semi trasparente:

inseriamo le seguenti regole CSS:

.box-opacity div {
background-color: red;
height: 200px;
outline: 1px solid black;
width: 200px;
}

.box-opacity .opaco {
opacity: 1;
}

.box-opacity .invisibile {
opacity: 0;
}

.box-opacity .trasparente {
opacity: 0.5;
}

 

E nel body inseriamo i div opacity, invisibile e trasparente

<div class=”box-opacity”>
<h2>Gestione Opacità con <code>opacity</code></h2>
<div class=”opaco”></div>
<div class=”invisibile”></div>
<div class=”trasparente”></div>
</div>

 

OTTERREMO QUESTO RISULTATO

Lo stesso effetto possiamo ottenerlo con RGBA

CSS:

.box-rgba div {
    height: 200px;
    outline: 1px solid black;
    width: 200px;
}
.box-rgba .opaco {
    background-color: rgba(255, 0, 0, 1);
}
.box-rgba .invisibile {
    background-color: rgba(255, 0, 0, 0);
}
.box-rgba .trasparente {
    background-color: rgba(255, 0, 0, 0.5);
}

BODY

<div class="box-rgba">
    <h2>Gestione Opacità con <code>rgba</code></h2>
    <div class="opaco"></div>
    <div class="invisibile"></div>
    <div class="trasparente"></div>

La differenza tra le due dichiarazioni sta nel fatto che in opacity l’effetto viene dato a tutti gli elementi contenuti mentre in rgba ad un unico elemento, quindi se volete creare un rollover partendo dalla trasparenza userete opacity come potete vedere qui sotto:

<img src="oscar-wilde-pic.jpg">

img { opacity: 0.6; }
img:hover { opacity: 1; }

 

 

e otterrete questo risultato

 

Share

Promozioni

Potrebbe interessarti

Fotografie di Persone, quali pubblicare
19 Aprile 2018

woocommerce sito

Esempi di siti ecommerce realizzati con woocommerce + wordpress
16 Marzo 2018

Non basta il Visual Composer per essere Web Designer
10 Maggio 2017



Francesco PC Academy
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.

Commenti