Hide this notice

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

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

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

Post Pic

افكار كانت معقدة اصبحت بسيطة بواسطة Css3

css3 في ترقية قادمة بقوة في عالم التصميم ما زالت تحتاج لبعض الوقت لدعمها بشكل كامل و متساوي على جميع المتصفحات لكن هذا لا يمنع الاستمتاع ببعض ما هو متوفر منها حاليا .

قبل البدء بعرض هذه الأفكار يجب أن نتذكر أن دعم css3  في المتصفحات مازال محدود و متفاوت . لذلك لا تستخدمها حاليا كجزء أساسي في التصميم مثلا أنا استخدم الفكرة الأولى على عدد من العناصر في الصفحة لكنك لو كنت من مستخدمي انترنت اكسبلورر فأنك للأسف لن تشاهد هذه التأثيرات لكنك لن تحس بفرق شاسع أو تواجه صعوبة في الأستخدام لذلك و قبل استخدام أي فكرة راجع الملاحظة  في آخر الفكرة  و التي  يوضح مدى دعم كل فكرة في عدد من المتصفحات حتى كتابة هذا الموضوع مع الأخذ في الأعتبار أن هذا  قد يتغير مع ظهور نسخ جديدة ( هناك وصلة أسفل كل فكرة للتأكد ) كما يمكنك الاطلاع على جدول بكل ما يقدمه css3 و مدى دعمه .  كما انك لن تكون متوافق مع معايير w3c ( لكن من يهتم :) )

أولا : الأطراف الدائرية

idea01

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

لو كان لدينا المعرف box


<div id="box">

المحتوى هنا

</div>

سيكون الcss بالشكل التالي


#box {

border-radius: 15px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}

القيمة ١٥ هي مستوى الانحناء في الزاوية

كما يمكننا الحصول على استدارة لزوايا معينة و ترك زوايا أخرى حادة


#box{

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

}

مدعوم في : فايرفوكس 3.5 , متصفح جوجل (1.0.154.36),سفاري (3.2.1, وندوز)
غير مدعوم في : انترنت اكسبلورر و اوبرا

تأكد من الدعم

ثانيا :الظلال( للعناصر و الصناديق)

idea01

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

لو طبقنا على المثال السابق box


#box{

-webkit-box-shadow: 10px 10px 5px #888;

}

القيمة الأولى هي مكان الظل بالنسبة للمحور السيني x و الثانية بالنسبة للمحور الصادي y و القيمة الثالثة درجة التشتيت blur و آخر قيمة هي اللون .

مدعوم في : سفاري   3.2.1 على وندوز .

غير مدعوم : فايرفوكس و انترنت اكسبلورر و متصفح جوجل و اوبرا و نسخ سفاري تحت ٣ .

تأكد من الدعم

ثالثا : ظلال للنصوص

idea03

في css3 وجدت الخاصية text-shadow لإعطاء النص ظلال لو كان لدينا عنوان من نوع h2 و نريد إعطاء العناوين من هذا النوع ظلال يمكن القيام بذلك بواسطة


h2 {

color: red;

text-shadow: 2px 2px 2px black;

}

كما يمكنك استخدام أكثر من ظل بأكثر من لون للنص الواحد


h2 {

text-shadow: red 4px 4px 2px,

yellow -4px -4px 2px,

green -4px 4px 2px;

}

مدعوم في :  سفاري ٣ و أكثر  و اوبرا 9.5  و فايرفوكس 3.1

غير مدعوم : متصفح جوجل .

تأكد من الدعم

رابعا : استخدام خطوطك الخاصة

idea04

نحن نعرف ان الخط الذي نستخدمه في التصميم يعتمد على وجوده لدى المستخدم و لو لم يكن متوفر في جهاز المستخدم  سيظهر له خط بديل .لكن يمكننا الآن حل هذه المشكلة بواسطة css3 يمكنك إدراج الخطوط التي تريد لاستخدامها مع مراعاة حقوق الملكية للخطوط و إن كان يمكنك استخدامها على الشبكة .

علينا اولا تعريف declare الخطوط التي نريد استخدامها بواسطة @font-face


@font-face {

font-family: fontname;

src: url(‘fontfile.ttf’);

}

حيث علينا استبدال fontname باسم نخصصة للخط . و استبدال   fontfile   باسم ملف الخط .

و الآن لدينا خط جديد يمكننا استخدامه اسميناه fontname


body {

font-family : fontname ;

font-size:0.9em

}

مدعوم في :فايرفوكس 3.5 ,سفاري 3.2.1 و انترنت اكسيلورر ٧ و٨ و لكن باستخدام خطوط .eot .
غير مدعوم في : فايرفروكس ٣و متصفح جوجل و أوبرا

