وصف الموضوع

الطريقة الصحيحة للتحكم في شفافية العناصر في الصفحة مثل الصناديق و النصوص و الآمنة على جميع المتصفحات .

في التصنيفات :CSS

إذا أردت أن تضع وصلة للموضوع في موقعك أو في منتدى يمكنك استخدام الوصلة التالية .

الشفرة :
<a href="http://qatardr.net/class/961" rel="bookmark" > التحكم بشفافية عناصر الصفحة بواسطة CSS</a>

اضغطCtrl-C أو Apple-C  للنسخ

الوصلة ستظهر كالتالي :
التحكم بشفافية عناصر الصفحة بواسطة CSS

هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]

التحكم في شفافية العناصر Transparency مثل الصناديق أو النصوص …الخ . يفتح لك باب جديد من الإبداع في التصميم . يمكنك التحكم في شفافية العناصر بواسطة Css بشكل كامل دون الحاجة لموارد إضافية مثل جافا سكريبت . للأسف فكل متصفح يتعامل مع شفافية العناصر بشكل مختلف و بالتالي عند تحديد الشفافية يجب إدراج أمر خاص لكل متصفح .

لنفترض أن في صفحتنا صندوق محتوى أعطيناه ID معرّف Transbox و حددنا كيف نريد شكله مثلا لونه و حدوده وحجم النص في داخلة ..الخ . و الآن نيد إعطائه قدرا من الشفافية لإظهار ما تحته ..

[css]

#transbox {

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

[/css]

لو افترضنا أن قوة اللون أو صلابته كانت 100% فنحن حددنا نصف شفافية استخدمنا القيمة 50 لمتصفح و القيمة نصف 0.5 لمتصفحات أخرى .

و الآن لنتعرف على أهمية كل أمر :

• filter:alpha(opacity=50) : هذا الأمر لمتصفح انترنت أكسبلورر IE 5.5 و أعلى و هو الوحيد الذي يتعامل مع القيم على شكل عشرات أقل قيمة صفر و أكبر قيمة 100 .كما يمكن استخدام الخاصية filter لتطبيق تأثيرات كثيرة مثلا التدرجات اللونية .. الظلال.. التموية ..الخ .
• moz-opacity:0.5 : المتصفحات القديمة من Mozilla مثل النت سكيب Netscape Navigator و أكبر قيمة هي 1 و أصغر قيمة هي صفر و القيم ما بين واحد و صفر تكون على هيئة عشرية مثلا في حالتنا 0.5 .
• khtml-opacity: 0.5 : هذا للمتصفحات القديمة جدا مثل النسخة الأولى من سفاري النسخة الأولى و أنا في الغالب لا استخدم هذا الأمر كون معظم هذه المتصفحات القديمة لم تدعم العربية و بالتالي لا فائدة منها على أي حال .و أكبر قيمة هي 1 و أصغر قيمة هي صفر و القيم ما بين واحد و صفر تكون على هيئة عشرية مثلا في حالتنا 0.5 .
• opacity: 0.5 : هذا هو الأمر الأكثر أهمية من القائمة السابقة . و هو المدعوم من قبل المتصفحات القياسية مثل فايرفوكس و سفاري و أوبرا (Css3) . و أكبر قيمة هي 1 و أصغر قيمة هي صفر و القيم ما بين واحد و صفر تكون على هيئة عشرية مثلا في حالتنا 0.5 .

مشاكل و حلول

المشكلة الأولى

عناصر الأبناء Child سترث صفات الأب ..:) فمثلا في صندوقنا السابق الصندوق هو الأب و النص عنصر ابن و بالتالي عندما يكون الصندوق شفاف سيكون للنص نفس الدرجة من الشفافية . لا توجد حلول فعالة 100% لكن يمكنك القيام بأحد التالي :

• إنشاء خصائص خاصة للنص داخل الصندوق و إعطاءه شفافية 100% و هذا الحل لن يعمل إلا على انترنت اكسبلورر و في حال كان التص يحمل خاصية position: relative و كان الصندوق لا يحمل خاصية position بقيمة relative أو absolute ( ليست عملية سهلة ).
• ينصح الخبراء إذا كان صندوقك الشفاف يحتوي على نص إلا تزيد درجة الشفافية عن 0.8 (80 ) ليكون النص مقروء .

المشكلة الثانية

أن ملف أو شفرة الcss الخاصة بك لن تمر بنجاح من اختبار المعايير القياسية لدى منطمة W3C لو استخدمت كل الأوامر الأربعة الاختبار لن يقبل إلا الأمر opacity .و هذا للحريصين على إبقاء صفحاتهم بدون أخطاء مهم و لكن هذا يعتمد على نظرتك و مدى اهميته و قد لا يشكل هذا مشكلة للكثيرين .

• اضيف  في 25 مايو 2008
• التعليقات : [ 2 تعليقات ]
• الزوار : [ 1,053 قارئ ]
• هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]