In questo tutorial creeremo una serie di contenitori in evidenza, ai quali sarà applicato un piacevole effetto di scorrimento animato al loro passaggio con il mouse. Vi consiglio di scaricare i file di origine e visitare la pagina della demo per vedere l’animazione dal vivo.
Codice HTML
Si definiranno quattro contenitori che utilizzeranno la stessa struttura. Ogni contenitore è costituito da un titolo, un’immagine, ed un testo di descrizione. Tutti i contenitori sono ineriti dentro un contenitore principale. Sintassi di un contenitore scatola è la seguente:
|
1 2 3 4 5 6 7 |
<div> <div class = "boxImage"><img src = "images/321.png"></div> <h2>MOVIE CLIP</h2> <div class = "boxDescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div> </div> ... three other boxes... </div> |
La sintassi per altre tre caselle è la stessa e tutto quello che dovete fare è copiare il codice altre tre volte.
Codice CSS
Innanzitutto definiamo il CSS per l’intero contenitore:
|
1 2 3 4 5 |
.homeBox { position: relative; float: left; display: block; } |
Dopodichè passiamo a progettare con CSS3 i nostri 4 contenitori
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.homeBox .one_fourth { text-align: center; overflow: hidden; background-image: linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%); background-image: -o-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%); background-image: -moz-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%); background-image: -webkit-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%); background-image: -ms-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, #F3F3F3), color-stop(0, #FAFAFA) ); border: 1px solid #E1E1E1; -moz-box-shadow: 0px 1px 0px #ecebeb; -webkit-box-shadow: 0px 1px 0px #ecebeb; height: 228px; width: 228px; margin-right: 10px; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; } |
Sito Web | Autore Demo Download
| Articolo pubblicato 6 anni fa nella categoria 
