CSS  »  Articoli  »  Effetti con CSS 

In questo articolo vedremo alcune soluzioni per emulare attraverso il background i bordi tratteggiati. Se vi state chiedendo quale può essere l'utilità, ci sono alcuni punti da tener presente:

• I bordi con i CSS contribuiscono ad incrementare le dimensioni di elementi con larghezza impostata con i CSS
• Internet Explorer ha dei problemi di resa con i bordi di tipo dotted e dashed
• I bordi con i CSS vengono stampati di default dai browser, le immagini di sfondo no
• Usare la grafica ci può dare maggiore flessibilità ed espressione creativa

Ovviamente i bordi con tratteggio non sono una soluzione comune, nè indispensabile, ma in alcuni casi possiamo pensare di emularli e/o addirittura migliorarli attraverso gli sfondi. Vediamo come.

Tratteggio su un lato con il background

Il primo esempio rappresenta un semplice layout a due colonne, in cui la sidebar è separata visivamente grazie ad un tratteggio come immagine di sfondo. La costruzione del layout esula dagli scopi dell'articolo: basti sapere che si sono usati i float opposti di cui abbiamo parlato nell'articolo Float: teoria e pratica. Vediamo invece la regola CSS essenziale:

Per quanto riguarda la larghezza e il padding sinistro del div id="navigation", è importante evidenziare che per evitare di incorrere a problemi di box model di IE5 e IE5.5 ho dovuto ricorrere a una variante del box model hack di cui ho parlato in Box model e workaround sul blog. Infine, l'immagine di sfondo, una piccola gif di 6x2 pixel, viene ripetuta verticalmente sul lato sinsistro.

Altri articoli

Altre guide

Altre newsletter