مستوى الشفافية في CSS3

الشفافية

يسمح لنا CSS باللعب بسهولة مع مستويات شفافية العناصر! لذلك ، سوف نستخدم ميزات CSS3: خاصية  opacity  ورمز RGBa.

خاصية opacity

تسمح لنا خاصية opacity ، البسيطة جداً ، بالإشارة إلى مستوى التعتيم،  وهو عكس الشفافية .

عندما نستعمل القيمة  1 ، سيكون العنصر غير شفاف تمامًا، هذا هو السلوك الافتراضي.

عندما نستعمل القيمة 0 ، سيكون العنصر شفافاً تماماً.

لذلك وجب اختار القيمة بين 0 و 1. وبالتالي حين نعطي القيمة 0.6 ، سيكون عنصرك مُعَتَّماً إلى مستوى 60٪  و هذا يمكننا الرؤيا من خلاله!

و يمكننا كتابته في ملف CSS كالتالي : 

 

 

فيما يلي مثال يتيح لنا تقدير الشفافية. ستجد النتيجة في الشكل التالي:

 

 

محتوى النص شـفـاف

لاحظ أن الشفافية تعمل على جميع المتصفحات الحديثة ، بما في ذلك Internet Explorer من IE9.

إذا قمت بتطبيق خاصية opacity  على عنصر من الصفحة ، فسوف تصبح جميع محتويات هذا العنصر شفافة (حتى الصور ، و عناصر أخرى في الداخل ، وما إلى ذلك). إذا كنت تريد فقط جعل لون الخلفية شفافًا ، فاستخدم تدوين RGBa بدلاً من ذلك.

 

تصنيف  RGBa

يقدم لنا CSS3 طريقة أخرى للعب بشفافية: تصنيف RGBa. هذا هو في الواقع تصنيف RGB الذي رأيناه سابقًا ، ولكن مع الخاصية الرابعة: مستوى الشفافية (يسمى « canal alpha »). بنفس الطريقة كما كان من قبل ، بقيمة 1 ، تكون الخلفية معتمة تمامًا. بقيمة أقل من 1 ، تكون شفافة.

 

 

انها أسهل مما تتصور. يمكنك تحقيق نفس التأثير تمامًا مع التعتيم فقط عند اللعب باستخدام التصنيف RGBa .

 هذا الترميز يُعرف من قِبَلِ جميع المتصفحات الحديثة ، بما في ذلك Internet Explorer (من IE9). بالنسبة للمتصفحات القديمة ، يوصى بالإشارة إلى التصنيف RGB القياسي بالإضافة إلى RGBa.
بالنسبة إلى هذه المتصفحات ، لن تكون الخلفية شفافة ، ولكن سيكون هناك لون خلفية على الأقل.

 

 

 خـلاصة للدروس الثلاثة :  

  • نقوم بتغيير لون النص مع خاصية color ، لون الخلفية مع background-color.
  • قد تشير إلى وجود اللون عند كتابة إسمه باللغة الإنجليزية ، green مثلاً، عشري  109d0c# أو التصنيف  RGB   مثال:    (rgb(63,163,32
  • يمكنك إضافة صورة خلفية مع  background-image . يمكنك اختيار عرض صورة الخلفية ثابتة أو على شكل فسيفساء أو لا ، وحتى وضعها في المكان مخصص على الصفحة أم لا. 
  • يمكننا أن نجعل جزءًا من الصفحة شفافًا مع تصنيف خاصية RGBa الخاص بخاصية الامتياز (مماثل لرمز RGB ، مع وجود قيمة رابعة تشير إلى مستوى الشفافية).

اترك تعليقًا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

    مؤسس موقع :
        عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.
كتب 292 مقالة في jabism.com.

عدد المشاهدات لهذه المقالة : 651