Per aggiungere linee orizzontali in stile separatore ai tuoi siti web, un'opzione include l'aggiunta di file immagine di quelle linee a la tua pagina, ma ciò richiederebbe al tuo browser di recuperare e caricare quei file, il che potrebbe avere un effetto negativo sopra prestazioni del sito. Potresti anche usare il CSS proprietà di confine da aggiungere frontiere che fungono da linee nella parte superiore o inferiore di un elemento, creando efficacemente la linea di separazione.
O, meglio ancora, usa il HTML elemento per la riga orizzontale.
L'elemento della regola orizzontale
L'aspetto predefinito delle righe orizzontali non è ideale. Per renderli più belli, aggiungi CSS per regolare l'aspetto visivo di questi elementi in modo che siano in linea con l'aspetto che desideri del tuo sito.
Un tag HR di base mostra il modo in cui il browser vuole visualizzarlo. I browser moderni in genere visualizzano tag HR senza stile con una larghezza del 100%, 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 i larghezza e stili. Questi definiscono quanto grande sarà la linea. Se non definisci la larghezza e l'altezza, la larghezza predefinita è 100% e l'altezza predefinita è 2 pixel.
In questo esempio la larghezza è il 50 percento dell'elemento padre (nota che questi esempi di seguito includono tutti gli stili in linea. In un ambiente di produzione, questi stili verrebbero effettivamente scritti in un foglio di stile esterno per facilità di gestione in tutte le tue pagine):
style="width: 50%;">
E in questo esempio l'altezza è 2em:
style="altezza: 2em;">
Cambiare i confini può essere una sfida
Nei browser moderni, il browser costruisce la linea regolando il bordo. Quindi, se rimuovi il bordo con la proprietà style, la linea scomparirà nella pagina. Come puoi vedere (beh, non vedrai nulla, poiché le linee saranno invisibili) in questo esempio:
style="bordo: nessuno;">
La regolazione della dimensione, del colore e dello stile del bordo rende la linea un aspetto diverso e ha lo stesso effetto in tutti i browser moderni. Ad esempio, in questa dimostrazione il bordo è rosso, tratteggiato e largo 1 pixel:
style="border: 1px tratteggiato #000;">
Crea una linea decorativa con un'immagine di sfondo
Invece di un colore, definisci un'immagine di sfondo per la tua regola orizzontale in modo che appaia esattamente come desideri, ma venga comunque visualizzata semanticamente nel markup. In questo esempio abbiamo usato un'immagine composta da tre linee ondulate. Impostandolo come immagine di sfondo senza ripetizione, crea un'interruzione nel contenuto che sembra quasi come si vede nei libri:
stile="altezza: 20px; sfondo: #fff url (aa010307.gif) centro di scorrimento senza ripetizione; bordo: nessuno;">
Trasformare gli elementi delle risorse umane
Con CSS3, puoi anche rendere le tue linee più interessanti. L'elemento HR è tradizionalmente a orizzontale line, ma con la proprietà di trasformazione CSS, puoi modificare il loro aspetto. Una delle trasformazioni preferite dell'elemento HR è cambiare la rotazione.
Ruota il tuo elemento HR in modo che sia solo leggermente diagonale:
ora {
-moz-trasformare: ruotare (10 gradi);
-webkit-transform: ruota (10deg);
-o-trasformare: ruotare (10 gradi);
-ms-trasforma: ruota (10 gradi);
trasformare: ruotare (10 gradi);
}
Oppure puoi ruotarlo in modo che sia completamente verticale:
ora {
-moz-trasformare: ruotare (90deg);
-webkit-transform: ruota (90deg);
-o-trasformare: ruotare (90 gradi);
-ms-transform: ruota (90 gradi);
trasformare: ruotare (90 gradi);
}
Questa tecnica ruota l'HR in base alla sua posizione attuale nel documento, quindi potrebbe essere necessario regolare il posizionamento per portarlo dove lo desideri. Non è consigliabile utilizzarlo per aggiungere linee verticali a un disegno, ma è un effetto interessante.
Un altro modo per ottenere linee sulle tue pagine
Una cosa che alcune persone fanno invece di usare l'elemento HR è fare affidamento sui bordi di altri elementi. Ma a volte un HR è molto più comodo e facile da usare che cercare di impostare i confini. I problemi del modello di scatola di alcuni browser possono rendere ancora più complicata l'impostazione di un bordo.