Vytváranie zaujímavých línií na webových stránkach s HR tagmi
Ak potrebujete na svoje webové stránky pridať horizontálne linky v štýle separátora, máte niekoľko možností. Môžete pridať aktuálne obrazové súbory týchto riadkov na vašu stránku, ale to by vyžadovalo, aby váš prehliadač načítaval a načítaval tieto súbory, čo by mohlo mať negatívny vplyv na výkonnosť webu.
Pomocou vlastností hraníc CSS môžete pridať hranice, ktoré pôsobia ako čiary buď v hornej alebo spodnej časti elementu, čím efektívne vytvárajú oddeľovaciu čiaru.
Nakoniec môžete použiť prvok HTML pre horizontálne pravidlo -
Element horizontálnych pravidiel
Ak ste kedy vložili prvok na webovú stránku, pravdepodobne ste zistili, že predvolený spôsob zobrazovania týchto riadkov nie je ideálny. To znamená, že je potrebné obrátiť sa na CSS, aby ste upravili vizuálny vzhľad týchto prvkov tak, aby boli v súlade s tým, ako chcete, aby vaše stránky vyzerali.
Základná značka HR sa zobrazuje tak, ako ho chce prehliadač zobraziť. Moderné prehliadače zvyčajne zobrazujú neštandardné HR značky so šírkou 100%, výškou 2px a hranicu 3D v čiernom prevedení.
Tu je príklad štandardného HR elementu alebo v tomto obrázku môžete vidieť, ako neštandardná HR vyzerá v moderných prehliadačoch.
Šírka a výška sú konzistentné v prehľadávačoch
Jediné štýly, ktoré sú konzistentné medzi webovými prehliadačmi, sú šírka a štýly. Tieto definujú, ako veľká bude linka. Ak neurčíte šírku a výšku, predvolená šírka je 100% a predvolená výška je 2px.
V tomto príklade je šírka 50% nadradeného prvku (všimnite si, že tieto príklady nižšie obsahujú všetky inline štýly. Pri výrobných nastaveniach by tieto štýly boli v skutočnosti napísané vo vonkajšom štýle pre jednoduchosť spravovania na všetkých vašich stránkach):
style = "šírka: 50%;">
A v tomto príklade je výška 2m:
style = "height: 2em;">
Zmena hraníc môže byť náročná
V moderných prehliadačoch prehľadávač vytvára líniu úpravou hranice. Ak odstránite okraj so vlastnosťou štýlu, linka zmizne na stránke. Ako vidíte (no, v tomto príklade nič neuvidíte, pretože riadky budú neviditeľné):
style = "border: none;">
Nastavenie veľkosti, farby a štýlu hraníc spôsobí, že riadok bude vyzerať inak a bude mať rovnaký účinok vo všetkých moderných prehliadačoch. Napríklad v tejto ukážke je okraj červený, prerušený a 1px široký:
style = "border: 1px dashed # 000;">
Ak však zmeníte hranicu a výšku, štýly sa vo veľmi zastaraných prehliadačoch vyzerajú trošku odlišne, ako v moderných prehliadačoch. Ako vidíte v tomto príklade, ak ho zobrazíte v IE7 a nižšie (prehliadač, ktorý je žalostne zastaraný a už nie je podporovaný spoločnosťou Microsoft), je skosený vnútorný riadok, ktorý sa nezobrazuje v iných prehliadačoch (vrátane IE8 a vyššie) :
style = "height: 1.5em; šírka: 25m; okraj: 1px solid # 000;">
Tieto starožitné prehliadače skutočne nie sú v dnešnom webovom dizajne veľkou obavou, pretože boli vo veľkej miere nahradené modernými možnosťami.
Vytvorte dekoratívnu čiaru s obrázkom na pozadí
Namiesto farby môžete definovať obrázok pozadia pre váš HR tak, aby vyzeral presne tak, ako chcete, ale stále sa zobrazuje sémanticky vo vašom značkovaní.
V tomto príklade sme použili obrázok, ktorý má tri zvlnené čiary. Ak ho nastavíte ako obrázok na pozadí bez opakovania, vytvorí sa prerušenie obsahu, ktorý vyzerá takmer tak, ako je vidieť v knihách:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat centrum posúvania; border: none;">
Transformácia HR elementov
Vďaka CSS3 môžete aj vaše linky zaujímať. Element HR je tradične horizontálna čiara, ale s vlastnosťou transformácie CSS môžete zmeniť spôsob, akým vyzerajú. Obľúbenou transformáciou na prvok HR je zmena rotácie.
Element HR môžete otáčať tak, aby bol len mierne uhlopriečny:
hr {
-moz-transform: rotácia (10deg);
-webkit-transform: rotácia (10deg);
-o-transformovať: otočiť (10deg);
-ms-transform: otočenie (10deg);
transformácia: otočenie (10deg);
}
Alebo ho môžete otočiť tak, aby bol úplne vertikálny:
hr {
-moz-transform: rotácia (90deg);
-webkit-transform: rotácia (90deg);
-o-transformácia: otočenie (90deg);
-ms-transform: otočenie (90deg);
transformácia: otočenie (90deg);
}
Nezabúdajte, že to robí HR na základe aktuálneho umiestnenia v dokumente, takže budete musieť upraviť umiestnenie tak, aby ste ho dostali tam, kde ho chcete. Neodporúča sa to pridať vertikálne čiary do dizajnu, ale je to spôsob, ako získať zaujímavý efekt.
Ďalší spôsob, ako získať linky na vašich stránkach
Jedna vec, ktorú niektorí ľudia robia namiesto použitia HR prvku, je spoliehať sa na hranice iných prvkov. Ale niekedy je HR oveľa pohodlnejšie a ľahšie sa používa ako snaha o vytvorenie hraníc. Problémy s modelmi boxov niektorých prehliadačov môžu nastaviť hranice ešte zložitejšie.