تعلم تطوير الويب تنسيق الخلفيات وحواف الصفحات باستخدام CSS

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

تنسيق الخلفيات باستخدام CSS

تُعد الخاصية background خاصيةً مختصرة تضبط عدة خاصيات تتعلق بتنسيق الخلفية سنراها تباعًا. قد تبدو هذه الخاصية معقدةً وصعبة الفهم عندما تصادفها في بعض ملفات التنسيق، وذلك لكثرة القيم التي تضبطها في الوقت ذاته. إليك مثالًا:

.box {
  background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.2) 39%,
        rgba(51, 56, 57, 1) 96%
      ) center center / 400px 200px no-repeat, url(big-star.png) center
      no-repeat, rebeccapurple;
}

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

تنسيق ألوان الخلفية

تُحدد الخاصية background-color لون خلفية الصفحة أو خلفية أي عنصر من عناصرها وتقبل أي قيمة لونية ممكنة، وتظهر الخلفية الملونة تحت محتوى العنصر وتمتد تحت المحتوى وحشوة صندوق العنصر.

نستخدم في المثال التالي مجموعةً من القيم اللونية المختلفة لإضافة خلفية ملونة إلى صندوق (عنصر <div>) وعنصر ترويسة <h2> وعنصر <span>:

اختيار صورة للخلفية

تُستخدم الخاصية background-image في عرض صورة على خلفية العنصر. يعرض المثال التالي صندوقين: يضم الأول صورةً أكبر من أبعاد الصندوق وهي (balloons.jpg) أما الثاني فيعرض صورة أصغر من أبعاد الصندوق (star.png). ما تفعله الخاصية background-image هنا أمر مهم جدًا، فلا تعرض في الصندوق الأول إلا قسمًا من الصورة أي لا تُصغّر الصورة تلقائيًا لتناسب أبعاد الصندوق، بينما تكرر الصورة ذات الأبعاد الأصغر تلقائيًا لتملأ مساحة الصندوق.

ملاحظة: إذا خصصت لونًا لخلفية العنصر إضافة إلى تخصيص صورة فستُعرض الصورة فوق اللون. جرّب ذلك بإضافة الخاصية ;background-color: black إلى المحدد b. في المثال السابق ولاحظ ما سيحدث.

التحكم بطريقة تكرار الخلفية

تُستخدم الخاصية background-repeat للتحكم بطريقة تكرار الصور في الخلفية وتأخذ إحدى القيم التالية:

• no-repeat: تمنع تكرار الصورة في الخلفية حتى لو كانت أبعادها أصغر من أبعاد العنصر.
• repeat-x: تكرار الصورة أفقيًا.
• repeat-y: تكرار الصورة عموديًا.
• repeat: وهي القيمة الافتراضية التي تكرر الصورة على كامل الخلفية.

جرّب تعديل الشيفرة التفاعلية التالية باستبدال القيمة no-repeat بالقيمة repeat-x ثم repeat-y وراقب ماذا يحدث.

ضبط أبعاد صورة الخلفية

لقد استخدمنا سابقًا الصورة "balloons.jpg" خلفيةً للصندوق ولها أبعاد أكبر من أبعاده، لهذا اقتُصّت الصورة وظهر جزءٌ منها فقط بما يلائم أبعاد الصندوق. يمكننا حل هذه المشكلة باستخدام الخاصية background-size التي تقبل قيمًا بنسبة مئوية من أبعاد الصورة الأصلية أو أبعادًا جديدة (طول وعرض) لتغيير أبعاد الصورة بما يلائم أبعاد الصندوق، كما يمكنك استخدام القيم التالية:

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

• contain: سيعمل المتصفح على تغيير أبعاد الصورة لتلائم أبعاد الصندوق تمامًا، لكن قد تظهر بعض الفراغات على أطراف الصندوق إذا كانت نسبة الطول إلى العرض في الصورة مختلفةً عن هذه النسبة في الصندوق.

غيّرنا في المثال التالي أبعاد الصورة حتى تظهر كاملةً ضمن الصندوق background-size: 100px 10em، لكن لاحظ التشوه الذي حصل. حاول أن تستخدم المحرر التفاعلي لتغيير قيمة الخاصية background-size إلى cover ثم contain ولاحظ ما يحدث. حاول أيضًا تغيير قيمة الخاصية background-repeat ماذا ستجد؟

ضبط موضع صورة الخلفية ضمن صندوق العنصر

