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