Izrada zanimljivih linija na web stranicama s oznakama HR
Ako trebate dodati vodoravne linije u stilu separatora na svoje web stranice, imate nekoliko mogućnosti. Možete dodati stvarne slikovne datoteke tih redaka na stranicu, ali to bi vaš preglednik trebao preuzeti i učitati te datoteke, što bi moglo negativno utjecati na performanse web mjesta.
Možete upotrijebiti granični entitet CSS da biste dodali granice koje djeluju kao linije bilo na vrhu ili na dnu elementa, učinkovito stvarajući liniju razdjelnika.
Konačno, možete koristiti HTML element za horizontalno pravilo -
Horizontalni pravni element
Ako ste ikad stavili element na web stranicu, vjerojatno ste otkrili da zadani način prikazivanja ovih redaka nisu idealni. To znači da se morate obratiti CSS-u kako biste prilagodili vizualni izgled tih elemenata kako biste bili u skladu s načinom na koji želite da vaša web-lokacija izgleda.
Osnovna HR oznaka prikazuje se na način na koji ga preglednik želi prikazati. Suvremeni preglednici obično prikazuju nestabilne HR oznake širine od 100%, visine od 2 piksela i 3D crte u crnoj boji kako bi stvorili liniju.
Evo primjera standardnog HR elementa ili možete vidjeti na ovoj slici kako se neuredan HR izgleda u modernim preglednicima.
Širina i visina su dosljedni preko preglednika
Jedini stilovi koji su dosljedni preko web preglednika su širina i stilovi. Oni određuju koliko će biti linija. Ako ne odredite širinu i visinu, zadana širina je 100%, a zadana visina je 2px.
U ovom primjeru širina je 50% od roditeljskog elementa (imajte na umu da ovi primjeri u nastavku sadrže inline stilove. U postavkama za proizvodnju, ovi će stilovi biti napisani na vanjski stilski list za jednostavnost upravljanja na svim vašim stranicama):
style = "width: 50%;">
I u ovom primjeru visina je 2em:
style = "height: 2em;">
Promjena granica može biti izazovna
U suvremenim preglednicima preglednik gradi liniju podešavanjem granice. Dakle, ako uklonite granicu sa svojstvom stila, linija će nestati na stranici. Kao što možete vidjeti (dobro, nećete vidjeti ništa, jer će linije biti nevidljive) u ovom primjeru:
style = "granica: none;">
Podešavanjem veličine, boje i stila granice linija će izgledati drugačija i ima isti učinak u svim modernim preglednicima. Na primjer, u ovoj demonstraciji granica je crvena, isprekidana i široka 1 x:
style = "border: 1px crtkana # 000;">
Ali ako promijenite granicu i visinu, stilovi se malo razlikuju u vrlo zastarjelim preglednicima nego u modernim preglednicima. Kao što možete vidjeti u ovom primjeru, ako ga pogledate u IE7 i dolje (preglednik koji je zastrašeno zastario i više ne podržava Microsoft) postoji unutarnja linija koja se ne prikazuje u drugim preglednicima (uključujući IE8 i više) :
style = "height: 1.5em; širina: 25em; granica: 1px solid # 000;">
Ovi antiqued preglednici zaista nisu puno zabrinutosti u web dizajnu danas, jer su uglavnom zamijenjeni suvremenijim mogućnostima.
Napravite dekorativnu liniju sa pozadinskom slikom
Umjesto boje, možete definirati pozadinsku sliku svog HR-a tako da izgleda točno onako kako to želi, ali i dalje prikazuje semantički u svojem označavanju.
U ovom primjeru koristili smo sliku koja je od tri valovite linije. Ako ga postavite kao pozadinsku sliku bez ponovljenih, stvara prekid sadržaja koji izgleda gotovo kao što vidite u knjigama:
style = "height: 20px; pozadina: #fff url (aa010307.gif) ne-ponavljanje centara za pomicanje; border: none;">
Transformiranje HR elemenata
Uz CSS3, linije možete učiniti zanimljivijima. Element HR je tradicionalno horizontalna linija, ali s CSS transformacijskim svojstvom možete promijeniti način na koji izgledaju. Omiljena transformacija na HR elementu je promjena rotacije.
Možete rotirati svoj HR element tako da je samo malo dijagonalno:
hr {
-MAG-transformacija: rotiranje (10deg);
-webkit-transformacija: rotiranje (10deg);
-o-transformacija: rotiranje (10deg);
-ms-transformacija: rotiranje (10deg);
transformacija: rotiranje (10deg);
}
Ili ga možete zakrenuti tako da je potpuno vertikalna:
hr {
-MAG-transformacija: rotiranje (90deg);
-webkit-transformacija: rotiraj (90deg);
-o-transformacija: rotiraj (90deg);
-ms-transformacija: rotiranje (90deg);
transformacija: rotirati (90deg);
}
Imajte na umu da ovaj rotira HR na temelju trenutne lokacije u dokumentu, pa ćete možda morati prilagoditi pozicioniranje da biste je ostvarili tamo gdje želite. Nije preporučljivo upotrijebiti ovo za dodavanje okomitih crta na dizajn, ali to je način privlačenja zanimljivog efekta.
Drugi način za dobivanje redaka na stranicama
Jedna stvar koju neki ljudi rade umjesto korištenja HR elementa jest oslanjanje na granice drugih elemenata. Ali ponekad je HR mnogo prikladniji i lakši za korištenje od pokušaja postavljanja granica. Problemi modela kutija nekih preglednika mogu učiniti postavljanje granice čak i trickier.