css3 في ترقية قادمة بقوة في عالم التصميم ما زالت تحتاج لبعض الوقت لدعمها بشكل كامل و متساوي على جميع المتصفحات لكن هذا لا يمنع الاستمتاع ببعض ما هو متوفر منها حاليا .
افكار كانت معقدة اصبحت بسيطة بواسطة Css3
قبل البدء بعرض هذه الأفكار يجب أن نتذكر أن دعم css3 في المتصفحات مازال محدود و متفاوت . لذلك لا تستخدمها حاليا كجزء أساسي في التصميم مثلا أنا استخدم الفكرة الأولى على عدد من العناصر في الصفحة لكنك لو كنت من مستخدمي انترنت اكسبلورر فأنك للأسف لن تشاهد هذه التأثيرات لكنك لن تحس بفرق شاسع أو تواجه صعوبة في الأستخدام لذلك و قبل استخدام أي فكرة راجع الملاحظة في آخر الفكرة و التي يوضح مدى دعم كل فكرة في عدد من المتصفحات حتى كتابة هذا الموضوع مع الأخذ في الأعتبار أن هذا قد يتغير مع ظهور نسخ جديدة ( هناك وصلة أسفل كل فكرة للتأكد ) كما يمكنك الاطلاع على جدول بكل ما يقدمه css3 و مدى دعمه . كما انك لن تكون متوافق مع معايير w3c ( لكن من يهتم 
)
أولا : الأطراف الدائرية
في الماضي كانت هناك عدد من الطرق و الأفكار منها استخدام الصور و ال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, وندوز)
غير مدعوم في : انترنت اكسبلورر و اوبرا
غير مدعوم في : انترنت اكسبلورر و اوبرا
ثانيا :الظلال( للعناصر و الصناديق)
في السابق كانت هناك عدة طرق أيضا منها إضافة صورة تحت العنصر أو الصندوق أو استخدام صورة كخلفية للقيام بذلك . بواسطة css 3 الفكرة بسيطة .
لو طبقنا على المثال السابق box
#box{
-webkit-box-shadow: 10px 10px 5px #888;
}
القيمة الأولى هي مكان الظل بالنسبة للمحور السيني x و الثانية بالنسبة للمحور الصادي y و القيمة الثالثة درجة التشتيت blur و آخر قيمة هي اللون .
مدعوم في : سفاري 3.2.1 على وندوز .
غير مدعوم : فايرفوكس و انترنت اكسبلورر و متصفح جوجل و اوبرا و نسخ سفاري تحت ٣ .
ثالثا : ظلال للنصوص
في 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;
}
رابعا : استخدام خطوطك الخاصة
نحن نعرف ان الخط الذي نستخدمه في التصميم يعتمد على وجوده لدى المستخدم و لو لم يكن متوفر في جهاز المستخدم سيظهر له خط بديل .لكن يمكننا الآن حل هذه المشكلة بواسطة 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 .
غير مدعوم في : فايرفروكس ٣و متصفح جوجل و أوبرا
غير مدعوم في : فايرفروكس ٣و متصفح جوجل و أوبرا
خامسا : استخدام أكثر من صورة في الخلفية
سابقا كنت تستطيع استخدام صورة واحدة في الخلفية بهذا الشكل
#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 و الشفافية
ما قدمته 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.
غير مدعوم : انترنت اكسبلورر و اوبرا .
غير مدعوم : انترنت اكسبلورر و اوبرا .
بقلم : فاطمة العمادي
أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .
تابعنا على
التصنيفات:
- التصوير الضوئي
- المدون الضيف
- النشر و محركات البحث
- بحثتم عن ؟
- برامج و أنظمة
- عام
- متجهيvector
- وردبريس
- وصلات و مواقع
المدونة برعاية
![Happy National Day.. Qatar [1]](http://farm8.static.flickr.com/7018/6521087103_dd47d6ff67_s.jpg)
مبدعه أختي فاطمة يعطيك ربي ألف عافية
Wow , It’s really great
this is make it easy for sure
thank you
بالفعل CSS3 تساعد كثيراً في تسهيل أفكار التصميم بدلاً من استخدام الصور و الأساليب المعقدة , و أتمنى أن يظهر الدعم في كل المتصفحات و خاصة الانترنت اكسبلورر .
لي فقط ملاحظة بسيطة و هي أن text-shadow مدعومة حالياً في Firefox 3.5 .
شكراً على النصائح
سلطان – و سيم :
شكرا لمروركما الكريم
Hisham : شكرا لك بالفعل text-shadow مدعومة و قد صلحت ذلك كما و اضفت وصلة للتأكد من الدعم .. كان يجب ان اعرف فانا من مستخدمي فايرفوكس
.
شكرا لك و جزاك الله كل خير
جزاك الله كل خير سيدتي على هذا الموضوع المفيد.
نتمنى من مطوري المتصفحات مواكبة مطوري css
موضوع جميل
لكن للأسف اذا لم تصبح مدعومة بشكل كلي في كل المتصفحات فهي لا تعتبر ميزات جديدة ….
ابدااااع ونتمنى انت تصبح كل المتصفحات تدعم الاصدار الثالث من css3 شكرا ً جزيلا ً اختنا الكريمة على الشرح والتوضيح
مقال ممتاز و عما قريب ستدعمه جميع المتصفحات ان شاء الله
و لكن المشكلة فى المتصفحات القديمة
فنحن نصمم الموقع على اساس متصفحات الزوار و ليس متصفحاتنا و ليس كل المستخدمين بنفس الدرجة من الوعى بتجديد برامجهم و تطبيقاتهم و هذه مشكلة كبيرة فى نظرى
http://www.sa7afa.net
أزهار قلبي : مطوري المتصفحات سيواكب نتمنى من مستخدمي المتصفحات التطور وعدم الاستمرار في استخدام المتصفحات القديمة .
لون : لا اتوقع ان يتم دعم كل الأفكار بشكل كامل لكني اعتقد انها بعض سيتم دعمه بشكل اسرع من الأخرى
عبدالله : شكرا جزيلا لك و انا اتمنى ذلك أيضا .
حسام : نعم مشكلة المتصفحات القديمة و خاصة عدوي اللدود ie6 و لكن اغلب من يحافط على المتصفحات القديمة هي المؤسسات الكبرى التي تستصعب التطوير و تفصل البقاء في الجانب الآمن .
شرح كافي ووافي
بصراحة زرت العديد من المواقع الأجنبية ولم ابسط وأسهل لشرح الخصائص الجديدة وهناك معرض لمواقع html5 أنصح بمشاهدة أمثلة حية منها.
http://html5gallery.com/
متشوق لاستخدامها لكن أن أجد المزيد من الدعم وخاصة انترنت اكسبلورر.
شكرا لك على الشرح الجميل والبسيط
من الظاهر بأن اكثر المتصفحات التي لا تدعم css3 هي قوقل جرومي وانترنت اكسبلورر .
الحل المؤقت انا كنت تريد استخدام هذه الخصائص هو استخدام IF IE8 ..
الصراحة شىء رائع ومميز ومريح جدا جدا جدا لنا بس تبقى مشكلة المتصفحات
جت علي فترة استخدمت الأوابر الجديد 10 وللأسف بعض المواقع العربية لا يدعمها بشكل كامل ولا أدري لما هذه المشكلة في متصفح مميز كهذا وايضا مشكلة عظيمة فيه وهو دعم اللغة العربية كتابة مع انو الإصدار جديد جدا وفيه مميزات رائع إلا تجد فيه هذه المشكلات المبدئية !!
<< خرجنا عن مسار الموضوع
أحسن ما أجده في تقنيه الـ CSS3 هو تعدد الخلفيات و الحواف الدائرية الصراحة شىء مريح جدا لنا ورائع وايضا لا ننسى الشفافية والظلال كل شىء رااائع
لاكن دام ان عملائنا ما زالو يستخدمون الإصدارات القديمة من الإكسبلور فللأسف لن نستفيد منها !!
كم هى جميلة هذه التدوينة و لكن بالنسبة لـ الأطراف الدائرية
أعتقد إنها غير مدعومة حتى الأن في جوجل كروم بشكل كامل ..
عطاء متواصل ,
يعطيكي ربي الف عافية اختي فاطمة , تدوينة موفقة
يعطيكي العافية على المقال انا قريت و تعرفت قبل كده على CSS3
و لكن ما ننس انو ما زال هناك نقص في دعم المتصفحات لها بالاضافة انو ما زال النسبة الاكبر من الناس يستخجموا متصفحات قديمة مثل Internet Explorer 6
مشاء الله تبارك الله شرح أكثر من رائع
واصلي ابداعك
ماشاء الله
والله ماقصرتي يعطيك العافية
ما شاء الله
انا بقمه الاستمتاع وانا بقرأ المقال ده
واستفدت منه كتير
جزاكم الله خيرا
جميل .. استفدت منه كثيرا ..
الـ css3 الآن بنسخة رسمية ومدعومة بشكل كبير جدا ..
شكرا على المقال ..
رائع جدا ، شكرا لكِ
جميل جداً بس لو كان بعضها يدعم كل المتصفحات كان بيكون اكثر حلو
جزاك الله ألف خير
معلومات قيمة …. نور الله دربك
gooooooooooood
معلومات رائعة وننتظر دعمها في جميع المتصفحات
شكرا اختي..
شكراً لك على جهودك في كتابة الموضوع
بالطبع شيئ رائع كما أن هناك الكثير من الميزات الأخرى الأكثر من رأئعة..
السؤال المهم متى سيتم دعم هذه الميزات في جميع المتصفحات لنتمكن من استخدامها دون الخوف من عدم ظهورها على جميع المتصفحات.
ومتى ستقتنع مايكروسوفت بأن متصفح IE فاشل بكل ما تعنيه الكلمة من معنى..
اشكرك مرة اخرى على الموضوع ..
وها نحن ننتظر
في امان الله..
مقال رائع
استفدتُ منه كثيرا
لا حرمت أجر طرح الفائدة عزيزتي
جزاك الله خيرا
أصبحت الآن معظم المتصفحات تدعم css3
هل يمكن استغلال خاصية إدارج الخطوط التي لا توجد عند الزائر في صفحات الويب للخطوط العربية الخاصة
كخطوط القرآن الكريم ، مثل خطوط مصحف المدينة الذي نشر باسم ” مصحف الناشر الحاسوبي” http://www.qurancomplex.org/MaterialCMS/viewSection.asp?matId=134&id=135&l=arb&matLang=arb&SecOrder=15&SubSecOrder=2¬Menu=true
أو خط النسخ والمدرجات : http://fonts.qurancomplex.gov.sa/
لأن مشكلة خطوط مصحف القرآن أنها تظهر بحروف غير مفهومة وطلاسم عند المتصفح الذي ليس لديه تلك الخطوط في جهازه.
وهذا أمر لا يليق بكلام الله تعالى