box con angoli arrotondati

[joey.santiago]

box con angoli arrotondati

dopo aver chiesto aiuti a più non posso, vorrei proporre un metodo per creare un box con angoli arrotondati con un metodo in stile sliding doors, che quindi ci permetta di espanderci sia in larghezza sia in altezza di quanto vogliamo.
Potete scaricare il file zippato che contiene tutto da: http://www.sendspace.com/file/zg6xs5
Cominciamo col creare con GIMP un'immagine (potete guardare il file boxCompleto.png) che poi divideremo in 4 con lo strumento ghigliottina (immagine->trasforma), per avere lo sfondo del nostro box.
a questo punto si parte con l'xhtml:

    
  <div id="container">
        <div id="topSx">
            <div id="topDx">
                <div id="bottomSx">
                    <div id="bottomDx">
                        <p>qui inserire il testo</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

che poi va completato con il css:

#container{
    width:16%;
}
#topSx{
    background: url(topSx.png) left top no-repeat;
    padding-left:40px;/*fa spazio perché non venga coperta dall'immagine di destra*/
}
#topDx{
    background: url(topDx.png) right top no-repeat;
    padding-top:40px;/*fa spazio alle immagini superiori*/
}
#bottomSx{
    background: url(bottomSx.png) left bottom no-repeat;
    margin-left:-40px;/*torna a sinistra per non perdere l'allineamento*/
}
#bottomDx{
    background: url(bottomDx.png) right bottom no-repeat;
    margin-left:40px;/*torna verso destra per non coprire l'altra immagine*/
}
p{
    margin:0;
    padding-right:40px;/*centratura verticale*/
    padding-bottom:40px;/*centratura orizzontale*/
}

il tutto dovrebbe essere abbastanza semplice e comprensibile... spero soprattutto che sia utile!

[pchs]

Ti ringrazio per l'ottimo mini-tutorial in quanto lo cercavo da moltissimo tempo. Volevo sapere se era possibile avere lo stesso effetto utilizzando solo css senza caricare nessuna immagine in modo tale da alleggerire il più possibile la pagina da caricare. Grazie!

[joey.santiago]

di nulla, figurati!
ho letto altri tutorial in giro per il web ed alcuni sono anche senza immagini, oppure le utilizzano solo ed esclusivamente per gli angoli, ma in genere devi mettere molto più markup... in ogni caso non li ho mai provati, non posso proprio esserti utile, mi spiace...

[pchs]

E per caso sapresti indicarmi dove si trovano questi tutorial?

[inuyaksa]

Qui trovi il metodo per creare bordi arrotondanti senza usare immagini...
http://www.html.it/articoli/niftycube/index.html

[claudioweb]

Grazie della segnalazione