Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

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

Post Pic

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

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

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

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


#transbox {

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

لو افترضنا أن قوة اللون أو صلابته كانت 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 .و هذا للحريصين على إبقاء صفحاتهم بدون أخطاء مهم و لكن هذا يعتمد على نظرتك و مدى اهميته و قد لا يشكل هذا مشكلة للكثيرين .

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , ,

تعليقات الزوار (3)

[+] أضف تعليقك من فضلك



  1. Aldirazi™ كتب:

    شكرا لكم على الموضوع القيم

    سوف استفيد منه في اعمالي

    شكرا لك


  2. شكرا لمرروك الكريم ووفقك الله في أعمالك .


  3. fahad كتب:

    السلام عليكم

    لو سمحت يالغالي .,

    كيف اعملها على استايل منتدى .,

    هل يوجد كود مخصص للاستايل او نفس الكود

    لاني استخدمت الكود في خصايص css الاضافيه بس ما صار شي

    ويعطيك العافيه على الدرس .