HR тегтері бар веб-беттерге қызықты сызықтарды жасау
Веб-сайттарға көлденең, бөлгіш стиль сызықтарын қосу қажет болса, сізде бірнеше опция бар. Сіз осы жолдардың нақты кескін файлдарын бетке қосуға болады, бірақ сіздің браузеріңіз осы файлдарды алу және жүктеуді талап етеді, бұл сайттың жұмысына теріс әсер етуі мүмкін.
CSS жиек сипатын бөлектеу жолын тиімді құрып, элементтің жоғарғы жағында немесе төменгі жағында сызықтар ретінде әрекет ететін шекараларды қосу үшін пайдалануға болады.
Соңында, сіз HTML элементін көлденең ереже үшін пайдалана аласыз -
Көлденең ереже элементі
Егер сіз веб-параққа элемент қойсаңыз, бұл жолдардың көрсетілетін әдепкі жолы бұл идеалды емес екенін анықтаған шығарсыз. Бұл дегеніміз, сіз осы элементтердің визуалды көрінісін сіздің сайтыңызды қалай көргіңіз келетініне сәйкес келтіру үшін CSS-ға бұруыңыз керек.
Негізгі HR тегі браузер оны көрсетуді қалайтын жолмен көрсетіледі. Қазіргі браузерлер әдетте 100% ені, 2px биіктігі және сызықты жасау үшін 3D өлшемді шекарасы бар керемет HR тегтерін көрсетеді.
Міне , стандартты HR элементінің үлгісі немесе осы суретте қазіргі заманғы браузерлерде таңғажайып HR қалай көрінетінін көруге болады.
Ені мен биіктігі браузерлерге сәйкес келеді
Веб-браузерлерге сәйкес келетін жалғыз стильдер ені мен мәнері болып табылады. Олар желінің қаншалықты үлкен екенін анықтайды. Ені мен биіктігін анықтамасаңыз, әдепкі ен ені 100% және әдепкі биіктігі 2px болады.
Бұл мысалда ені басты элементінің 50% -ын құрайды (бұл мысалдар төменде келтірілген кірістірілген мәнерлерді қамтиды: өндіріс параметрінде бұл стильдер барлық беттерде басқарудың оңай болуына арналған сыртқы стиль кестесінде жазылады):
style = «width: 50%;»>
Және бұл мысалда биіктігі 2:
style = «height: 2em;»>
Шекараны өзгерту күрделі болуы мүмкін
Заманауи браузерлерде браузер шекараны түзету жолын құрастырады. Сондықтан стиль сипатымен жиынды алып тастасаңыз, сызық бетте жоғалады. Көріп тұрғаныңыздай (жақсы, сіз ештеңе көрмейсіз, өйткені сызықтар көрінбейтін болады) осы мысалда:
style = «border: none;»>
Шекара өлшемін, түсін және мәнерін реттеу жолдың әртүрлі көрінісін тудырады және қазіргі заманғы барлық браузерлерде бірдей әсерге ие болады. Мысалы, осы демонстрацияда шекара қызыл, сызылған және 1 пиксель кең:
style = «border: 1px dashed # 000;»>
Бірақ шекараны және биіктікті өзгертсеңіз, стильдер заманауи браузерлерге қарағанда ескірген браузерлерде сәл өзгеше көрінеді. Бұл мысалда көрсетілгендей, егер сіз оны IE7 және төменде (браузер ескірген және Microsoft корпорациясы бұдан былай қолдау таппаса) көретін болсаңыз, басқа браузерлерде (IE8 және одан жоғары) көрсетілмейтін ішкі сызық бар, :
style = «height: 1.5em, ені: 25em, шекара: 1px solid # 000;»>
Бұл ескірген браузерлер бүгінгі күні веб-дизайндағы алаңдаушылық көп емес, себебі олар көбіне заманауи опциялармен ауыстырылды.
Фон суреті бар сәндік сызық жасаңыз
Түстің орнына сіз HR-ге арналған фондық суретті анықтай аласыз, сонда ол дәл қалағаныңыздай көрінеді, бірақ әлі де түзетулеріңізде семантикалық түрде көрсетіледі.
Бұл мысалда біз үш толқынды сызықтан тұратын бейнені қолдандық. Оны қайталанбайтын өңдік сурет ретінде орнату арқылы ол кітаптарда көргендей көрінетін мазмұндағы үзіліс жасайды:
style = «height: 20px; background: #fff url (aa010307.gif) қайталанбайтын жылжымалы орталық; border: none;»>
HR элементтерін түрлендіру
CSS3-те сіз желілеріңізді қызықтыра аласыз. HR элементі дәстүрлі көлденең сызық болып табылады, бірақ CSS сипатын өзгерту арқылы сіз олардың көрінісін өзгертуіңізге болады. HR элементіндегі сүйікті трансформация - айналуды өзгерту.
HR элементіңізді сәл диагональды етіп айналдыра аласыз:
сағ {
-moz-transform: айналу (10deg);
-webkit-transform: айналу (10deg);
-o-transform: айналу (10deg);
-ms-transform: айналдыру (10deg);
түрлендіру: айналдыру (10deg);
}
Немесе оны толығымен тік етіп айналдыра аласыз:
сағ {
-moz-transform: айналу (90deg);
-webkit-transform: айналу (90deg);
-o-transform: айналу (90deg);
-ms-transform: айналу (90deg);
түрлендіру: айналдыру (90deg);
}
Бұл HR-ді құжаттағы ағымдық орынға негізделіп айналдыратынын ұмытпаңыз, сондықтан сіз оны қалаған жеріңізді алу үшін орналасуды реттеуіңіз қажет болуы мүмкін. Оны дизайнға тік сызықтар қосу үшін пайдалану ұсынылмайды, бірақ бұл қызықты әсер алудың тәсілі.
Беттеріңізге сызықтарды алудың тағы бір жолы
Кейбір адамдар HR элементін пайдаланудың орнына басқа элементтердің шекараларына сүйену керек. Бірақ кейде кадрлар шекараны орнатуға тырысқаннан гөрі, ыңғайлы әрі ыңғайлы. Кейбір браузерлердің қораптағы үлгілік шығарылымдары шекараны тіпті қызықтырақ етуі мүмкін.