Box 3D con i CSS

Box 3D con i CSS

Per finestre più complicate con i bordi laterali in rilievo o con ombreggiature in cui è necessario riportare con le immagini anche tali bordi, ecco i codici, sono solo un po' più lunghi dei precedenti:   Clicca qui per vedere l'esempio
Si intende che gli angoli arrotondati siano già stati preparati con un programma di grafica.

Codice da inserire nel foglio di stile:

.contenitore { /*div che contiene tutto */
width: 100%;  /*si ottiene una finestra di dimensioni massime, modificabile a piacere*/
background-color: #FFFF99;    /*inserire qui il colore di fondo della finestra*/
}

.topleft { background: url(imagine angolo sup sinistro) no-repeat top left }

.topright { background: url(immagine angolo sup destro) no-repeat top right }

.bottomleft { background: url(immagine angolo inf sinistro) no-repeat bottom left }

.bottomright { background: url(immagine angolo inf destro) no-repeat bottom right }

.contenuto { padding: 10px;
}
.top{
background-image: url(immagine bordo orizz. sup);
background-repeat:repeat-x;
background-position: top;
}
.bottom{
background-image: url(immagine bordo orizz. inf);
background-repeat: repeat-x;
background-position: bottom;
}
.right{
background-image: url(immagine bordo vertic.destro);
background-repeat: repeat-y;
background-position: right;
}
.left{
background-image: url(immagine bordo vertic. sin);
background-repeat: repeat-y;
background-position: left;
}

Inserire il codice seguente nella pagina html, dove si vuole ottenere la finestrella:

<div class="contenitore">
<div class="top">
<div class="right">
<div class="left">
<div class="bottom">
<div class="topleft">
<div class="topright">
<div class="bottomleft">
<div class="bottomright">
<div class="contenuto">
<p>testo testo testo testo</p>
</div></div></div></div></div>
</div>
</div>
</div>
</div>
</div>

[torna su]