Izrada zanimljivih linija na web stranicama sa HR oznakama
Ako želite da dodate horizontalne linije u separatorskom stilu na svoje veb lokacije, imate nekoliko opcija. Možete dodati stvarne slikovne datoteke tih redova na vašu stranicu, ali to bi zahtevalo od vašeg pretraživača da preuzme i učita te datoteke, što bi moglo imati negativan uticaj na performanse sajta.
Možete koristiti CSS graničnu svojinu da biste dodali granice koje deluju kao linije bilo na vrhu ili na dnu elementa, stvarajući efektivno liniju separatora.
Konačno, možete koristiti HTML element za horizontalno pravilo -
Horizontalni elemenat pravila
Ako ste ikada stavili neki element na web stranici, verovatno ste otkrili da podrazumevani način prikazivanja ovih linija nije idealan. To znači da morate da se obratite CSS-u kako biste prilagodili vizuelni izgled ovih elemenata u skladu s načinom na koji želite da vaša stranica izgleda.
Osnovna HR oznaka se prikazuje na način na koji pretraživač želi da ga prikaže. Moderni preglednici obično prikazuju neoštećene HR oznake širine 100%, visine od 2px i 3D granice u crnoj boji za kreiranje linije.
Evo primera standardnog HR elementa ili možete videti na ovoj slici kako neostvareni HR izgleda u modernim pretraživačima.
Širina i visina su konzistentni preko pretraživača
Jedini stilovi koji su konzistentni preko web pretraživača su širina i stilovi. One definišu koliko će biti velika linija. Ako ne definišete širinu i visinu, podrazumevana širina je 100%, a podrazumevana visina je 2px.
U ovom primeru širina je 50% od roditeljskog elementa (u obzir uzimajući u obzir da navedeni primeri ispod uključuju inline stilove. U proizvodnom okruženju, ovi stilovi bi zapravo bili napisani u spoljnom listu stilova radi lakšeg upravljanja na svim vašim stranicama):
style = "width: 50%;">
U ovom primeru visina je 2em:
style = "height: 2em;">
Promena granica može biti izazovna
U modernim pretraživačima, pretraživač gradi liniju prilagođavajući granicu. Dakle, ako uklonite granicu sa svojstvima stila, linija će nestati na stranici. Kao što možete videti (pa, nećete videti ništa, jer će linije biti nevidljive) u ovom primeru:
style = "border: none;">
Prilagođavanje veličine, boje i stila granice učinit će liniju drugačijom i imati isti efekat u svim modernim pretraživačima. Na primjer, u ovoj demonstraciji granica je crvena, isprekidana i 1px široka:
style = "border: 1px pada # 000;">
Ali ako promenite granicu i visinu, stilovi izgledaju malo drugačije u veoma zastarjivim pregledačima nego u modernim pretraživačima. Kao što možete videti u ovom primjeru, ako ga vidite u IE7 i dolje (pretraživač koji je zastareo zastareo i više ga ne podržava), nalazi se urezana unutrašnja linija koja se ne prikazuje u drugim pretraživačima (uključujući IE8 i više) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Ovi starinski pretraživači zaista nisu baš briga u web dizajnu danas, jer su ih u velikoj mjeri zamijenili savremenim opcijama.
Napravite dekorativnu liniju sa pozadinskim slikama
Umesto boje, možete definirati pozadinsku sliku za HR-a tako da on izgleda tačno onako kako želite, ali i dalje prikazuje semantički u svojoj oznaci.
U ovom primeru koristili smo sliku koja ima tri valovite linije. Ako ga postavite kao pozadinsku sliku bez ponavljanja, kreira pauzu u sadržaju koji izgleda skoro kao što vidite u knjigama:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat centar za skrolovanje; border: none;">
Transformacija HR elemenata
Sa CSS3 možete takođe učiniti vaše linije zanimljivijim. HR element je tradicionalno horizontalna linija, ali sa svojom transformacijom CSS, možete promijeniti kako izgledaju. Omiljena transformacija HR elementa je da promeni rotaciju.
Možete rotirati svoj HR element tako da je samo malo dijagonalno:
hr {
-moz-transformirati: rotirati (10deg);
-webkit-transform: rotirati (10deg);
-o-transformacija: rotirati (10deg);
-ms-transformacija: rotirati (10deg);
transformirati: rotirati (10deg);
}
Ili možete da ga rotirate tako da je potpuno vertikalno:
hr {
-moz-transformirati: rotirati (90deg);
-webkit-transform: rotirati (90deg);
-o-transformacija: rotirati (90deg);
-ms-transformacija: rotirati (90deg);
transformirati: rotirati (90deg);
}
Zapamtite da ovo okreće HR na osnovu trenutne lokacije u dokumentu, tako da ćete možda morati da prilagodite pozicioniranje kako biste ga dobili tamo gde želite. Nije preporučljivo koristiti ovo za dodavanje vertikalnih linija dizajnu, ali to je način da se postigne interesantan efekat.
Još jedan način da dobijete linije na svojim stranicama
Jedna stvar koju neki ljudi rade umesto da koriste element HR-a je da se oslanja na granice drugih elemenata. Ali ponekad HR je mnogo pogodniji i lakši za korišćenje nego pokušavajući da postavlja granice. Problemi sa modelima kutije nekih pregledača mogu učiniti postavljanje granice čak i složenijim.