تُستخدم الخاصية background-position لضبط موقع ظهور الصورة على خلفية الصندوق من خلال تحديد نظام إحداثيات تأخذ فيه زاوية الصندوق العليا اليسارية القيمة (0,0) ويمثل الإحداثي الأول x الإحداثي الأفقي والثاني y الإحداثي العمودي. تأخذ الخاصية background-position القيمة الافتراضية (0,0)، وقد تأخذ أية قيمة عددية لتدل على الموقع الأفقي والعمودي لزاوية الصورة بالنسبة لزاوية الصندوق مثل ;20px 10px.

يمكن أيضًا استخدام قيم مثل top و right لضبط حد الصورة اليساري أو اليميني على الحد اليساري أو اليميني للصندوق وهنالك أيضًا center و bottom و left.

إليك مثالًا عن استخدام القيم المفتاحية:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}

وهذا مثال آخر عن استخدام القيم العددية والنسب المئوية للإحداثيات:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

كما يمكنك الخلط بين القيم المفتاحية مع الإحداثيات أو النسب المئوية على أن تدل القيمة الأولى على الإزاحة الأفقية والثانية على الإزاحة العمودية:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px top;
}

يمكنك أيضًا استخدام صياغة أخرى لخاصية الموضع تضم أربع قيم كي تشير إلى مقدار البعد عن جوانب محددة من الصندوق. حددنا موقع الصورة في المثال التالي لتبتعد مقدار 20px عن أعلى الصندوق ومقدار 10px عن يمينه:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

جرِّب تغيير موقع النجمة في محرر الشيفرة التفاعلي التالي:

ملاحظة: تُعد الخاصية background-position خاصيةً مختصرةً للخاصيتين background-position-x و background-position-y اللتين تتيحان ضبط الموقعان الأفقي والعمودي لصورة الخلفية كلًا على حدى.

خلفيات ذات ألوان متدرجة

تُعامل الخلفيات اللونية المتدرجة Gradient backgrounds مثل صور وتُضبط باستخدام الخاصية background-image، ويمكنك الاطلاع على الأنواع المختلفة والخلفيات المتدرجة الألوان من خلال موسوعة حسوب. ستجد على شبكة الويب الكثير من الأدوات التي توّلد خلفيات متدرجة الألوان باستخدام CSS وعندها يمكنك نسخ شيفرة هذه الخلفيات واستخدامها.

جرّب بعض الخلفيات المتدرجة الألوان عبر محرر الشيفرة التفاعلي التالي، ولاحظ كيف استخدمنا التدرج الخطي linear gradient في الصندوق الأول والتدرج الشعاعي (أو القطري) radial gradient في الثاني مع خلفية مكررة:

خلفيات ذات صور متعددة

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

تستطيع أيضًا ضبط بقية خاصيات الخلفية *-background لكل صورة بوضع فواصل بين القيمة المناسبة لكل صورة. إليك مثالًا:

background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px, top right;

تتوافق كل قيمة للخاصيات المختلفة مع القيمة المقابلة في الخاصيات الأخرى، إذ ستأخذ الصورة "image1" قيمة خاصية التكرار background-repeat المقابلة لها وهي no-repeat.

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

جرّب استخدام عدة صور للخلفية من خلال المحرر التفاعلي التالي، وحاول أن تغير بقية الخاصيات لتتعرف جيدًا على طريقة عملها:

الترابط بين محتوى العنصر وخلفيته

تُستخدم خاصية الترابط background-attachment لتحديد سلوك الخلفية عند تمرير scroll محتوى العنصر للأعلى أو الأسفل. تأخذ هذه الخاصية القيم التالية:

• scroll: يفرض هذا الخيار على خلفية العنصر أن تتحرك عند تحريك الصفحة فقط وليس مع تحرك أو تمرير محتوى العنصر؛ أي أن للخلفية موقعًا ثابتًا بالنسبة للصفحة ككل وتتحرك فقط عند تغيّر هذا الموقع.
• fixed: يفرض هذا الخيار على خلفية العنصر أن تبقى في نفس مكانها على شاشة العرض سواء تحرك محتوى الصفحة أو تحرّك محتوى العنصر.
• local: تتحرك خلفية العنصر في هذه الحالة مع حركة العنصر أثناء تحريك محتوى الصفحة ككل.

تؤثر هذه الخاصية على العنصر أو الصفحة عندما يكون هناك محتوًى قابلًا للتمرير. يمكنك الاطلاع على عمل هذه الخاصية والفرق بين القيم الثلاث التي تأخذها من خلال المثال التجريبي background-attachment.html الموجود على غيت هب GitHub.

استخدام الخاصية المختصرة background

