Qui possiamo scrivere il testo che andrà da solo a capo a fine riga.
autore:
Stu Nicholls
trovato nel suo sito come "shadows" (ombre) nella cartella "demonstration"; come potete vedere Stu ha ottenuto sia un effetto tridimensionale, sia quello dell'ombra. Veramente bravo, non c'è che dire.
come si usa:
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
Qui possiamo scrivere il testo
<div id="box5"></div>
</div>
</div>
</div>
</div>
#box2, #box3 {display:block; position:absolute; top:2px; left:2px;}
#box1 {display:block; width:200px; height:150px; position:relative; top:20px; left:100px; background:#ccc; border:2px solid #eee;}
#box2 {width:192px; height:142px; background:#999; border:2px solid #aaa;}
#box3 {width:184px; height:134px; background:#777; border:2px solid #888;}
#box4 {display:block; width:190px; height:140px; position:absolute; bottom:0; right:0; background:#fc6; border-bottom:1px solid #444; border-right:1px solid #444; border-top:1px solid #ff8; border-left:1px solid #ff8; padding:5px; text-align: justify;}
#box5 {display:block; width:10px; height:10px; background:#777; border-top:1px solid #333; border-left:1px solid; border-right:1px solid #ff8; border-bottom:1px solid #ff8; position:absolute; bottom:5px; right:5px; overflow:hidden;}
se lo mettete direttamente sulla vostra pagina lo si mette fra nella pagina Html o Xhtml
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
Qui possiamo scrivere il testo
<div id="box5"></div>
</div>
</div>
</div>
</div>
nel css
#box2, #box3 {display:block; position:absolute; top:2px; left:2px;}
#box1 {display:block; width:200px; height:150px; position:relative; top:20px; left:100px; background:#ccc; border:2px solid #eee;}
#box2 {width:192px; height:142px; background:#999; border:2px solid #aaa;}
#box3 {width:184px; height:134px; background:#777; border:2px solid #888;}
#box4 {display:block; width:190px; height:140px; position:absolute; bottom:0; right:0; background:#fc6; border-bottom:1px solid #444; border-right:1px solid #444; border-top:1px solid #ff8; border-left:1px solid #ff8; padding:5px; text-align: justify;}
#box5 {display:block; width:10px; height:10px; background:#777; border-top:1px solid #333; border-left:1px solid; border-right:1px solid #ff8; border-bottom:1px solid #ff8; position:absolute; bottom:5px; right:5px; overflow:hidden;}
head e /head e lo dovrete incapsulare fra:<style type="text/css">
e
</style>
avendo l'accortezza, se lasciate intatte queste impostazioni del foglio di stile, di usare questo css per quello che è: un tipo post-it e quindi usandolo per metterci poche parole anche perché con altri browsers potreste avere brutte sorprese.