تأكد من الدعم

خامسا : استخدام أكثر من صورة في الخلفية

idea05

سابقا كنت تستطيع استخدام صورة واحدة في الخلفية بهذا الشكل


#box {

background:url('images.gif') repeat center top ;

}

مع css 3 يمكنك القيام بأمور اكثر تعقيدا


#box {

background: url(example.png) top right no-repeat,

url(example2.png) bottom right no-repeat,

url(example3.png) center center repeat-y;

}

مدعوم في : اوبرا 9.6 و سفاري 3.2.1
غير مدعوم في : قايرفوكس و جوجل و انترنت اكسبلورر .

تأكد من الدعم

سادسا : rgba و الشفافية

idea06

ما قدمته png من امكانيات للوصول إلى تصاميم و أفكار ابداعية يمكن الوصول إليه بواسطة rgba. ببساطة rgba يأخذ ٤ قيم اول ٣ قيم تمثل درجات الألوان

  • r= red احمر
  • g =green  أخضر
  • b=blue أزرق
  • أما آخر قيمة فهي تمثل درجة الشفافية لهذا العنصر .

مثال


#box {

background: rgba(200, 100, 100, 0.5);

}

كما يمكنك تحديد اللون بالطريقة المعتادة و استخدام opacity  كمثال


#box {

color: red;

opacity: 0.5;

}

مدعوم في : فايرفوكس ٣ و متصفح جوجل و سفاري 3.2.1.
غير مدعوم : انترنت اكسبلورر و اوبرا .

تأكد من الدعم

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

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

