Sei in: Home >>Tutorials >>Programmazione >>Css (Cascading Style Sheets) ovvero Fogli di Stile
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>