ایجاد خطوط جالب به دنبال صفحات وب با برچسب های HR
اگر شما نیاز به اضافه کردن خطوط افقی، جداسازی به وب سایت خود دارید، چند گزینه دارید. شما می توانید فایل های تصویر واقعی از این خطوط را به صفحه خود اضافه کنید، اما این مرورگر نیاز به بازیابی و بارگذاری آن فایل ها دارد که می تواند تاثیر منفی بر عملکرد سایت داشته باشد.
شما می توانید از ویژگی های مرجع CSS برای اضافه کردن مرزهایی که به صورت خطوط یا در بالا یا پایین یک عنصر عمل می کنند، به طور موثر ایجاد خط جداساز خود استفاده کنید.
در نهایت شما می توانید از عنصر HTML برای قانون افقی استفاده کنید
عنصر قانون افقی
اگر تا به حال یک عنصر را در یک صفحه وب قرار داده اید، به احتمال زیاد کشف کردید که راه پیش فرض این خطوط نمایش داده ایده آل نیست. این به این معنی است که شما باید به CSS تبدیل شوید تا ظاهر بصری این عناصر را تنظیم کنید تا با نحوه جستجوی وب سایتتان منطبق باشد.
یک برچسب اساسی HR نشان می دهد که مرورگر می خواهد آن را نمایش دهد. مرورگرهای مدرن به طور معمول نشانگرهای HR بدون پیمانه با عرض 100٪، ارتفاع 2 پیکسل و مرز سه بعدی در سیاه را برای ایجاد خط نشان می دهند.
در اینجا یک نمونه از یک عنصر HR استاندارد است یا شما می توانید در این تصویر یک HR را نشان می دهد که در مرورگر های مدرن دیده می شود.
عرض و ارتفاع در مرورگرها سازگار است
تنها سبک هایی که در مرورگرهای وب سازگار هستند عرض و سبک هستند. این تعریف چقدر خط خواهد بود. اگر عرض و ارتفاع را تعریف نکنید، عرض پیش فرض 100٪ است و ارتفاع پیش فرض 2px است.
در این مثال، عرض 50٪ از عنصر اصلی است (توجه داشته باشید که این مثال ها در زیر همه شامل سبک های درون خطی هستند. در تنظیمات تولید، این سبک ها در واقع در یک ورق سبک خارجی برای سهولت مدیریت در تمام صفحات شما نوشته می شوند):
style = "width: 50٪؛">
و در این مثال ارتفاع 2em است:
style = "height: 2em؛">
تغییر مرزها می تواند چالش برانگیز باشد
در مرورگرهای جدید، مرورگر خط را با تنظیم مرز ایجاد می کند. بنابراین اگر مرز را با اموال سبک حذف کنید، خط در صفحه ناپدید خواهد شد. همانطور که می بینید (به خوبی، هر چیزی را نمی بینید، به عنوان خطوط نامرئی) در این مثال:
style = "border: none؛">
تنظیم اندازه، رنگ و سبک مرز باعث می شود که خط ظاهر متفاوت باشد و در تمامی مرورگرهای مدرن تاثیر مشابهی داشته باشد. به عنوان مثال، در این تظاهرات مرز قرمز، نقاشی شده و عرض 1 پیکسل است:
style = "border: 1px dashed # 000؛">
اما اگر مرز و ارتفاع را تغییر دهید، سبکها در مرورگرهای بسیار قدیمی خیلی متفاوت از مرورگرهای مدرن هستند. همانطور که می بینید در این مثال، اگر شما آن را در IE7 و زیر مشاهده کنید (یک مرورگر است که به طرز وحشتناک منسوخ شده و دیگر توسط مایکروسافت پشتیبانی نمی شود) یک خط داخلی در نظر گرفته شده است که در مرورگرهای دیگر (از جمله IE8 و بالاتر) :
style = "height: 1.5em؛ width: 25em؛ border: 1px solid # 000؛">
این مرورگرهای قدیمی که امروزه در طراحی وب نقش مهمی ایفا نمی کنند، از آنجا که آنها با گزینه های مدرن تر جایگزین شده اند.
یک خط تزئینی با یک تصویر پس زمینه ایجاد کنید
به جای یک رنگ، می توانید تصویر پس زمینه را برای HR خود تعریف کنید تا دقیقا همانطور که شما آن را می خواهید، دقیقا همانطور که می خواهید، اما هنوز هم در نشانه گذاری شما به صورت معنایی نمایش داده می شود.
در این مثال ما یک تصویر از سه خط موج دار استفاده کردیم. با قرار دادن آن به عنوان تصویر پسزمینه بدون تکرار، در محتویاتی که به نظر می رسد تقریبا مثل آنچه در کتاب ها مشاهده می کنید، ایجاد می شود:
style = "height: 20px؛ background: #fff url (aa010307.gif) center scroll no repeat؛ border: none؛">
تبدیل عناصر HR
با CSS3، شما همچنین می توانید خطوط خود را جالب تر کنید. عنصر HR به طور سنتی خط افقی است ، اما با ویژگی CSS تغییر، شما می توانید تغییر دهید چگونه آنها را نگاه کنید. تغییرات مورد علاقه در عنصر HR برای تغییر چرخش است.
شما می توانید عنصر HR خود را به طوری که فقط کمی مورب:
hr {
-moz-transform: چرخش (10deg)؛
-webkit-تبدیل: چرخش (10deg)؛
-o-تبدیل: چرخش (10deg)؛
-ms-transform: چرخش (10deg)؛
تبدیل: چرخش (10deg)؛
}
یا شما می توانید آن را چرخانید تا کاملا عمودی باشد:
hr {
-moz-transform: چرخش (90deg)؛
-webkit-تبدیل: چرخش (90deg)؛
-o-transform: چرخش (90deg)؛
-ms-transform: چرخش (90deg)؛
تبدیل: چرخش (90deg)؛
}
به خاطر داشته باشید که این کار HR را بر اساس موقعیت فعلی آن در سند مرتبا تغییر می دهد، بنابراین ممکن است نیاز به تنظیم موقعیت برای دریافت آن در جایی که شما آن را می خواهید. توصیه نمی شود که از این برای اضافه کردن خطوط عمودی به یک طراحی استفاده کنید، اما این یک راه برای به دست آوردن یک اثر جالب است.
راه دیگری برای گرفتن خطوط در صفحات شما
یکی از چیزهایی که بعضی مردم به جای استفاده از عنصر HR باید به مرزهای عناصر دیگر بپردازند. اما گاهی اوقات یک HR بسیار راحت تر و ساده تر از استفاده از مرزها می باشد. مسائل مربوط به مدل جعبه برخی از مرورگرها می تواند یک مرز را حتی پیچیده تر کند.