Израда занимљивих линија на веб страницама са ХР ознакама
Ако желите да додате хоризонталне линије у сепараторском стилу на своје веб локације, имате неколико опција. Можете додати стварне сликовне датотеке тих линија на вашу страницу, али то би захтевало од вашег претраживача да преузме и учита те датотеке, што би могло имати негативан утицај на перформансе сајта.
Можете користити ЦСС граничну својину да додате границе које делују као линије било на врху или на дну елемента, стварајући ефективно линију сепаратора.
Коначно, можете користити ХТМЛ елемент за хоризонтално правило -
Хоризонтални елеменат правила
Ако сте икада ставили неки елемент на веб страницу, вероватно сте открили да подразумевани начин приказивања ових линија није идеалан. То значи да морате да се обратите ЦСС-у како бисте прилагодили визуелни изглед ових елемената како би били у складу са начином на који желите да ваш сајт изгледа.
Основна ХР ознака се приказује на начин на који претраживач жели да га прикаже. Модерни прегледници обично приказују неоштећене ХР ознаке ширине 100%, висине од 2пк и 3Д границе у црној боји да би креирали линију.
Ево примера стандардног ХР елемента или можете видети на овој слици како неостварени ХР изгледа у модерним претраживачима.
Ширина и висина су конзистентни преко претраживача
Једини стилови који су конзистентни преко веб претраживача су ширина и стилови. Оне дефинишу колико ће бити велика линија. Ако не дефинишете ширину и висину, подразумевана ширина је 100%, а подразумевана висина је 2пк.
У овом примеру, ширина је 50% од родитељског елемента (обратите пажњу на примере испод које укључују инлине стилове. У производном окружењу, ови стилови би заправо били написани у спољашњем листу стилова за лакше управљање на свим вашим страницама):
стиле = "видтх: 50%;">
У овом примеру висина је 2ем:
стиле = "хеигхт: 2ем;">
Промена граница може бити изазовна
У савременим претраживачима, претраживач гради линију подешавањем границе. Дакле, ако уклоните границу са својствима стила, линија ће нестати на страници. Као што можете видети (па, нећете ништа видети, јер ће линије бити невидљиве) у овом примеру:
стиле = "бордер: ноне;">
Прилагођавање величине, боје и стила границе чини линију другачијом и има исти ефекат у свим модерним претраживачима. На примјер, у овој демонстрацији граница је црвена, испрекидана и 1пк широка:
стиле = "бордер: 1пк дасхед # 000;">
Али ако промените границу и висину, стилови изгледају мало другачији у веома застарјивим прегледачима него у модерним претраживачима. Као што можете видети у овом примеру, ако га видите у ИЕ7 и доље (прегледач који је застарео застарео и више га не подржава), налази се унутрашња линија која се не приказује у другим претраживачима (укључујући ИЕ8 и више) :
стиле = "хеигхт: 1.5ем; видтх: 25ем; маргин: 1пк солид # 000;">
Ови старински претраживачи заиста нису толико забринути у веб дизајну данас, јер су их у великој мјери замијенили савременим опцијама.
Направите декоративну линију са позадинским сликама
Уместо боје, можете дефинирати позадинску слику вашег ХР-а тако да изгледа тачно онако како желите, али и даље приказује семантички у својој ознаци.
У овом примеру користили смо слику са три валовите линије. Ако га поставите као позадинску слику без понављања, креира паузу у садржају који изгледа скоро као што видите у књигама:
стиле = "хеигхт: 20пк; бацкгроунд: #ффф урл (аа010307.гиф) но-репеат сцролл центер; бордер: ноне;">
Трансформација ХР елемената
Са ЦСС3 можете такође учинити ваше линије занимљивијим. Елемент ХР-а је традиционално хоризонтална линија, али са својом трансформацијом ЦСС, можете промијенити како изгледају. Омиљена трансформација ХР елемента је да промени ротацију.
Можете ротирати свој ХР елемент тако да је само мало дијагонално:
хр {
-моз-трансформ: ротирати (10дег);
-вебкит-трансформ: ротирати (10дег);
-о-трансформ: ротирати (10дег);
-мс-трансформација: ротирати (10дег);
трансформисати: ротирати (10дег);
}
Или можете да га ротирате тако да је потпуно вертикално:
хр {
-моз-трансформ: ротирати (90дег);
-вебкит-трансформ: ротирати (90дег);
-о-трансформ: ротирати (90дег);
-мс-трансформ: ротирати (90дег);
трансформисати: ротирати (90дег);
}
Запамтите да ово ротира ХР на основу тренутне локације у документу, тако да ћете можда морати да прилагодите позиционирање како бисте га добили тамо где то желите. Није препоручљиво користити ово за додавање вертикалних линија дизајну, али то је начин да се постигне интересантан ефекат.
Још један начин да добијете линије на својим страницама
Једна ствар коју неки људи раде уместо да користе елемент ХР-а је да се ослањају на границе других елемената. Али понекад ХР је много погоднији и лакши за коришћење него покушавајући да поставља границе. Проблеми са моделима кутије неких претраживача могу учинити постављање границе чак и сложенијим.