CSS3 بدأ فعلا من الزخم مع العديد من الأوامر الواردة في مشروع CSS3 العمل بدعم من فايرفوكس وسفاري وجوجل كروم. نظن أننا كنا معا وضع بعض من المفضلة لدينا. قبل أن نبدأ CSS3 أوامر محددة تتطلب بناء الجملة المستعرض لهم للعمل.

موزيلا فايرفوكس لأننا بحاجة إلى استخدام - moz - البادئة ، على سبيل المثال :

- moz - الحدود نصف قطرها :

وبالنسبة لرحلات السفاري ، بكت بادئة ، على سبيل المثال :

بكت ، الحدود ، دائرة نصف قطرها :

1. حدود دائرة نصف قطرها

في دائرة نصف قطرها الحدود CSS3 الأمر بإنشاء زوايا منحنية على عنصر. بدلا من استخدام 4 أو أكثر من الصور لخلق زوايا منحنية استخدام الأوامر التالية :

/ * لموزيلا فايرفوكس * /
- moz - الحدود نصف قطرها : 20px ؛

/ * للكروم وسفاري غوغل * /
بكت ، الحدود ، دائرة نصف قطرها : 20px ؛
}

2. مربع الظل

يمكن تطبيق الظل للعناصر باستخدام الظل CSS3 مربع الأوامر. الظل مربع يقبل ثلاث قيم رقمية ، بالإضافة إلى الألوان لتطبيق هذا التأثير. هذه الأرقام هي :

1. المسافة الأفقية من إزاحة الظل -- قيمة إيجابية يعني سوف يلقي بظلاله على اليمين وقيمة سالبة إلى اليسار
2. مسافة إزاحة رأسية الظل -- قيمة إيجابية يعني سيرخي بظلاله أدناه وأعلاه قيمة سالبة
3. كيف ضبابية كنت ترغب في الظل

مع إضافة قيمة لون الظل الكامل :

/ * لموزيلا فايرفوكس * /
- moz - شباك الظل : 5PX 5PX 5PX b6ebf7 # ؛

/ * للكروم وسفاري غوغل * /
بكت - - - مربع الظل : 5PX 5PX 5X b6ebf7 # ؛

3. الشفافية أو RGBA

وقد الشفافية دائما صعبة. متصفحات مختلفة تاريخيا طبقت الشفافية باستخدام أوامر مختلفة. استمرار هذا التناقض عبر متصفح لدينا إضافة خاصية جديدة CSS3 RGBA الخلفية ، ولكن من حيث المبدأ هذا الأمر أكثر منطقية. الأمر يتكون من 4 القيم -- الأولى والثانية والثالثة هي الأحمر ، الأخضر والأزرق القيم (0-255) ، يليه على التوالي من قبل قناة ألفا أو الشفافية (0-1).

للأمر RGBA البادئات مستعرض معين (- moz ، ، بكت) ليست مطلوبة :

{# box3
لون الخلفية : RGBA (110 ، 142 ، 185 ، 0.5) ؛
}

الأمر لون الخلفية تضيف لطيفة الأزرق الرمادي في الخلفية 0.5 أو التعتيم 50 ٪ في المتصفحات التي نفهم الخاصية RGBA CSS3.

للأسف سيقوم Internet Explorer أيضا محاولة لجعل لون الخلفية ولكن الأمر لا يفهم RGBA. لضمان أن يتم أيضا تعيين لون الخلفية في IE مطلوب الإختراق IE فقط. في المثال التالي : يستخدم مشاركة الطفل محدد الزائفة التي Internet Explorer لا نفهم لاستبعاد ذلك.

الجسم : مشاركة الطفل box3 {#
/ * استبعاد جميع المتصفحات IE باستخدام : مشاركة الطفل * /
لون الخلفية : RGBA (110 ، 142 ، 185 ، 0.5) من الأهمية بمكان ؛
}

4. أعمدة

تمت إضافة القدرة على إضافة أعمدة إلى CSS3. بدلا من العناصر العائمة داخل حاويات يمكن أن نحدد عدد الأعمدة والعرض والقاعدة :

/ * لموزيلا فايرفوكس * /
moz - عمود العد : 2 ؛
- moz - العمود الفجوة : 20px ؛
moz - عمود القاعدة : الصلبة 1px # 6e8eb9 ؛

/ * للكروم وسفاري غوغل * /
بكت ، عمود العد : 2 ؛
بكت ، عمود فجوة : 20px ؛
بكت ، عمود القاعدة : الصلبة 1px # 6e8eb9 ؛
}

5. صور الخلفية متعددة

وقد صور خلفية تقييدا ​​دائما عندما يتعلق الأمر CSS يرجع ذلك إلى حقيقة أن تتمكن من تطبيق واحد فقط صورة الخلفية لكل عنصر. ليست هذه هي الحال مع CSS3 الذي يسمح لكل عنصر صور متعددة من قبل ببساطة بفواصل تفصل بينهما.

لوضع الصورة على اليسار واليمين على حد سواء عنصر يمكنك استخدام الأوامر التالية ، مع التصميم قليلا :

الحشو : 0 20px ؛
}

وسوف يكون هذا الأمر سوء يقدمها برنامج Internet Explorer كما أنها لا تقبل الصور الخلفية 2 على عنصر واحد. واستبعاد كل مطلوب الإختراق IE.

علامة اقتباس فقرة {# box5
/ * للحصول على جميع المتصفحات ، مجرد اشارة مفتوحة * /
خلفية : رابط (ص / ط / quotel.gif) 0 0 عدم تكرار ؛
الحشو : 0 20px ؛
}

الجسم : مشاركة الطفل box5 علامة اقتباس فقرة {#
/ * استبعاد جميع المتصفحات IE باستخدام : مشاركة الطفل * /
/ * ثم الصورتين * /
خلفية : رابط (ص / ط / quotel.gif) عدم تكرار 0 0 ، رابط (ص / ط / quoter.gif) عدم تكرار 100 ٪ 0 ؛
}

6. خلفية التدرجات

تدرجات الخلفية CSS3 مرنة للغاية ويمكن استخدامها لخلق أنماط معقدة. في أبسط صورها الانحدار الخطي المغلق يسمح تطبيق التدرج لعنصر من أعلى إلى أسفل ومن اليسار إلى اليمين.

هذا مثال على التدرج في CSS3 موزيلا فايرفوكس تطبق التدرج الضوء الأزرق في الجزء السفلي من مربع بسعر لا يتعدى 20 ٪ من الارتفاع في مربعات '

رحلات السفاري يستخدم نهج أقل بديهية ولكن أكثر مرونة باستخدام قيم وقف اللون. مثال على رمز معين سفاري يلي (لاحظ يتم تضمين الخطية بين قوسين بدلا من الخارج) :

{# box8
خلفية : - بكت - التدرج (خطي ، أسفل اليسار ، أعلى اليسار واللون وقفة (0 # b6ebf7) ، لون توقف (0.20 # FFF)) ؛
}

7. تناوب

CSS3 كما يسمح تناوب العناصر باستخدام الأمر التحويل ، مع خاصية تدوير قبول درجة كمعلمة.

برمجيات <code>box9 {#
- moz - تحويل : تدوير (2deg) ؛
بكت - - تحويل : تدوير (2deg) ؛
} </ رمز>

8. الخطوط العريضة

يتم تضمين Outilines في مواصفات CSS3 ، والسماح كل من الحدود والملامح الأساسية لليتم تطبيقها على عنصر واحد.

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

قدم تحت : ال Css بواسطة محمد