Se è necessario aggiungere linee orizzontali in stile separatore ai siti Web, le opzioni tipiche includono l'aggiunta di file di immagine di tali linee alla pagina, ma ciò richiederebbe al browser di recuperare e caricare quei file, il che potrebbe avere un impatto negativo sul sito prestazione. È inoltre possibile utilizzare la proprietà del bordo CSS per aggiungere bordi che fungono da linee in cima o in fondo a un elemento, creando in modo efficace la linea di separazione.
O - meglio ancora - usa l'elemento HTML per la regola orizzontale.
L'elemento della regola orizzontale
L'aspetto predefinito delle linee di regola orizzontali non è l'ideale. Per renderli più belli, aggiungi i CSS per regolare l'aspetto visivo di questi elementi in modo che siano in linea con il modo in cui desideri che il tuo sito appaia.
Un tag HR di base viene visualizzato nel modo in cui il browser desidera visualizzarlo. I moderni browser in genere mostrano tag HR senza stile con una larghezza del 100 percento, un'altezza di 2 pixel e un bordo 3D in nero per creare la linea.
Larghezza e altezza sono coerenti tra i browser
Gli unici stili coerenti tra i browser Web sono la larghezza e gli stili. Questi definiscono quanto grande sarà la linea. Se non si definiscono la larghezza e l'altezza, la larghezza predefinita è 100 percento e l'altezza predefinita è 2 pixel.
In questo esempio la larghezza è il 50 percento dell'elemento genitore (si noti che questi esempi di seguito includono tutti gli stili in linea. In un'impostazione di produzione, questi stili verrebbero effettivamente scritti in un foglio di stile esterno per facilitare la gestione in tutte le pagine):
style = "width: 50%;">
E in questo esempio l'altezza è 2em: style = "Altezza: 2em;"> Nei browser moderni, il browser costruisce la linea regolando il bordo. Quindi, se rimuovi il bordo con la proprietà style, la linea sparirà sulla pagina. Come puoi vedere (beh, non vedrai nulla, dato che le linee saranno invisibili) in questo esempio: style = "border: none;">
La regolazione della dimensione, del colore e dello stile del bordo renderà la linea diversa e avrà lo stesso effetto in tutti i browser moderni. Ad esempio, in questa dimostrazione il bordo è rosso, tratteggiato e largo 1p: style = "border: 1px dashed # 000;">
Ma se cambi il bordo e l'altezza, gli stili appaiono leggermente diversi nei browser molto obsoleti rispetto a quelli dei browser moderni. Come puoi vedere in questo esempio, se lo visualizzi in IE7 e in basso (un browser che è tristemente obsoleto e non più supportato da Microsoft) c'è una linea interna smussata che non viene visualizzata negli altri browser (incluso IE8 e successivi) : style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Quei browser antiquati oggi non sono molto preoccupanti per il web design, dal momento che sono stati in gran parte sostituiti con opzioni più moderne. Invece di un colore, puoi definire un'immagine di sfondo per la tua regola orizzontale in modo che appaia esattamente come desideri, ma che rimane semanticamente visualizzata nel tuo markup. In questo esempio abbiamo usato un'immagine che è composta da tre linee ondulate. Impostandolo come immagine di sfondo senza ripetizione, si crea un'interruzione nel contenuto che sembra quasi come si vede nei libri: style = "height: 20px; background: #fff url (aa010307.gif) centro di scroll no-repeat; border: none;"> Con CSS3, puoi anche rendere le tue linee più interessanti. L'elemento HR è tradizionalmente a orizzontale linea, ma con la proprietà di trasformazione CSS, è possibile modificare il loro aspetto. Una trasformazione preferita sull'elemento HR è cambiare la rotazione. Puoi ruotare il tuo elemento HR in modo che sia leggermente diagonale: hr {-moz-transform: ruota (10 gradi);-webkit-transform: ruotare (10 gradi);-o-trasforma: ruota (10 gradi);-ms-transform: ruota (10 gradi);transform: ruotare (10 gradi);}
Oppure puoi ruotarlo in modo che sia completamente verticale: hr {-moz-transform: rotazione (90 °);-webkit-transform: ruotare (90deg);-o-trasforma: ruota (90 °);-ms-transform: ruota (90deg);transform: ruotare (90deg);}
Ricorda che questa tecnica ruota l'HR in base alla posizione corrente nel documento, quindi potrebbe essere necessario regolare il posizionamento per portarlo dove lo vuoi. Non è consigliabile utilizzarlo per aggiungere linee verticali a un disegno, ma è un modo per ottenere un effetto interessante. Una cosa che alcune persone fanno invece di usare l'elemento HR è affidarsi ai bordi di altri elementi. Ma a volte un HR è molto più pratico e facile da usare rispetto al tentativo di impostare i confini. I problemi relativi al modello scatolato di alcuni browser possono rendere ancora più complicata l'impostazione di un confine. Cambiare i confini può essere difficile
Crea una linea decorativa con un'immagine di sfondo
Trasformare gli elementi HR
Un altro modo per ottenere linee sulle tue pagine
