Vytváření zajímavých hledáček na webových stránkách s tagy HR
Pokud potřebujete přidat do svých webových stránek horizontální linky ve stylu oddělovače, máte několik možností. Můžete přidat skutečné obrazové soubory těchto řádků na vaši stránku, ale to by vyžadovalo, aby váš prohlížeč tyto soubory načítal a načítal, což by mohlo mít negativní dopad na výkonnost webu.
Pomocí vlastností hranice CSS můžete přidat hranice, které se chovají jako čáry v horní nebo spodní části prvku, což efektivně vytváří oddělovací čáru.
Nakonec můžete použít element HTML pro horizontální pravidlo -
Prvek horizontálního pravidla
Pokud jste někdy položili prvek na webovou stránku, pravděpodobně jste zjistili, že výchozí způsob zobrazení těchto řádků není ideální. To znamená, že je třeba obrátit se na CSS, abyste upravili vizuální vzhled těchto prvků tak, abyste byli v souladu s tím, jak chcete, aby vaše stránky vypadaly.
Základní značka HR se zobrazí tak, jak ji prohlížeč chce zobrazit. Moderní prohlížeče typicky zobrazují neoslané HR značky se šířkou 100%, výškou 2px a hranicí 3D v černé, aby vytvořily linku.
Zde je příklad standardního HR prvku nebo v tomto obrázku můžete vidět, jak vypadá neštovicová HR v moderních prohlížečích.
Šířka a výška jsou konzistentní v prohlížečích
Jediné styly, které jsou konzistentní mezi webovými prohlížeči, jsou šířka a styly. Ty určují, jak velká bude čára. Pokud definujete šířku a výšku, výchozí šířka je 100% a výchozí výška je 2px.
V tomto příkladu je šířka 50% rodičovského prvku (všimněte si, že tyto příklady níže obsahují všechny inline styly. Ve výrobním nastavení by tyto styly byly skutečně zapsány do externího stylu pro snadnou správu na všech stránkách):
styl = "šířka: 50%;">
V tomto příkladu je výška 2m:
style = "height: 2em;">
Změna hranic může být náročná
V moderních prohlížečích prohlížeč staví linku nastavením okraje. Pokud tedy odstraníte hranici vlastností stylu, linka zmizí na stránce. Jak můžete vidět (no, nic nevidíte, protože linky budou neviditelné) v tomto příkladu:
style = "border: none;">
Úprava velikosti, barvy a stylu ohraničení způsobí, že linka vypadá jinak a má stejný účinek ve všech moderních prohlížečích. Například v této ukázce je rámeček červený, přerušovaný a 1px široký:
style = "border: 1px dashed # 000;">
Pokud však změníte hranici a výšku, budou styly vypadat trochu jinak ve velmi zastaralých prohlížečích než v moderních prohlížečích. Jak můžete vidět v tomto příkladu, pokud jej prohlížíte v IE7 a níže (prohlížeč, který je žalostně zastaralý a již není podporován společností Microsoft), je zkosený vnitřní řádek, který se nezobrazuje v ostatních prohlížečích (včetně IE8 a vyšších) :
style = "height: 1.5em; šířka: 25m; ohraničení: 1px solid # 000;">
Tyto starožitné prohlížeče nejsou ve skutečnosti příliš zajímavé v designu webu dnes, protože byly do značné míry nahrazeny modernějšími možnostmi.
Vytvořte dekorativní čáru s obrazem na pozadí
Namísto barvy můžete definovat obrázek pozadí pro svůj HR tak, aby vypadal přesně tak, jak to chcete, ale stále se zobrazuje sémanticky ve značkách.
V tomto příkladu jsme použili obraz, který má tři vlnité čáry. Tím, že ho nastavíte jako obrázek na pozadí bez opakování, vytvoří přerušení obsahu, který vypadá téměř jako u knih:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat centrum posuvu; border: none;">
Transformace HR prvků
Pomocí funkce CSS3 můžete také zvýšit zajímavost vašich linek. Element HR je tradičně vodorovná čára, ale s vlastností transformace CSS můžete změnit, jak vypadají. Oblíbenou transformací na HR elementu je změna otáčení.
Element HR můžete otáčet tak, aby byl jen mírně úhlopříčný:
hr {
-moz-transformace: otočit (10deg);
-webkit-transform: otočení (10deg);
-o-transformace: otočit (10deg);
-ms-transform: otočit (10deg);
transformace: otočit (10deg);
}}
Nebo ji můžete otáčet tak, aby byl zcela vertikální:
hr {
-moz-transform: otočit (90deg);
-webkit-transform: otočení (90deg);
-o-transformace: otočit (90deg);
-ms-transform: otočit (90deg);
transformace: otočit (90deg);
}}
Nezapomeňte, že to rotuje HR na základě jeho aktuálního umístění v dokumentu, takže budete možná muset přizpůsobit umístění tak, aby se dostal tam, kde ho chcete. Nelze to doporučit pro přidání vertikálních částí k návrhu, ale je to způsob, jak získat zajímavý efekt.
Další způsob, jak dostat linky na vaše stránky
Jedna věc, kterou někteří lidé dělají namísto použití prvku HR, je spoléhat se na hranice jiných prvků. Ale někdy je HR mnohem pohodlnější a jednodušší než se snažit nastavit hranice. Problémy modelu krabice u některých prohlížečů mohou způsobit, že nastavení hranic je ještě obtížnější.