مستوى الشفافية في CSS3
الشفافية: Opacity
يسمح لنا CSS باللعب بسهولة مع مستويات شفافية العناصر! لذلك ، سوف نستخدم ميزات CSS3: خاصية opacity ورمز RGBa.
خاصية opacity
تسمح لنا خاصية opacity ، البسيطة جداً ، بالإشارة إلى مستوى التعتيم، وهو عكس الشفافية .
عندما نستعمل القيمة 1 ، سيكون العنصر غير شفاف تمامًا، هذا هو السلوك الافتراضي.
عندما نستعمل القيمة 0 ، سيكون العنصر شفافاً تماماً.
لذلك وجب اختار القيمة بين 0 و 1. وبالتالي حين نعطي القيمة 0.6 ، سيكون عنصرك مُعَتَّماً إلى مستوى 60٪ و هذا يمكننا الرؤيا من خلاله!
و يمكننا كتابته في ملف CSS كالتالي :
|
1 2 3 4 |
p { opacity: 0.6; } |
فيما يلي مثال يتيح لنا تقدير الشفافية. ستجد النتيجة في الشكل التالي:
|
1 2 3 4 5 6 7 8 9 10 11 |
body { background: url('crepuscule.jpg'); } p { background-color: green; color: white; opacity: 0.3; } |
محتوى النص شـفـاف
لاحظ أن الشفافية تعمل على جميع المتصفحات الحديثة ، بما في ذلك Internet Explorer من IE9.
تصنيف RGBa
يقدم لنا CSS3 طريقة أخرى للعب بشفافية: تصنيف RGBa. هذا هو في الواقع تصنيف RGB الذي رأيناه سابقًا ، ولكن مع الخاصية الرابعة: مستوى الشفافية (يسمى « canal alpha »). بنفس الطريقة كما كان من قبل ، بقيمة 1 ، تكون الخلفية معتمة تمامًا. بقيمة أقل من 1 ، تكون شفافة.
|
1 2 3 4 |
p { background-color: rgba(255, 0, 0, 0.5); /* الخلفية حمراء بمستوى نصف شفافة */ } |
انها أسهل مما تتصور. يمكنك تحقيق نفس التأثير تمامًا مع التعتيم فقط عند اللعب باستخدام التصنيف RGBa .
هذا الترميز يُعرف من قِبَلِ جميع المتصفحات الحديثة ، بما في ذلك Internet Explorer (من IE9). بالنسبة للمتصفحات القديمة ، يوصى بالإشارة إلى التصنيف RGB القياسي بالإضافة إلى RGBa.
بالنسبة إلى هذه المتصفحات ، لن تكون الخلفية شفافة ، ولكن سيكون هناك لون خلفية على الأقل.
|
1 2 3 4 5 |
p { background-color: rgb(255,0,0); /* بالنسبة للمتصفحات القديمة */ background-color: rgba(255,0,0,0.5); /* بالنسبة للمتصفحات الحديثة */ } |
خـلاصة للدروس الثلاثة :
- نقوم بتغيير لون النص مع خاصية color ، لون الخلفية مع background-color.
- قد تشير إلى وجود اللون عند كتابة إسمه باللغة الإنجليزية ، green مثلاً، عشري 109d0c# أو التصنيف RGB مثال: (rgb(63,163,32
- يمكنك إضافة صورة خلفية مع background-image . يمكنك اختيار عرض صورة الخلفية ثابتة أو على شكل فسيفساء أو لا ، وحتى وضعها في المكان مخصص على الصفحة أم لا.
- يمكننا أن نجعل جزءًا من الصفحة شفافًا مع تصنيف خاصية RGBa الخاص بخاصية الامتياز (مماثل لرمز RGB ، مع وجود قيمة رابعة تشير إلى مستوى الشفافية).
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.