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