أشرنا في بداية هذا المقال أن الخلفيات قد تُضبط باستخدام الخاصية المختصرة background التي تتيح لك ضبط جميع الخاصيات المتعلقة بخلفية العنصر دفعةً واحدة، لكن إذا قررت أن تستخدم عدة صور للخلفية فعليك تحديد جميع قيم الخصائص المتعلقة بالصورة الأولى ومن ثم وضع فاصلة , تليها الصورة الثانية وجميع قيم الخاصيات اللازمة وهكذا. لدينا في المثال التالي خلفية متدرجة الألوان ضُبط حجمها وموضعها، ثم صورة غير مكررة وقد َضُبط موضعها، ثم حُدد لون للخلفية. من أجل هكذا حالات، لا بد من اتباع بعض القواعد عند استخدام الخاصية المختصرة للخلفية:

• لا يمكن تحديد الخاصية إلا في نهاية القيم (بعد آخر فاصلة).
• لا بد من وضع قيمة الخاصية background-size بعد قيمة الخاصية background-position على أن يفصل بينهما المحرف / مثل center/80%.

يمكنك الاطلاع على تفاصيل أكثر حول البنية العامة لهذه الخاصية المختصرة من خلال صفحة background ضمن موسوعة حسوب.

اعتبارات شمولية الوصول عند ضبط خلفيات العناصر

عندما تضع نصًا فوق صورة الخلفية أو فوق خلفية لونية، لا بد من الانتباه إلى التباين اللوني بين الخلفية والنص حتى يتمكن جميع الزائرين من قراءة النص، وإذا وضعت صورة في الخلفية ونصًا فوقها، فعليك ضبط الخاصية background-color على لون يجعل قراءة النص سهلًا في حال لم تُحمّل الصورة.

لا يمكن لقارئ الصفحة الآلي تحليل صور الخلفية، لهذا لا بُد أن تكون هذه الصور للديكور فقط وألا تحتوي على معلومات مهمة، إذ لا بُد أن يكون المحتوى المهم جزءًا من صفحة HTML وليس في صور الخلفيات.

حواف العناصر والصفحة

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

.box {
  border: 1px solid black;
}

كما يمكنك ضبط إحدى هذه الحواف على النحو التالي:

.box {
  border-top: 1px solid black;
}

أما الخاصيات المفردة لضبط سماكة الحافة والنمط واللون فهي:

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

وإليك الخاصيات المفردة لضبط كل حافة على حدى:

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

ملاحظة: ترتبط الخواص top و right و bottom و left المتعلقة بالحواف منطقيًا بنمط الكتابة في المستند (يمين إلى يسار أو العكس) وهذا ما سنناقشه في موضع آخر.

هنالك أنواع مختلفة من الأنماط التي يمكن أن يأخذها شكل الحافة، وهذا ما نعرضه في مثالنا المكتوب ضمن محرر الشيفرة التالي:

الحواف الدائرية

تُنسّق حواف الصندوق لتكون دائرية الشكل عن طريق الخاصية border-radius أو الخاصيات المطوّلة المتعلقة بها لضبط كل حافة على حدى. يمكن استخدام قيمتين عدديتين أو نسبتين مئويتين، الأولى تحدد نصف القطر الأفقي والثانية نصف القطر العمودي لاستدارة الحافة، لكن عادةً ما تمرر قيمة واحدة وتستخدم لنصفي القطرين.

فلو أردنا مثلًا جعل استدارة جميع الحواف بنصف قطر 10px ستكون الشيفرة كما يلي:

.box {
  border-radius: 10px;
}

وإذا أردنا جعل الزاوية العليا اليمينية تبدو مستديرة وفق نصف قطر أفقي قيمته 1em وآخر عمودي نصف قطره 10% نكتب:

.box {
  border-top-right-radius: 1em 10%;
}

ضبطنا في مثالنا التالي جميع الحواف على نفس الاستدارة بدايةً، ثم غيرنا قيمة الاستدارة للحافة العليا اليمينية كي تبدو مميزة. حاول أن تستخدم محرر الشيفرة التفاعلي التالي في تعديل استدارة حواف الصندوق. ألقِ نظرةً على الخاصية border-radius للاطلاع على خيارات الصيغ المتاحة.

الخلاصة

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

ترجمة -وبتصرف- لمقال backgrounds and borders.

اقرأ أيضًا

• المقال السابق: دليل مختصر إلى نموذج الصندوق Box Model في تنسيقات CSS
• التنسيقات الأساسية للعناصر في CSS
• كيفية تنسيق الصور باستخدام CSS