دليل المبتدئين إلى CSS3
منذ الإعلان في عام 2005 ، تمت متابعة تطوير المستوى 3 من ورقة الأنماط Cascading أو المعروفة باسم CSS3 عن كثب والمراقبة من قبل العديد من المصممين والمطورين. كلنا متحمسون للحصول على أيدينا على الميزات الجديدة لـ CSS3 - الظلال النصية ، والحدود مع الصور ، والتعتيم ، والخلفيات المتعددة ، إلخ ، على سبيل المثال لا الحصر.
اعتبارًا من اليوم ، لم يتم دعم جميع محددات CSS3 بشكل كامل حتى الآن. ولكن هذا لا يعني أنه لا يمكننا الحصول على بعض المتعة في اختبار عناصر CSS3 جديدة. هذا المنشور مخصص لجميع المصممين والمطورين الذين لديهم دراية بالفعل بـ CSS 2.1 ويريدون وضع أيديكم على CSS3.0.
إنها مجموعة من قراءات CSS3 المفيدة ، ونماذج الرموز ، والنصائح ، والبرامج التعليمية ، وأوراق الغش وأكثر من ذلك. لا تتردد في استخدامها في المشاريع الخاصة بك ، فقط تأكد من أنها تقع بأمان على المتصفحات غير المتوافقة.
الشروع في العمل مع CSS3
مقدمة في CSS3
مقدمة (خارطة الطريق) مقدمة إلى CSS و CSS3. يمنحك هذا المستند فكرة شاملة عن تطوير CSS3.
CSS3: انتقل بالتصميم إلى المستوى التالي
مزايا CSS3 ، مع شرح وأمثلة لخصائص CSS3 ومحددات.
العديد من الحيل مع CSS3
يجلبك Webmonkey عبر العديد من الحيل الأساسية في CSS3 ، بما في ذلك الحدود المدورة والحدود والظلال المسقطة وحيل الصور والمزيد.
مقابلة: ستة أسئلة مع إريك ماير على CSS3
أجرى 6 أشخاص في Six Revision مقابلات مع إريك ماير مع رؤى وإجابات قيمة على CSS3.
CSS3: التحسين التدريجي
كيف يمكنك استخدام تقنيات تحسين رشيقة (أو تقدمية) للاستفادة من ميزات CSS3 في المتصفحات التي تدعمها ، مع التأكد من أن الكود الخاص بك سيظل يوفر تجربة مستخدم مرضية في المتصفحات القديمة التي لا تدعم هذه الميزات حتى الآن.
CSS3: الخلفية والحدود
حدود مدورة (الحدود بين نصف القطر)
دليل لإنشاء حدود مدورة مع CSS3 الحدود بين دائرة نصف قطرها خاصية.
تقريب الحدود مع الصورة (صور الحدود)
كيفية استخدام الصور في الحدود مع الحدود بين صورة خاصية.
حدود CSS3 والخلفيات والمربعات
شرح تفصيلي مع أمثلة على خصائص CSS3 الجديدة مثل: خلفية كليب, خلفية الأصل, مرفق الخلفية, مربع الظل, مربع زينة كسر, الحدود بين دائرة نصف قطرها و الحدود بين صورة.
CSS3: النص
تأثير الحروف
إنشاء تأثير الحروف بسيط مع CSS3.
ستة آثار النص باستخدام الظل النص
تشمل تأثيرات النص: خمر / الرجعية ، النيون ، أقحم ، النقش ، لعبة النار واللوحة.
الطباعة الجميلة
كيفية أخذ العلامات الأساسية وتحويلها إلى تصميم مطبعي جذاب وجميل من خلال CSS3 النقي.
تناوب النص
يستخدم نقش الصورة ورش CSS للحصول على الأشياء في موضعها الصحيح.
نص المخطط التفصيلي
كيفية إضافة مخطط تفصيلي أو حد إلى النص الخاص بك باستخدام CSS3 النص السكتة الدماغية خاصية.
تأثير إخفاء النص
تأثير قناع النص التفاعلي باستخدام نص الظل خاصية CSS.
ربط nudging (الرسوم المتحركة) مع CSS3
خندق جافاسكريبت وخلق تأثير دفع بالكامل مع CSS3.
CSS اختيار التصميم
تغيير التصميم اختيار النص مع CSS3.
CSS3: القائمة
محتوى الأعمدة المتعددة
استخدام CSS3 لإنشاء مجموعة من الأعمدة على موقع الويب الخاص بك دون الحاجة إلى تعيين طبقات فردية و (أو) فقرات لكل عمود.
تلميحات الأدوات مثير مع CSS فقط
يمكن لكيفية استخدام معيار CSS المتطور أن يعزز بعض تلميحات الأدوات المتقاطعة الرائعة.
المزيد من تلميحات الأدوات:
- تلميح CSS3 النقي
- تلميحات الأدوات مع CSS3.
القائمة المنسدلة
كيفية إنشاء Apple.com على حد سواء القائمة المنسدلة متعددة المستويات باستخدام الحدود بين دائرة نصف قطرها, مربع الظل, و نص الظل.
CSS3 فقط كلفه منطقة
انقر فوق علامة تبويب ، وقم بإخفاء جميع اللوحات ، وأظهر اللوحة المتوافقة مع علامة التبويب التي تم النقر عليها للتو - كل ذلك باستخدام CSS.
شرائط ثلاثية الأبعاد مع CSS3
قم بإنشاء شرائط ثلاثية الأبعاد لطيفة المظهر باستخدام CSS3 فقط.
CSS3: إسقاط الظل
إسقاط الظل في الصورة
اعرض العديد من التقنيات وبعض المظاهر المحتملة لإسقاط الظلال دون استخدام الصور.
علامات الوهج مع صندوق الظل
كيفية إنشاء علامات التبويب بديهية وجميلة في CSS3 مع عدم وجود صورة.
CSS3: الأزرار
البرنامج التعليمي: أزرار جميلة
كيفية إنشاء أزرار CSS3 المتوافقة مع المستعرض الجميلة التي تتحلل بأمان.
اشاعات
أشكال مختلفة من تأثير فقاعة الكلام التي تم إنشاؤها باستخدام CSS 2.1 وتم تحسينها باستخدام CSS3.
جيثب الأزرار على حد سواء
مجموعة من الأزرار التي تعرض ما هو ممكن باستخدام CSS3 مع الحفاظ على أبسط العلامات الممكنة.
الغزل ، يتلاشى الأيقونات مع CSS3 و MooTools
كيفية استخدام CSS3 و MooTools لإنشاء عناصر ثنائية التناوب.
تراكب الصور
تطبيق عملي لخاصية صورة الحدود CSS3.
أكثر من
- CSS3 + Mootools. مثال للتجربة في mootools. هذا يضيف خصائص CSS3 إلى إطار عمل MooTools الأساسي.
- انفجار الشعار مع CSS3 و MooTools أو مسج. التقط صورة ثابتة وجعلها تأثيرًا متحركًا ينفجر على الماوس.
- قوة HTML 5 و CSS 3. يكتسب HTML 5 و CSS 3 شعبية بسرعة ، الصحافة القابلة للتلف هنا لشرح كيف ولماذا.
- أشعة الغزل مع CSS3 الرسوم المتحركة ومثال جافا سكريبت. تأثير غزل راي بسيط ودقيق في الجزء الخلفي من الصورة.
- CSS3 بولارويد معرض الصور. كيفية بناء مجموعة رائعة من صور بولارويد مع تصميم CSS خالص.
- HTML 5 و CSS 3: التقنيات التي ستستخدمها قريبًا. تجول حول إنشاء مدونة من الألف إلى الياء باستخدام HTML5 و CSS3.
الإحتيالات والمراجع
ورقة الغش CSS3 (PDF)
cheatsheet للطباعة مع قائمة كاملة من جميع الخصائص ، وأنواع محدد ويسمح القيم في مواصفات CSS3 الحالية من W3C.
دعم CSS في Opera 9.5
قائمة كاملة من محددات CSS المدعومة في Opera 0.5.
الخطوط المتوفرة لـ @ font-face Embedding
قائمة شاملة من الخطوط المرخصة حاليًا @ الخط وجه تضمين.
محددات CSS 3 - موضحة
دليل والإشارة إلى محددات CSS3 وأنماطه.
عبر متصفح CSS3 مولد المولد
قواعد CSS3 يمكنك نسخها ولصقها في ورقة أنماطك الخاصة.
CSS3 انقر فوق المخطط
احصل على أنماط CSS3 مثل تغيير حجم المربع ونصف قطر الحدود وظل النص والمزيد بنقرة واحدة.
CSS محتوى وتوافق المتصفح
قائمة كاملة من الجداول المحددة لكل من CSS و CSS3 مع إعلان للتحقق من توافق المتصفح.
