Ако желите да додате хоризонталне линије у сепараторском стилу на своје веб странице, ваше типичне опције укључују додавање датотека са слика на те странице на вашу страницу, али то би захтијевало од вашег претраживача да преузме и учита те датотеке, што би могло имати негативан утицај на сајт перформансе. Такође можете користити својство границе ЦСС да додате границе које делују као линије било на врху или на дну елемента, стварајући ефектно линију сепаратора.
Или - још боље - користите ХТМЛ елемент за хоризонтално правило.
Хоризонтални елеменат правила
Стандардни изглед хоризонталних линија правила није идеалан. Да би их изгледали боље, додајте ЦСС да бисте прилагодили визуелни изглед ових елемената како би били у складу са начином на који желите да ваш сајт изгледа.
Основна ХР ознака се приказује на начин на који претраживач жели да га прикаже. Савремени претраживачи обично приказују неоштећене ХР ознаке ширине 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дег);}
Запамтите да ова техника ротира ХР на основу своје тренутне локације у документу, тако да ћете можда морати да прилагодите позиционирање како бисте га добили тамо где желите. Није препоручљиво користити ово за додавање вертикалних линија дизајну, али то је начин да се постигне интересантан ефекат. Једна ствар коју неки људи раде уместо да користе елемент ХР-а је да се ослањају на границе других елемената. Али понекад ХР је много погоднији и лакши за коришћење него покушавајући да поставља границе. Проблеми са моделима кутије неких претраживача могу учинити постављање границе чак и сложенијим. Промена граница може бити изазовна
Направите декоративну линију са позадинским сликама
Трансформација ХР елемената
Још један начин да добијете линије на својим страницама
