Създаване на интересно изглеждащи линии на уеб страници с маркери HR
Ако имате нужда да добавите хоризонтални линии стил на сепаратор към уебсайтовете си, имате няколко опции. Можете да добавите актуални файлове с изображения на тези линии към страницата си, но това ще изисква от браузъра ви да изтегля и зарежда тези файлове, което може да има отрицателно въздействие върху ефективността на сайта.
Можете да използвате собствеността на границата CSS, за да добавите граници, които действат като линии в горната или долната част на елемента, като ефективно създават разделящата линия.
И накрая, можете да използвате елемента HTML за хоризонталното правило -
Елементът на хоризонталното правило
Ако някога сте поставили елемент на уеб страница, вероятно сте открили, че стандартният начин, по който се показват тези линии, не е идеален. Това означава, че трябва да се обърнете към CSS, за да коригирате визуалния облик на тези елементи, за да сте в съответствие с това, как искате да изглежда сайтът Ви.
Основният HR маркер се показва по начина, по който браузърът иска да го покаже. Съвременните браузъри обикновено показват нестимулирани персонални маркери с ширина 100%, височина 2px и триизмерна граница в черно, за да създадат линията.
Ето един пример за стандартен HR елемент или в този образ можете да видите как изглежда нестимулирано HR в модерните браузъри.
Ширината и височината са последователни в браузърите
Единствените стилове, които са съвместими в уеб браузърите, са ширината и стиловете. Те определят колко голяма ще бъде линията. Ако не дефинирате ширината и височината, стандартната ширина е 100% и височината по подразбиране е 2px.
В този пример ширината е 50% от родителския елемент (забележете, че всички примери по-долу включват всички вградени стилове. В производствена настройка тези стилове всъщност ще бъдат написани във външен лист за стиловете за лесно управление на всичките ви страници):
стил = "ширина: 50%;">
И в този пример височината е 2em:
стил = "височина: 2 дм;">
Промяната на границите може да бъде предизвикателство
В съвременните браузъри браузърът изгражда линията, като регулира границата. Така че ако премахнете границата със собствеността на стила, редът ще изчезне на страницата. Както можете да видите (добре, няма да видите нищо, тъй като линиите ще бъдат невидими) в този пример:
style = "border: none;">
Регулирането на размера, цвета и стила на рамката ще направи линията да изглежда различно и ще има същия ефект във всички съвременни браузъри. Например, в тази демонстрация границата е червена, пунктирана и широка 1px:
style = "border: 1px dashed # 000;">
Но ако промените границата и височината, стиловете изглеждат малко по-различни в много остарели браузъри, отколкото в модерните браузъри. Както виждате в този пример, ако го прегледате в IE7 и по-долу (браузър, който е жалко остарял и вече не се поддържа от Microsoft), има скосена вътрешна линия, която не се показва в другите браузъри (включително IE8 и нагоре) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Тези антикварни браузъри всъщност не са много загрижени за уеб дизайн днес, тъй като те в голяма степен са заменени с по-модерни опции.
Направете декоративна линия с фоново изображение
Вместо цвят, можете да дефинирате фоново изображение за вашия HR така, че да изглежда точно както искате, но все пак да показва семантично в маркера.
В този пример използвахме изображение с три вълнообразни линии. Като го поставяте като фоново изображение без повтаряне, то създава пробив в съдържанието, което изглежда почти като в книгите:
style = "height: 20px; background: #fff url (aa010307.gif) център за превъртане без повтаряне; border: none;">
Трансформиране на HR елементи
С CSS3 можете също да направите линиите си по-интересни. Елементът "Човешки ресурси" е традиционно хоризонтална линия, но с CSS трансформираната собственост можете да промените начина, по който изглеждат. Любимата трансформация на HR елемента е да се промени ротация.
Можете да завъртите HR елемента си така, че да е леко диагонален:
hr {
-moz-transform: завъртане (10deg);
-webkit-transform: завъртане (10deg);
-о-трансформация: завъртане (10deg);
-ms-transform: завъртане (10deg);
преобразуване: завъртане (10deg);
}
Или можете да го завъртите така, че да е напълно вертикална:
hr {
-moz-transform: завъртане (90deg);
-webkit-transform: завъртане (90deg);
-o-трансформация: завъртане (90deg);
-ms-transform: завъртане (90deg);
преобразуване: завъртане (90deg);
}
Не забравяйте, че това завърта HR въз основа на текущото му местоположение в документа, така че може да се наложи да настроите позиционирането, за да го получите там, където искате. Не е препоръчително да използвате това, за да добавите вертикални линии към дизайна, но това е начин да получите интересен ефект.
Друг начин да получите линии на вашите страници
Едно нещо, което някои хора правят, вместо да използват елемента HR, е да разчитат на границите на други елементи. Но понякога HR е много по-удобен и по-лесен за използване, отколкото да се опитвате да създадете граници. Проблемът с модели на кутии на някои браузъри може да направи още по-трудна настройването на границата.