Spesso mi trovo ad ottimizzare o modificare layout già esistenti riscontrando modi strani e complicati per ottenere semplici strutture come menù o tabelle di contenuti.
In particolare mi rendo conto di quanto possa essere complicato per alcuni sviluppatori applicare la grafica correttamente in un layout di dimensioni imprevedibili, il cosidetto layout liquido, dovendo prevedere più elementi il relazione tra loro i quali caricano a loro volta diversi elementi di grafica.
Con questo semplice tutorial CSS voglio mostrarvi il mio metodo di lavoro per ottenere CSS box espandibili in lunghezza e larghezza in un layout liquido, utilizzando un’unico sfondo grafico.
Questo tutorial è utile anche a chi desidera creare tramite il CSS dei box con angoli arrotondati.
Per cominciare, consideriamo un DIV box contenitore di 4 DIV.
Ogni DIV interno costituisce un angolo del blocco che vogliamo rendere espandibile in lungo e largo, come il layout liquido, quindi per comodità gli assegneremo una classe con un nome che ci aiuterà a capirne la funzione.
<div class="top_left">
<div class="top_right">
contenuto…
</div>
</div>
<div class="bottom_left">
<div class="bottom_right"></div>
</div>
</div>
L’indentazione facoltativa chiarisce la gerarchia degli elementi: il nome della classe corrisponde all’angolo di grafica che vogliamo mostrare, in questo caso l’angolo con grafica in alto a sinistra (top left) funge da contenitore per il DIV dell’angolo in alto a destra (top_right) il quale a sua volta ingloba il contenuto che vogliamo mostrare.
Gli altri 2 DIV rappresentano il footer del CSS box, il comportamento è lo stesso dei 2 precedenti ma in questo caso non c’è contenuto interno, servono solo per il risultato grafico.
Ora disegniamo un’ unica immagine con bordi arrotondati (o come li preferite) e contenuto di un unico colore, stimando le dimensioni massime che potrà avere il nostro blocco espandibile: in questo caso ho creato un quadrato di oltre 1900 pixel che per la poca variazione di colore all’interno, salvato come file .GIF, pesa solo 17kb.
Vediamo quindi il codice CSS con il quale rivestiremo graficamente il CSS box.
.top_right {background: url(box.gif) top right;padding:20px;padding-left:0px;padding-bottom:1px;}
.bottom_left {background: url(box.gif) bottom left;padding-left:20px;}
.bottom_right {background: url(box.gif) bottom right;height:20px;}
Per ogni DIV interno al CSS box definiamo una classe diversa: vediamo subito che lo sfondo richiesto è uno solo, rendendo quindi più semplice ed ordinata la gestione dei file e facendo meno request HTTP, l’unica differenza è la posizione di quest’ultimo in ogni elemento, che corrisponde al nome della classe assegnata.
Il resto sono i padding necessari per allontanare il testo o i DIV contenuti dal bordo grafico all’interno del layout liquido, nella maggior parte dei casi basterà sostituire l’attuale valore di 20 pixel con quello che ci occorre.
Eccovi il risutato di questo tutorial per layout CSS: CSS box; ridimensionate la finestra per verificare la fluidità dell’immagine di sfondo.
Ritieni questo post utile o interessante?
Condividi e Segnala
angoli arrotondati, css box, CSS layout, layout liquido, tutorial css, tutorial layout css
Leggi anche:
Bottoni rollover col CSS
Per chi ancora usa Javascript per inserire bottoni in rollover all'interno del proprio sito eccovi un tutorial per il CSS rollover, semplice ma molto funzionale. I vantaggi rispetto all'uso del rollover Javascript sono il funzionamento sui browser con lo script disabilitato, implementazione velocissima, migliore leggibilità del testo da parte del browser e dei motori di ricerca [...]
CSS Reset: il tuo stile uguale su tutti i browser
Il classico problema del webdesigner è mantenere la coerenza del proprio webdesign CSS sulla moltitudine di browser in circolazione: il rendering della pagina viene più che altro influenzato dalle impostazioni di default del programma, per questo è nata l'esigenza della tecnica denominata CSS Reset. Solitamente basta inserire questa riga al nostro CSS in primissima posizione per [...]
dei commenti -
lascia un commento - trackback
Ciao e complimenti per l’ottima guida, io avrei una necesità da applicare in uno shop creato con il cms joomla, quindi in home page ho inserito un modulo che fa da vetrina, ma gli manca la grafica, quindi volevo creare un box grafico tramite css e ho adottato la tua guida, ma non va bene per il mio scopo, praticamente il modulo ha un titolo e sotto vengono i prodotti, 3 per ogni riga, vorrei quindi creare un box a mod di griglia, che separa i prodotti l’uno dall’altro con un divisorio, e che il box abbia la testata e il footer di colore differente da quello dove andranno i prodotti, chiaramente deve essere fluido , nel senso che all’aumentare dei prodtti il box si estenda in altezza senza deformarsi.
E’ possibile ?
Grazie.
Ti conviene inserire il box fuori, a contenere la griglia o comunque quello che userai.
Poi dentro puoi metterci quello che vuoi: una tabella, un Unorder List con i List-Item col float, semplici immagini linkate, il resto sta al CSS che applichi agli elementi.
=) ottima guida..
Ciao, grazie e complimenti per la risorsa, funziona tutto bene, ma io avrei bisogno di creare la gif della guida tutta bianca e con la sfumatura grigia sui bordi, ma non ci riesco, potresti aiutarmi ?
Io ho creato un box dove gli angoli sono trasparenti e quindi sulla destra mi spuntano gli angoli che mi fanno vedere sotto le righe orizzontali dei bordi.
Devo necessariamente avere un boz senza trasparenze ???
Grazie, attendo tue….
Secondo questo metodo sì e comunque considera che con IE6 avrai sempre il problema della trasparenza in PNG, cosa che non succede comunque per le GIF.
E comunque, per risolvere il problema delle PNG puoi sempre leggere questo tutorial: PNG trasparenti su IE6.
Grazie per la risposta, mi potresti indirizzare verso un metodo alternativo per usare png trasparenti con una sola immagine (fregandomene altamente di IE) ???