Стварэнне цікавых перспектыўных ліній на вэб-старонках з HR-тэгаў
Калі вам трэба дадаць радкі па гарызанталі, Сепаратар стылю для вашых вэб-сайтаў, у вас ёсць некалькі варыянтаў. Вы можаце дадаць фактычныя файлы выявы гэтых радкоў на старонку, але гэта запатрабуе вашага браўзэра атрымліваць і загружаць гэтыя файлы, якія могуць аказаць негатыўны ўплыў на прадукцыйнасці сайта.
Вы можаце выкарыстоўваць CSS ўласцівасць мяжы , каб дадаць межаў , якія дзейнічаюць як лініі альбо ў верхняй або ў ніжняй частцы элемента, эфектыўна ствараючы сваю лінію падзелу.
Нарэшце, вы можаце выкарыстоўваць HTML - элемент для гарызантальнага правілы -
Правіла элемент па гарызанталі
Калі вы калі-небудзь змясціць элемент на вэб-старонцы, вы, верагодна, выявілі, што шлях па змаўчанні, якія адлюстроўваюцца на гэтыя радкі не з'яўляюцца ідэальнымі. Гэта азначае, што вам трэба звярнуцца да CSS, каб наладзіць знешні выгляд гэтых элементаў, каб быць у адпаведнасці з тым, як вы хочаце, каб ваш сайт, каб паглядзець.
Асноўны HR тэг адлюстроўваецца шлях браўзэр хоча паказаць яго. Сучасныя браўзэры звычайна адлюстроўваюць тэг HR без стыляў з шырынёй 100%, вышынёй 2px і 3D рамкай ў чорным колеры, каб стварыць лінію.
Вось прыклад стандартнага HR элемента ці вы можаце ўбачыць у гэтым вобразе , якім чынам выглядае без стыляў HR ў сучасных браўзэрах.
Шырыня і вышыня паслядоўна праз браўзэры
Адзіныя стылі, якія адпавядаюць праз вэб - браўзэры з'яўляюцца шырынёй і стылі. Яны вызначаюць, як вялікая лінія будзе. Калі вы не вызначыце шырыню і вышыню шырыня па змаўчанні 100% і вышыня па змаўчанні 2px.
У гэтым прыкладзе шырыня 50% ад бацькоўскага элемента (звярніце ўвагу на гэтыя прыклады ніжэй за ўсё ўключаюць у сябе убудаваныя стылі ва ўмовах вытворчасці, гэтыя стылі на самай справе былі б напісана ў вонкавым аркушы стылю для прастаты кіравання на працягу ўсіх старонак.):
стыль = "шырыня: 50%;">
І ў гэтым прыкладзе вышыня 2em:
стыль = "вышыня: 2em;">
Змяненне межаў можа быць складанай задачай
У сучасных браўзэрах, браўзэр будуе лінію, рэгулюючы мяжы. Так што калі вы выдаліце мяжы з уласцівасцю стылю, лінія знікне на гэтай старонцы. Як вы можаце бачыць (ну, вы не ўбачыце нічога, так як лініі будуць нябачныя) у гэтым прыкладзе:
стыль = "мяжы: няма;">
Рэгуляванне памеру мяжы, колер і стыль зробіць яе выглядаць па-рознаму і мае той жа эфект, ва ўсіх сучасных браўзэрах. Напрыклад, у гэтай дэманстрацыі мяжа чырвонага колеру, пункцірнай і 1px шырокая:
стыль = "мяжы: 1px пункцірнай # 000;">
Але калі змяніць межы і вышыню, стылі трохі адрознівацца ў вельмі састарэлых браўзэрах, чым у сучасных браўзэрах. Як вы можаце бачыць у гэтым прыкладзе, калі вы яго прагляду ў IE7 і ніжэй (браўзэр, які вельмі састарэў і больш не падтрымліваецца Microsoft) ёсць скошаны ўнутраная лінія, якая не адлюстроўваецца ў іншых браўзэрах (уключаючы IE8 і вышэй) :
стыль = "вышыня: 1.5em; шырыня: 25em; мяжы: 1px цвёрды # 000;">
Гэтыя Antiqued браўзэры сапраўды не вялікая праблема ў вэб-дызайне сёння, так як яны былі ў значнай ступені замененыя на больш сучасныя варыянты.
Зрабіць дэкаратыўныя лініі з фонавым малюнкам
Замест таго, каб колер, вы можаце вызначыць фонавы малюнак для HR, так што ён выглядае сапраўды гэтак жа, як вы хочаце, але па-ранейшаму адлюстроўваецца семантычна ў разметцы.
У гэтым прыкладзе мы выкарыстоўвалі вобраз, які з трох хвалістых ліній. Усталяваўшы яго ў якасці фонавага малюнка , без паўтору, ён стварае разрыў ў змесце , які выглядае амаль як вы бачыце ў кнігах:
стыль = "вышыня: 20px; фон: #fff URL (aa010307.gif) не паўтараць пракруткі цэнтр, мяжы: няма;">
Трансфармацыя HR элементаў
З дапамогай CSS3, вы можаце таксама зрабіць вашыя лініі больш цікавымі. Элемент HR традыцыйна з'яўляецца гарызантальная лінія, але з CSS пераўтварэнні уласнасці, вы можаце змяніць тое, як яны выглядаюць. Любімае пераўтварэнне на HR элеменце, каб змяніць кручэнне.
Вы можаце круціць HR элемент так, што гэта проста крыху па дыяганалі:
ч {
-moz-пераўтварэнне: паварот (10 градусаў);
-webkit-пераўтварэнне: паварот (10 градусаў);
-o-пераўтварэнне: Паварот (10 градусаў);
-MS-пераўтварэнне: паварот (10 градусаў);
пераўтварэнні: паварот (10 градусаў);
}
Ці вы можаце павярнуць яго так, каб ён цалкам па вертыкалі:
ч {
-moz-пераўтварэнне: паварот (90deg);
-webkit-пераўтварэнне: паварот (90deg);
-o-пераўтварэнне: Паварот (90deg);
-MS-пераўтварэнне: паварот (90deg);
пераўтварэнні: паварот (90deg);
}
Памятаеце, што гэта круціць HR на аснове яго бягучага месцазнаходжання ў дакуменце, так што вам, магчыма, спатрэбіцца скарэктаваць пазіцыянаванне, каб атрымаць яго там, дзе вы хочаце. Не рэкамендуецца выкарыстоўваць гэтую функцыю, каб дадаць вертыкальныя лініі ў дызайне, але гэта спосаб атрымаць цікавы эфект.
Іншы спосаб атрымаць лініі на вашых старонках
Адна рэч, што некаторыя людзі, замест таго, каб выкарыстоўваць элемент HR спадзявацца на межах іншых элементаў. Але часам HR нашмат зручней і прасцей у выкарыстанні, чым спрабаваць ўсталяваць межы. У акне мадэлі праблема некаторых браўзэраў могуць зрабіць налады мяжы яшчэ больш складана.