أوسمة : , , , ,

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

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



  1. سلطان العييري كتب:

    مبدعه أختي فاطمة يعطيك ربي ألف عافية


  2. وسيم كتب:

    Wow , It’s really great
    this is make it easy for sure

    thank you


  3. Hisham Sadek كتب:

    بالفعل CSS3 تساعد كثيراً في تسهيل أفكار التصميم بدلاً من استخدام الصور و الأساليب المعقدة , و أتمنى أن يظهر الدعم في كل المتصفحات و خاصة الانترنت اكسبلورر .

    لي فقط ملاحظة بسيطة و هي أن text-shadow مدعومة حالياً في Firefox 3.5 .

    شكراً على النصائح :)


  4. سلطان – و سيم :
    شكرا لمروركما الكريم

    Hisham : شكرا لك بالفعل text-shadow مدعومة و قد صلحت ذلك كما و اضفت وصلة للتأكد من الدعم .. كان يجب ان اعرف فانا من مستخدمي فايرفوكس :) .

    شكرا لك و جزاك الله كل خير


  5. جزاك الله كل خير سيدتي على هذا الموضوع المفيد.

    نتمنى من مطوري المتصفحات مواكبة مطوري css :)


  6. لوّن كتب:

    موضوع جميل

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


  7. abdallh كتب:

    ابدااااع ونتمنى انت تصبح كل المتصفحات تدعم الاصدار الثالث من css3 شكرا ً جزيلا ً اختنا الكريمة على الشرح والتوضيح :)


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

    http://www.sa7afa.net


  9. أزهار قلبي : مطوري المتصفحات سيواكب نتمنى من مستخدمي المتصفحات التطور وعدم الاستمرار في استخدام المتصفحات القديمة .

    لون : لا اتوقع ان يتم دعم كل الأفكار بشكل كامل لكني اعتقد انها بعض سيتم دعمه بشكل اسرع من الأخرى

    عبدالله : شكرا جزيلا لك و انا اتمنى ذلك أيضا .

    حسام : نعم مشكلة المتصفحات القديمة و خاصة عدوي اللدود ie6 و لكن اغلب من يحافط على المتصفحات القديمة هي المؤسسات الكبرى التي تستصعب التطوير و تفصل البقاء في الجانب الآمن .


  10. عبدالرحمن كتب:

    شرح كافي ووافي
    بصراحة زرت العديد من المواقع الأجنبية ولم ابسط وأسهل لشرح الخصائص الجديدة وهناك معرض لمواقع html5 أنصح بمشاهدة أمثلة حية منها.
    http://html5gallery.com/
    متشوق لاستخدامها لكن أن أجد المزيد من الدعم وخاصة انترنت اكسبلورر.


  11. Aldirazi™ كتب:

    شكرا لك على الشرح الجميل والبسيط

    من الظاهر بأن اكثر المتصفحات التي لا تدعم css3 هي قوقل جرومي وانترنت اكسبلورر .

    الحل المؤقت انا كنت تريد استخدام هذه الخصائص هو استخدام IF IE8 ..


  12. الصراحة شىء رائع ومميز ومريح جدا جدا جدا لنا بس تبقى مشكلة المتصفحات
    جت علي فترة استخدمت الأوابر الجديد 10 وللأسف بعض المواقع العربية لا يدعمها بشكل كامل ولا أدري لما هذه المشكلة في متصفح مميز كهذا وايضا مشكلة عظيمة فيه وهو دعم اللغة العربية كتابة مع انو الإصدار جديد جدا وفيه مميزات رائع إلا تجد فيه هذه المشكلات المبدئية !!
    << خرجنا عن مسار الموضوع :D

    أحسن ما أجده في تقنيه الـ CSS3 هو تعدد الخلفيات و الحواف الدائرية الصراحة شىء مريح جدا لنا ورائع وايضا لا ننسى الشفافية والظلال كل شىء رااائع

    لاكن دام ان عملائنا ما زالو يستخدمون الإصدارات القديمة من الإكسبلور فللأسف لن نستفيد منها !! :(


  13. كم هى جميلة هذه التدوينة و لكن بالنسبة لـ الأطراف الدائرية
    أعتقد إنها غير مدعومة حتى الأن في جوجل كروم بشكل كامل ..


  14. عطاء متواصل ,
    يعطيكي ربي الف عافية اختي فاطمة , تدوينة موفقة


  15. Tamer كتب:

    يعطيكي العافية على المقال انا قريت و تعرفت قبل كده على CSS3
    و لكن ما ننس انو ما زال هناك نقص في دعم المتصفحات لها بالاضافة انو ما زال النسبة الاكبر من الناس يستخجموا متصفحات قديمة مثل Internet Explorer 6


  16. mohammed كتب:

    مشاء الله تبارك الله شرح أكثر من رائع
    واصلي ابداعك


  17. ماشاء الله

    والله ماقصرتي يعطيك العافية


  18. ما شاء الله
    انا بقمه الاستمتاع وانا بقرأ المقال ده
    واستفدت منه كتير
    جزاكم الله خيرا


  19. جميل .. استفدت منه كثيرا ..
    الـ css3 الآن بنسخة رسمية ومدعومة بشكل كبير جدا ..

    شكرا على المقال ..


  20. أحمد كتب:

    رائع جدا ، شكرا لكِ


  21. جميل جداً بس لو كان بعضها يدعم كل المتصفحات كان بيكون اكثر حلو


  22. Naif كتب:

    جزاك الله ألف خير

    معلومات قيمة …. نور الله دربك


  23. mohamed كتب:

    gooooooooooood


  24. جبران كتب:

    معلومات رائعة وننتظر دعمها في جميع المتصفحات

    شكرا اختي..


  25. شكراً لك على جهودك في كتابة الموضوع

    بالطبع شيئ رائع كما أن هناك الكثير من الميزات الأخرى الأكثر من رأئعة..

    السؤال المهم متى سيتم دعم هذه الميزات في جميع المتصفحات لنتمكن من استخدامها دون الخوف من عدم ظهورها على جميع المتصفحات.

    ومتى ستقتنع مايكروسوفت بأن متصفح IE فاشل بكل ما تعنيه الكلمة من معنى..

    اشكرك مرة اخرى على الموضوع ..

    وها نحن ننتظر

    في امان الله..


  26. مقال رائع
    استفدتُ منه كثيرا

    لا حرمت أجر طرح الفائدة عزيزتي


  27. جزاك الله خيرا
    أصبحت الآن معظم المتصفحات تدعم css3

    هل يمكن استغلال خاصية إدارج الخطوط التي لا توجد عند الزائر في صفحات الويب للخطوط العربية الخاصة

    كخطوط القرآن الكريم ، مثل خطوط مصحف المدينة الذي نشر باسم ” مصحف الناشر الحاسوبي” http://www.qurancomplex.org/MaterialCMS/viewSection.asp?matId=134&id=135&l=arb&matLang=arb&SecOrder=15&SubSecOrder=2&notMenu=true

    أو خط النسخ والمدرجات : http://fonts.qurancomplex.gov.sa/


    • لأن مشكلة خطوط مصحف القرآن أنها تظهر بحروف غير مفهومة وطلاسم عند المتصفح الذي ليس لديه تلك الخطوط في جهازه.
      وهذا أمر لا يليق بكلام الله تعالى


  28. جزاكِ الله خير اختي والله بعض اكواد كنت ابحث عنها من زمان والحين لقيتها

    جزاكِ الله كل خير

    والله يدخلكِ الجنة