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

ميزة تعدد الخلفيات في CSS3 إختصرت الكثير من تنسيقات CSS التي كانت تحتاج إلى أكثر من عنصر من وسم div لعمل أكثر من خلفية في عنصر واحد لعل أشهر مثال هو مثال الحواف الدائرية لكنها موجودة في CSS3 ولا تحتاج الآن إلى وجود الصور كخلفية ولكن هناك عناصر قد تحتاج إلى أكثر من صورة موجودة في الخلفية، كما أن تعدد الخلفيات في CSS3 يتم على خاصية background نفسها، هذه الميزة مدعومة في محرك Mozilla/Gecho و محرك Webkit إضافةً إلى متصفح Opera.

وضع أكثر من صورة

يمكنك وضع أكثر من صورة لأي عنصر من نفس خاصية background، وهذه القيم يمكن كتابتها أكثر من مرة في في نفس الخاصية وهي من القيم الرئيسية:

  • background-image: صورة الخلفية.
  • background-position: موقع الخلفية، قيمها top، right، left، bottom.
  • background-repeat: تكرار الخلفية.

عند وضع ثلاثة خلفيات لعنصر HTML تكتب قيم خاصية background بهذه الطريقة:

Element {
    background: url(top.png) repeat-x top,
                url(bottom.png) repeat-x bottom,
      		    url(all.png) repeat;
}

حددنا في الشفرة السابقة خلفية في أعلى وأسفل العنصر إضافةً في صورة بتكرار كامل، لا يمكن كتابة الألوان في نفس الخاصية إذا كانت مكونة باكثر من خلفية ويمكنك كتابة اللون عن طريق خاصية background-color.

تنسيق اللون بأكثر من نوع

في CSS3 يمكنك إستعمال صيغ مختلفة من الألوان، الصيغة التي نستعملها عادةً هي من نوع hexadecimal color مثل #ffffff لإضافة اللون الأبيض أو #000000 لإضافة اللون الأسود وغيره، الصيغ الأخرى هي من نوع rgba (تشير إلى صيغة RGB) و hsla (تشير إلى صيغة HSL) حيث الحرف الأخير من إسم نوع وقيمته يرمز إلى alpha أي شفافية اللون، مثلاً اللون الأحمر الذي يكتب #ff0000 في صيغة hex يمكن كتابته أيضاً بصيغة rgb بهذه الطريقة:

background-color: rgb(255,0,0);

إذا أردنا أن تكون درجة شفافية اللون بقيمة 0.5 أي 50% نستعمل صيغة rgba وتكتب بهذه الطريقة:

background-color: rgb(255,0,0,0.5);

ويكتب اللون الأحمر كذلك بصيغة hsla بهذه الطريقة:

background-color: hsla(0,100%,54%,1);

لاحظ أن القيمة الثانية والثالثة والتي تمثل كل من قيمة Saturation (إشباع اللون) و قيمة Lightness (خفة اللون) تكتب بنسبة مئوية وهذا ضروري في صيغة HSL.

صيغة HSL إختصار لقيم ( Hue, Saturation, Lightness) وصيغة RGB إختصار لقيم (Red, Green, Blue).

مثال عملي: تنسيق عنصر بأكثر من صورة

لدينا مثال عملي بسيط جداً، وهو تنسيق لعنصر (سيكون صندوق) يحوي على عنوان وفقرة وإستخدمت فيه أكثر من خلفية (في الأعلى وفي الأسفل) عبر خاصية background إضافةً على لون العنصر بإستخدام صيغة rgba عبر خاصية background-color، صورة عامة لشكل العنصر:

شفرة HTML الخاصة بالصندوق:

<div id="box">
    <h2>المدونة</h2>

    <p>" المدونة " هي المصطلح أو التعريب الأكثر قبولا لكلمة blog الإنجليزية التي نحتوي على كلمتين Web log بمعنى سجل الشبكة.</p>
</div>

نأتي بعدها لتنيسق CSS مع وجود خاصية background و background-color إضافة إلى تعليم الأجزاء المهمة من هذه الشفرة:

#box {
	margin: 0 auto;
	padding: 15px 10px 25px;
	width: 300px;
	background: url(line-top.png) repeat-x top,
				url(gradient-bottom.png) repeat-x bottom;
	background-color: rgba(232,232,232,0.5);
	border: 1px solid #7f7f7f;
}
#box h2 {
	margin: 0;
	font: bold 20px "Simplified Arabic";
	color: #330000;
}
#box p {
	margin: 0;
	text-align: justify;
	font: 13px tahoma;
	line-height: 20px;
	color: #353432;
}