50+ تقنيات CSS3 رهيبة لتصاميم أفضل
اكتسب CSS3 زخما ، على الرغم من حقيقة أن المعيار لم يتم حتى الانتهاء منه.
هناك المئات من الدروس التعليمية لتعليم المصممين كيفية استخدامها ، لكن لسوء الحظ ، فإن الكثير منها يغطي نفس الأرضية.
وتعلم بعض البرامج التعليمية المصممين أن يقوموا بأشياء قد لا يفكرون بها على أنها مفيدة ، على الرغم من أنه يمكن عادةً تكييف التقنيات لتتناسب مع المشروع بشكل مثالي.
أدناه أكثر من خمسين درسًا رائعًا عن CSS3. العديد منها يعتمد على CSS و HTML بشكل صارم ، بينما يحتوي البعض الآخر على جافا سكريبت.
إذا كان لديك تقنية مفضلة أو برنامج تعليمي لم يتم تضمينه أدناه ، فالرجاء مشاركته في التعليقات!
استخدام CSS3 ل Imageless التوضيح
تسمح الطرق الجديدة المختلفة في CSS3 بإنشاء عدد من الرسومات المعقدة باستخدام CSS الخالص وبدون صور. وهنا بعض من أفضل الأمثلة هناك.
Pure CSS iPhone Illustration
مزيج من الحدود ، يحول وتدرجات لجعل صورة متحركة من اي فون.
خلق شعار متصفح الأوبرا في CSS3
رسم توضيحي نظيف لشعار أوبرا تم تقديمه باستخدام تقنيات CSS3.
نظامنا الشمسي مع CSS3
عرض رائع المظهر للنظام الشمسي مع تأثيرات الحركة.
التناظرية على مدار الساعة تأثير
إنشاء ساعة تناظرية باردة باستخدام CSS3 فقط و jquery.
تجارب الظل
يوضح هذا البرنامج التعليمي كيفية استخدام ظلال CSS لإنشاء مجموعة متنوعة من التأثيرات ، بما في ذلك رسم الجانب المظلم من القمر ، والجدول الدوري المظلل ، وحتى "جرعة الحب" المخدر.
خلق صور بولارويد ستايل مع مجرد المغلق
يستخدم هذا البرنامج التعليمي كل من تأثيرات CSS2 و CSS3 لإضافة تصميم Polaroid إلى قائمة بسيطة من الصور.
CSS3 النص والتأثيرات واللون
يمكن استخدام CSS3 للكثير من الرسوم المتحركة والرسومات المتميزة ، ولكنه أيضًا رائع للتخطيط والنص وتأثيرات الألوان التي ربما تكون قد تلجأ إليها سابقًا إلى Photoshop.
Utilitzing CSS3 Columns
ترميز وحدة CSS3 نظيفة متعددة الأعمدة.
General CSS3 Implemenation
نظرة عامة على فوائد CSS3.
روابط التصميم مع CSS3
أربع طرق مختلفة لأسلوب أنواع مختلفة من الروابط مع CSS3
CSS3 عمودي الأكورديون
تجعل التدرجات والانتقالات قائمة الأكورديون هذه تتدهور إلى قائمة مرتبة في المتصفحات القديمة.
سوبر المرعب أزرار CSS3
أزرار ملونة متدرجة ذات ظل منسدل تعمل على خلفيات فاتحة أو داكنة ولا تتطلب صورًا!
أزرار نمط فوتوشوب مع CSS3
مقارنة جنبا إلى جنب من كيفية إنشاء أزرار CSS3 بدون صور ومع Photoshop.
Css Gradient Text Effect
تعليمات حول تأثير النص الفريد من خلال تطبيق خريطة نسيج على النص. يمكنك استخدام التدرجات أو الأنماط لتكوين نص ثابت بالفعل.
بعض بدائل CSS3 إلى تأثيرات جافا سكريبت
7 طرق لاستبدال تأثيرات JavaScript الشائعة الاستخدام مع CSS3 لجعل موقعك جاهزًا للمستقبل.
تنقش تأثير النص CSS3
إنشاء تأثير نص مزخرف بدون اختراق متصفح Photoshop.
فهم قيم ألوان CSS3
كل شيء عن خيارات الألوان الجديدة المتاحة مع CSS3.
خلق تأثيرات غنية مع CSS3
يمكن دمج تحويلات CSS والتحويلات لإنشاء مجموعة متنوعة من التأثيرات.
جعل تأثير CSS3 Bokeh
القدرة على استخدام التدرجات والشفافية مع CSS3 يجعل هذا التأثير الكلاسيكي ممكن.
أعمدة CSS3
فيديو تعليمي جيد حول مفهوم استخدام أعمدة CSS3 للتخطيط.
القوائم الفاخرة مع CSS3
نمط قائمة ذات تعداد نقطي بارد باستخدام CSS3 لإنشاء علامات اختيار رائعة.
بقعة جدا Imageless Infoboxes مع CSS3
تجعل التقنيات التي تم إجراؤها بواسطة CSS3 هذه الصناديق منبثقة.
اشاعات
يجعل نصف قطر الحدود وتحويل العناصر الزائفة هذه الأشكال ممكنة.
تأثيرات انتقال صورة نمط فلاش
طريقة ذكية لاستخدام تأثير الرسوم المتحركة CSS.
إعادة إنشاء شاشة التحديث في Tumblr باستخدام CSS3
تأثير تصميم CSS3 يتحلل بشكل جيد بالنسبة للمتصفحات القديمة.
طبعت CSS3 الخفية التي كنت أقسم كان في برنامج فوتوشوب
سيوضح لك هذا الفيديو التعليمي الذي مدته 13 دقيقة كيفية إنشاء تأثير طباعة ثلاثي الأبعاد رائع ودقيق تمامًا مع CSS3.
دوران النص مع المغلق
في ما يلي أسلوب أقدم قليلاً يُظهر كيفية إنشاء نص متوافق مع المتصفحات المتداولة للتوافق مع محور عمودي.
إنشاء تأثير Letterpress مع CSS Text-Shadow
سيوضح لك هذا البرنامج التعليمي Line25 كيفية استخدام ظلال النص لإنشاء تأثير بنمط letterpress على نص موقع الويب الخاص بك.
معرض CSS3 المبسط الرائع مع jQuery
ينشئ هذا الرمز معرض صور على طراز Polaroid مع خيار مشاركة السحب والإفلات.
تراكبات رائعة
يوضح هذا البرنامج التعليمي من Zurb كيفية إنشاء تراكبات الصور باستخدام خصائص حدود CSS3 والتي يمكن استخدامها بعد ذلك لعرض معلومات إضافية حول صورة عند التمرير فوقها.
تسميات نموذج مضمن رائع
يوضح لك هذا البرنامج التعليمي كيفية إنشاء تسميات نموذج مضمنة لا تختفي بمجرد بدء الزوار في الكتابة.
تأثيرات CSS3 3D
الرسوم المتحركة CSS3 مكعب
مكعب ثلاثي الأبعاد متحرك فريد باستخدام تحويلات ثلاثية الأبعاد تم تصميمها باستخدام CSS. يمكن تدوير المكعب باستخدام مفاتيح الأسهم لإظهار المعلومات المعروضة على كل وجه.
CSS3 3D Ribbons
امنح بعض العمق لتصميمك باستخدام أشرطة CD3 المضغوطة سهلة الاستخدام.
الرسوم المتحركة 3D ملصق Scroller
عرض ملصقات الأفلام مع تسمية توضيحية باستخدام تأثير منظور ثلاثي الأبعاد مذهل في CSS3.
3D CSS3 Coke Can
سحب شريط التمرير يجعل هذا الكوك الافتراضي يمكن أن يتدحرج ذهابا وإيابا.
الظلال CSS
ظلال تصميم خلاق عن طريق فصلهم عن العنصر.
الرسوم المتحركة CSS3
ترجمة متحركة من الحوت فشل التغريد مع CSS3
مستخدم أنيق للغاية من CSS3 يتدهور بشكل مثير للدهشة بعض الشيء في المتصفحات القديمة.
Parallax Starfield الخلفية
تنتقل النجوم من اليسار إلى اليمين خلف المحتوى الخاص بك من خلال مظهر السفر الكلاسيكي هذا.
عرض وإخفاء المحتوى باستخدام CSS3
توسيع والتعاقد الصواني والأشجار القائمة دون javascript.
علامة التبويب Floating اتبع مع CSS3
وضع الملاحة الخاصة بك أو رموز الاتصال في متناول اليد مع هذه الطريقة المفيدة.
CSS3 Drop-in Modal Windows
زوجان من النوافذ الشائعة التي تم إنشاؤها باستخدام تأثيرات CSS3 وتحولات.
المغازل باستخدام CSS3 فقط
إنشاء تحميل الرسوم المتحركة باستخدام CSS3 فقط ولا متحركة متحركة!
عرض الرموز الاجتماعية باستخدام CSS3
تأثير تلاشي رائع لعرض الرموز الاجتماعية باستخدام CSS3 خالص.
الرسوم المتحركة CSS3 الرسوم المتحركة
إنشاء الرسوم المتحركة على غرار الفلاش بأكمله باستخدام CSS3 فقط و jquery.
رسم متحرك باستخدام CSS3
الجبال والغيوم والمياه كلها متحركة مع CSS3.
لطيفة الرسوم المتحركة التمرير التسمية التوضيحية للصورة
تتيح لك عمليات نقل CSS3 القيام ببعض الأشياء المدهشة مع التعليقات النصية. هنا مثال واحد.
قائمة المصغرات المرنة
سلسلة من الصور التي يتم توسيعها وسحبها عند المرور فوقها.
مكدسة ، بطاقات الفهرس الديناميكي
تأثير رائع للرسوم المتحركة يمكن تطبيقه على عدد من التصميمات.
ساعة ملونة مع CSS و jQuery
يوضح هذا البرنامج التعليمي كيفية إنشاء ساعة ملونة رائعة حقًا باستخدام CSS و jQuery ، وتتألف من ثلاث دوائر منفصلة على نمط التحميل تعرض الساعات والدقائق والثواني.
Pure CSS3 At-At Walker
هذا مثال رائع يستخدم CSS3 (بدون جافا سكريبت ، بلا فلاش) لإنشاء رسوم متحركة At-At Walker من Star Wars. الجانب السلبي الوحيد هو أنه قابل للعرض حاليًا فقط في متصفحات Webkit (Safari و Chrome).
قم بإنشاء jQuery Content Slider باستخدام Pure CSS
تعلم كيفية إنشاء شريط تمرير CSS jQuery بحت مع هذا البرنامج التعليمي.
قائمة منسدلة CSS3
يوضح هذا البرنامج التعليمي من WebDesignerWall كيفية إنشاء قائمة منسدلة متوافقة مع CSS3 المتقاطعة والتي تعمل أيضًا في المتصفحات التي لا تدعم CSS3 (على الرغم من التصميم المحدود).
مكتوبة حصرا ل WDD من قبل كاميرون تشابمان .
إذا كنت تعرف برامج تعليمية أخرى ذات جودة عالية من CSS3 لم يتم تغطيتها أعلاه وتريد المشاركة فيها ، فالرجاء القيام بذلك في التعليقات!