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

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

الشفافية: Opacity

يسمح لنا 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 ، مع وجود قيمة رابعة تشير إلى مستوى الشفافية).

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 449 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

2٬351 عدد المشاهدات لهذا المحتوى
Scroll to Top