Gia abbiamo trattato del uso del Shadow Box (visibile qui)ma oggi vedremo come utilizzarlo insieme ad altri caratteristice del css per generare una
foto in stile polaroid.
Pagina Html
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Immagine stile polaroid</title> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <img src="myimg.jpg" class="polaroid"></img> </body> </html> |
Foglio di Stile
|
1 2 3 4 5 6 7 8 9 10 11 |
img.polaroid { background:#000; /*Cambia il sfondo della immagine*/ border:solid #fff; /*Imposto il bordo*/ border-width:5px 5px 20px 5px; /*Imposto il bordo*/ box-shadow:1px 1px 7px #333;/* Il nostro box shadow */ -webkit-box-shadow:1px 1px 5px #333;/*Per i browser come Chrome e Safari */ -moz-box-shadow:1px 1px 5px #333;/* Per Firefox */ -o-box-shadow: 1px 1px 5px #333; /* Per Opera */ height:250px; /*Imposto altezza a 250px*/ width:250px; /*Imposto la lunghezza a 250px*/ } |
siete stati veramente meravigliosi !