Questa proprietà del css3 può essere usata per creare un effetto ombra all’esterno oppure all’interno(Inset) in un dei elementi html(div, li, ul o altro).
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title>Shadow Box</title> <!-- Incluso il css nella pagina html --> <style type="text/css"> /* Setto il Font e Margin del body */ body { font: 12px verdana, arial, sans-serif; margin: 12px; } /* Creo un ID Ombra1 */ #ombra1 { background: rgb(214, 214, 214); /* Colore Sfondo */ width:200px; /* Larghezza */ padding: 10px; /* Il Padding (Gestisce gli spazi intorno agli elementi) */ box-shadow: 5px 5px 10px 2px #333333; /* Il nostro box shadow */ -webkit-box-shadow: 5px 5px 10px 2px #333333;/* Per Chrome e Safari */ -moz-box-shadow: 5px 5px 10px 2px #333333; /* Per Firefox */ -o-box-shadow: 5px 5px 10px 2px #333333; /* Per Opera */ } /* Creo un ID Ombra2 */ #ombra2 { background: rgb(214, 214, 214); /* Colore Sfondo */ width:200px; /* Larghezza */ padding: 10px; /* Il Padding (Gestisce gli spazi intorno agli elementi) */ box-shadow: 5px 5px 10px 2px #333333 inset; /* Il nostro box shadow */ -webkit-box-shadow: 5px 5px 10px 2px #333333 inset; /* Per i browser come Chrome e Safari */ -moz-box-shadow: 5px 5px 10px 2px #333333 inset; /* Per Firefox */ -o-box-shadow: 5px 5px 10px 2px #333333; /* Per Opera */ } </style> </head> <body> <p><b>Ombra Esterna</b></p> <div id="ombra1">-------------------------------<br>Con Ombra esterna<br>-------------------------------<br></div> <br><br> <p><b>Ombra Interna</b></p> <div id="ombra2">-------------------------------<br>Con Ombra interna<br>-------------------------------<br></div> </body> </html> |
