Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113
Tratteggi perfetti con il background | HTML.it
Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Tratteggi perfetti con il background

Tecniche per creare bordi di separazione tra parti di un layout
Tecniche per creare bordi di separazione tra parti di un layout
Link copiato negli appunti

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 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:

    div#navigation{
        float:right;
        width:250px !important;
        width /**/:270px;
        padding-left: 20px;
        background: url(dot.gif) repeat-y top left
        }

    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.

    False colonne con tratteggio

    Se volessimo separare totalmente le due colonne, rispetto al primo esempio,
    le cose sarebbero ancora più semplici. Vediamo quindi il secondo esempio. Anche qui si tratta
    di ripetere verticalmente un'immagine di sfondo che contenga il tratteggio: in questo caso
    è una piccola png non trasparente di 6x1 pixel. La differenza è che però l'immagine viene
    ripetuta sul container. Ecco la regola con la dichiarazione chiave:

    div#container{background:url(dot2.png) repeat-y 520px 0}

    Avremo così le due colonne che sono separate visivamente, indipendentemente da
    quale delle due sia la più lunga, grazie ad un tratteggio che si estende tra l'header
    e il footer. A questo proposito, l'unico accorgimento aggiuntivo è che sia l'header
    sia il footer devono avere un colore o un'immagine di sfondo assegnata, così da
    coprire il bordo tratteggiato.

    Il CSS per il layout utilizzato è molto simile all'esempio precedente:
    l'unica differenza sostanziale è che non c'è stata la necessità del box model hack,
    dato che per la sidebar non è più necessario attribuire padding e sfondo: quest'ultimo
    infatti viene ripetuto sul container.

    Da notare che l'esempio, al contrario degli altri due dell'articolo,
    non costituisce una sostituzione dei bordi tramite CSS: un effetto simile a quello appena visto è infatti
    ottenibile solo attraverso l'uso degli sfondi.

    Tratteggio sui quattro lati

    Nei primi due esempi abbiamo visto come sia possibile separare visivamente due
    elementi grazie ad un tratteggio. Nel terzo esempio abbiamo
    un elemento con larghezza variabile e altezza scalabile con un bordo tratteggiato grazie al background.

    Ad una prima idea di sviluppo, si potrebbe pensare che sono necessari quattro elementi
    che facciano da "agganci grafici" nel markup (uno per attribuire come sfondo ciascun lato del tratteggio)
    insieme a due immagini (orizzontale e verticale) ma le cose si possono semplificare se
    pensiamo le cose in maniera un po' differente.

    Ecco quindi l'unica immagine che è stata usata nell'esempio:
    si tratta di una gif trasparente larga 1000 pixel e alta 600, che potrà essere usata
    per avere un bordo tratteggiato attorno ad elementi al massimo di 1000x600 px.
    Con questa piccola limitazione, siamo in grado di realizzare l'esempio con appena due
    agganci grafici nell'HTML: uno per i lati superiore e sinistro, l'altro per i lati inferiore e destro.
    Ecco il codice HTML dell'esempio:

    <div class="highlight">
        <div class="hl-inner">
            Qui il contenuto
        </div>
    </div>

    Possiamo quindi procedere con il CSS, vedendo le due regole per intero:

    div.highlight{
        width:40%;
        background: #F6FBEA url(dottedbig.gif) no-repeat top left;
        }

    div.hl-inner{
        background: url(dottedbig.gif) no-repeat bottom right;
        padding: 10px;
        }

    Due parole sull'implementazione dell'esempio: come abbiamo detto,
    dell'immagine in realtà verranno usati la porzione in alto a sinistra e quella in basso a destra,
    così da dare un'effetto di continuità.
    Il div esterno usa infatti il background sulle coordinate top e left,
    mentre quello interno usa le cordinate bottom e right. Da notare che
    il div esterno stabilisce le dimensioni, mentre quello interno il padding: in questo modo
    non c'è tra l'altro rischio di incorrere in problemi di box model con IE5 e IE 5.5,
    e avremo una resa consistente anche su questi due browser senza la necessità di hack o workaround.

    Conclusioni e download

    Abbiamo visto tre semplici esempi per ottenere bordi tratteggiati grazie al background.
    Si tratta di avere solo un po' di pazienza e fantasia e un programma di grafica per ottenere
    una buona resa consistente e cross-browser grazie agli sfondi. La compatibilità degli esempi è
    buona: sono stati testati con successo su Internet Explorer dalla versione 5 alla 7 e le
    ultime versioni di Opera, Firefox e Safari. Codice e immagini sono disponibili
    per il download. Alla prossima.

Ti consigliamo anche