Dall'arrivo dei CSS3, sono stati risolti molti problemi che in precedenza erano dei veri e propri grattacapi per grafici e sviluppatori.

Tra queste ci sono le possibilità di generare gradienti e dare una sfumatura trasparente ad un determinato elemento. Qui ad HTML5Today ne avevamo già parlato in questo post: http://html5today.it/tutorial/gradient-sfumature-css3-tutorial-completo. Un ottimo lavoro per chi volesse approfondire ulteriormente il discorso dei gradienti tramite CSS3

Nell'immagine seguente vi mostro cosa intendo. La stessa immagine è stata doppiata per mostrare l'orginale (inferiore) e come può essere utilizzata una sfumatura con trasparenze nella parte superiore. Tramite i CSS3 infatti possiamo "modificare" la foto apponendo sopra una sfumatura e una didascalia .

CSS Gradient

Iniziamo con la parte di HTML

<body><br />  <div id="wrapper"><br />    <div id="shadow"></div><br />    <img src="foto.jpg" id="foto"><br />    <div class="didascalia">Didascalia della foto </div><br />  </div><br />  <div align="center"><img src="foto.jpg" width="400" height="200"></div><br /></body>

Ora passiamo alla parte CSS. Anzitutto impostiamo il contenitore "#wrapper":

#wrapper{<br />         <br />         width:400px;<br />         height:200px;<br />         margin-top:20px;<br />         margin-left:auto;<br />         margin-right:auto;<br />         margin-bottom:20px;<br />        <br />     }

Quindi impostiamo le dimensioni al massimo della larghezza e dell'altezza del wrapper:

 #foto{<br />         width:100%;<br />         height:100%;<br />         <br />     }

 

Ecco ora la parte più interessante: la sfumatura posizionata sopra la foto

 

#shadow{<br />         width:400px;<br />         height:200px;<br />         position:absolute;<br />        <br />        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 54%, rgba(0,0,0,1) 100%); /* FF3.6+ */<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(54%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */<br />background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */<br />background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */<br />background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,1) 100%); /* IE10+ */<br />background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,1) 100%); /* W3C */<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */<br />/<br />     }

 

Tramite lo stile linear-gradient, possiamo gestire al meglio la nostra sfumatura specificando (in percentuale) il grado di opacità di un determinato colore.

Qualora avessimo bisogno di un editor per creare sfumature più articolate possiamo sfruttare l'ottimo servizio free di CSS Gradient Generator

Da ultimo inseriamo una didascalia con uno sfondo leggermente trasparente:

.didascalia{<br />        position:absolute;<br />        margin-top: -35px;<br />        border:1px solid #fff;<br />        width:370px;<br />        height:10px;<br />        line-height:10px;<br />        padding:5px;<br />        margin-left:10px;<br />        margin-right:10px;<br />        color:#DDD;<br />        font-size:10px;<br />        background-color:rgba(200,200,200,0.2);<br />        overflow: hidden;<br />     }

 

Ed ecco quindi che il gioco è fatto.

Di seguito il codice completo

<!DOCTYPE html><br /><html lang="en"><br /><head><br /> <br /><br />  <title>prova</title><br /> <br /> <style><br />    *{<br />        padding:0px;<br />        margin:0px;<br />    }<br />     .didascalia{<br />        position:absolute;<br />        margin-top: -35px;<br />        border:1px solid #fff;<br />        width:370px;<br />        height:10px;<br />        line-height:10px;<br />        padding:5px;<br />        margin-left:10px;<br />        margin-right:10px;<br />        color:#DDD;<br />        font-size:10px;<br />        background-color:rgba(200,200,200,0.2);<br />        overflow: hidden;<br />     }<br />    <br />     #foto{<br />         width:100%;<br />         height:100%;<br />         <br />     }<br />     #shadow{<br />         width:400px;<br />         height:200px;<br />         position:absolute;<br />        <br />        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 54%, rgba(0,0,0,1) 100%); /* FF3.6+ */<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(54%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */<br />background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */<br />background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */<br />background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,1) 100%); /* IE10+ */<br />background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,1) 100%); /* W3C */<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */<br />/<br /><br /><br /><br /><br />     }<br />     #wrapper{<br />         <br />         width:400px;<br />         height:200px;<br />         margin-top:20px;<br />         margin-left:auto;<br />         margin-right:auto;<br />         margin-bottom:20px;<br />        <br />     }<br />     <br />    <br /> </style><br /><br /></head><br /><br /><body><br />    <div id="wrapper"><br />    <br />        <div id="shadow"></div><br />        <img src="foto.jpg" id="foto"><br />        <div class="didascalia">Didascalia della foto </div><br />  </div><br />  <div align="center"><img src="foto.jpg" width="400" height="200"></div><br /></body><br /></html>

The following two tabs change content below.