تصميم علامة الموارد البشرية (القاعدة الأفقية)

جعل خطوط مثيرة للاهتمام على صفحات الويب مع علامات الموارد البشرية

إذا كنت بحاجة إلى إضافة خطوط أفقية على غرار مواقع الفواصل إلى مواقع الويب الخاصة بك ، فلديك بعض الخيارات. يمكنك إضافة ملفات صور فعلية لتلك الخطوط إلى صفحتك ، ولكن ذلك يتطلب من المتصفح استرداد هذه الملفات وتحميلها ، الأمر الذي قد يكون له تأثير سلبي على أداء الموقع.

يمكنك استخدام خاصية حد CSS لإضافة حدود تعمل كخطوط إما في الجزء العلوي أو في أسفل عنصر ، مما يؤدي إلى إنشاء خط فاصل بكفاءة.

أخيرا ، يمكنك استخدام عنصر HTML للقاعدة الأفقية -

عنصر القاعدة الأفقية

إذا وضعت عنصرًا على صفحة ويب من أي وقت مضى ، فمن المحتمل أنك اكتشفت أن الطريقة الافتراضية لعرض هذه الخطوط ليست مثالية. وهذا يعني أنك بحاجة إلى الانتقال إلى CSS لضبط المظهر المرئي لهذه العناصر ليتماشى مع الطريقة التي تريد أن يبحث بها موقعك.

يتم عرض علامة الموارد البشرية الأساسية بالطريقة التي يريد المتصفح عرضها. تعرض المتصفحات الحديثة عادةً بطاقات الموارد البشرية غير المتدرجة مع عرض 100٪ ، وارتفاع 2px ، وحدود ثلاثية الأبعاد باللون الأسود لإنشاء الخط.

هنا مثال على عنصر الموارد البشرية القياسية أو يمكنك أن ترى في هذه الصورة كيف تبدو الموارد البشرية غير المستوية في المتصفحات الحديثة.

العرض والارتفاع متسقان عبر المتصفحات

الأنماط الوحيدة المتسقة عبر متصفحات الويب هي العرض والأنماط. هذه تحدد مدى خط سيكون. إذا لم تحدد العرض والطول ، فسيكون العرض الافتراضي 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 استنادًا إلى موقعه الحالي في المستند ، لذلك قد تحتاج إلى ضبط الموضع للحصول عليه في المكان الذي تريده. لا ينصح باستخدام هذا لإضافة خطوط عمودية إلى تصميم ، ولكنها طريقة للحصول على تأثير مثير للاهتمام.

طريقة أخرى للحصول على خطوط على صفحاتك

الشيء الوحيد الذي يفعله بعض الناس بدلاً من استخدام عنصر الموارد البشرية هو الاعتماد على حدود العناصر الأخرى. ولكن في بعض الأحيان يكون استخدام الموارد البشرية أكثر ملاءمة وأسهل من محاولة إعداد الحدود. يمكن أن تؤدي مشكلات نماذج مربعات بعض المتصفحات إلى إعداد حدود أكثر تعقيدًا.