Vi mostreremo come creare un semplice effetto di sovrapposizione (in pila) su immagini.
Il codice HTML:
|
1 2 3 |
<div> <img src="image1.jpg" /> </div> |
Il codice CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.stack { position: relative; z-index: 10; } /* Image styles */ .stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } /* Stacks creted by the use of generated content */ .stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); -webkit-transition: 0.3s all ease-out; -moz-transition: 0.3s all ease-out; transition: 0.3s all ease-out; } .stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */ .stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */ |
Sito Web | Autore Demo Download
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
