Da biste web lokacijama dodali vodoravne crte u obliku separatora, jedna opcija uključuje dodavanje slikovnih datoteka tih linija vaše stranice, ali to bi zahtijevalo da vaš preglednik preuzme i učita te datoteke, što bi moglo imati negativan učinak na izvedba web mjesta. Također biste mogli koristiti CSS granično svojstvo za dodavanje granice koji djeluju kao crte na vrhu ili na dnu elementa, učinkovito stvarajući vašu liniju za razdvajanje.
Ili - još bolje - upotrijebite HTML element za vodoravno pravilo.
Horizontalni element pravila
Zadani izgled vodoravnih linija pravila nije idealan. Da bi izgledali ljepše, dodajte CSS kako biste prilagodili vizualni izgled tih elemenata tako da bude u skladu s onim kako želite da vaša web stranica izgleda.
Osnovna HR oznaka prikazuje način na koji je preglednik želi prikazati. Suvremeni preglednici obično prikazuju neuglađene HR oznake širine 100 posto, visine od 2 piksela i 3D obruba u crnoj boji za stvaranje linije.
Širina i visina su dosljedni u svim preglednicima
Jedini stilovi koji su konzistentni u web preglednicima su širina i stilova. Oni definiraju koliko će linija biti velika. Ako ne definirate širinu i visinu, zadana širina je 100 posto, a zadana visina je 2 piksela.
U ovom primjeru širina je 50 posto nadređenog elementa (imajte na umu da ovi primjeri dolje uključuju ugrađene stilove. U produkcijskoj postavci ti bi stilovi zapravo bili napisani u vanjskom listu stilova radi lakšeg upravljanja na svim vašim stranicama):
style = "width: 50%;">
A u ovom primjeru visina je 2em:
style = "visina: 2em;">
Promjena granica može biti izazovna
U modernim preglednicima preglednik gradi liniju prilagođavanjem obruba. Dakle, ako uklonite obrub sa svojstvom style, linija će nestati na stranici. Kao što vidite (pa, nećete ništa vidjeti, jer će linije biti nevidljive) u ovom primjeru:
style = "border: none;">
Prilagodba veličine, boje i stila obruba čini liniju drugačijom i ima isti učinak u svim modernim preglednicima. Na primjer, u ovoj demonstraciji obrub je crven, isprekidan i širok 1 piksela:
style = "border: 1px crtkana # 000;">
Napravite ukrasnu crtu s pozadinskom slikom
Umjesto boje, definirajte pozadinsku sliku za vodoravno pravilo tako da izgleda točno onako kako vi želite, ali da se i dalje semantički prikazuje u vašem označavanju. U ovom smo primjeru koristili sliku koja ima tri valovite linije. Postavljajući ga kao pozadinska slika bez ponavljanja, stvara prekid u sadržaju koji izgleda gotovo kao da ga vidite u knjigama:
style = "visina: 20px; pozadina: #fff url (aa010307.gif) centar za pomicanje bez ponavljanja; obrub: nema; ">
Transformacija HR elemenata
Pomoću CSS3 svoje crte možete učiniti i zanimljivijima. HR element tradicionalno je a vodoravno liniju, ali pomoću svojstva CSS transform možete promijeniti njihov izgled. Omiljena transformacija na elementu HR je promjena rotacije.
Zakrenite svoj HR element tako da bude samo malo dijagonalno:
hr {
-moz-transformiraj: rotiraj (10deg);
-webkit-transformiraj: rotiraj (10deg);
-o-transformirati: rotirati (10deg);
-ms-transformiraj: rotiraj (10deg);
transformirati: rotirati (10deg);
}
Ili ga možete okretati tako da bude potpuno okomit:
hr {
-moz-transformiraj: rotiraj (90deg);
-webkit-transformiraj: rotiraj (90deg);
-o-transformirati: rotirati (90deg);
-ms-transformiraj: rotiraj (90deg);
transformirati: rotirati (90deg);
}
Ova tehnika okreće HR na temelju trenutnog mjesta u dokumentu, pa ćete možda trebati prilagoditi pozicioniranje kako biste ga postavili tamo gdje želite. Ne preporučuje se koristiti ovo za dodavanje okomitih crta dizajnu, ali zanimljiv je učinak.
Još jedan način za dobivanje linija na vašim stranicama
Jedna stvar koju neki ljudi rade umjesto da koriste element HR jest oslanjanje na granice drugih elemenata. Ali ponekad je HR puno prikladniji i lakši za upotrebu od pokušaja postavljanja granica. Problemi s modelima okvira nekih preglednika mogu postavljanje obruba učiniti još složenijim.