هناك الكثير الذي يمكنك فعله باستخدام CSS ومتصفح الويب فقط. يحب المطورين الكبار دفع الظرف وإظهار المقدار الممكن.
على الرغم من أن المشاريع التجريبية ليست مفيدة دائمًا في مواقع الإنتاج ، إلا أنها ملهمة وتعليمية بشكل لا يصدق.
لقد قمنا بتنظيم حفنة من مشروعات CSS التي تعرض القوة الحقيقية لـ CSS. يتم استضافتها كلها على CodePen حتى تتمكن من دراسة واستنساخ شفرة المصدر لمعرفة كيفية عملها.
هذه ساس تحميل الصفحة يستخدم تدرجات متحركة وعناصر يمكن تغيير حجمها لإنشاء تأثير تحميل متكرر.
يجب أن يتعرف معظم الأشخاص على حركة التحميل هذه من Facebook والتي تستخدم إصدارًا أصغر من محمل الشاحنة العمودية هذا. ولكن معظم برامج تحميل الويب تستخدم ملفات GIF متحركة نظرًا لأن الصور أكثر توافقًا مع جميع المتصفحات.
يوضح شريط تحميل CSS3 هذا أنه مع بعض التفكير الإبداعي يمكنه إعادة بناء أي نمط رسوم متحركة تريده تقريبًا.
انظر القلم تحميل الحانات بواسطة MaxStalker ( MaxStalker ) على CodePen .
في ما يلي أحد أهم مشاريع CSS التي يمكن العثور عليها عبر الإنترنت. هذه الديناميكية تصميم النظام الشمسي بواسطة مالك Dellidj يعمل على CSS خالص دون أي صور .
يتم تقديم كل كوكب في CSS بما في ذلك سرعات الدوران. يهدف هذا المشروع إلى أن يكون نموذجًا دقيقًا للنظام الشمسي ، كما أنه يتميز بخلفية واقعية بين النجوم للإقلاع.
لا أستطيع تخيل كم من الوقت استغرق هذا فقط لجعل رموز الكوكب ، ناهيك عن الحصول على سرعات الرسوم المتحركة الحق. ولكن عندما تكون هناك إرادة هناك طريقة.
انظر القلم الرسوم المتحركة للنظام الشمسي - Pure CSS بقلـم مالك دليدج ( kowlor ) على CodePen .
لم أفكر أبداً في أنني سأشاهد اليوم الذي يمكن فيه لعب لعبة كاسحة ألغام النوافذ الكلاسيكية باستخدام CSS النقي . بعد ذلك بفضل المطور بالي بال هذا اليوم.
لاحظ أن هذا لا يعمل تمامًا كما هو الحال مع لعبة كاسحة الألغام التقليدية لأنها لا تسجل النتيجة بشكل صحيح. ولكنها تتبع الوقت بدقة ولا تستخدم لعق جافا سكريبت.
على نحو ما تبدو الواجهة على نحو مفاجئ قريبة من واجهة مستخدم Minesweeper الأصلية وكلها تعمل على CSS. في حين أنها قد لا تكون نسخة متماثلة تمامًا ، إلا أنها قريبة بما يكفي لتدفعني إلى لعب بعض الجولات.
انظر القلم نقية CSS كاسحة الألغام من بالي بالو ( bali_balo ) على CodePen .
على السطح هذا التبديل تبديل قد تبدو بسيطة جدا. يتم تشغيله من خلال إدخال مربع الاختيار وتمرير البيانات إلى الواجهة الخلفية ، على الرغم من أن ذلك ليس في الواقع الجزء المثير للإعجاب.
يحتوي هذا التبديل على بعض الميزات التي تجعله أحد أفضل مفاتيح تشغيل / إيقاف الواجهة الأمامية:
بطريقة ما ، يضبط مفتاح التشغيل / إيقاف التشغيل هذا كل نقرة مستخدم ويستخدم هذا الحدث لتحريك منطقة تبديل اليوم / الليل في العرض. تصميمات أيقونة الشمس والقمر هي أيضاً أنيقة بشكل أنيق مع الأخذ في الاعتبار أنها لا تعمل إلا على CSS.
انظر القلم النقي Css "ليلا ونهارا" تبديل بقلم بنيامين ريتوريه ( bnthor ) على CodePen .
تتبع الماوس التقليدي هو عمل JavaScript الذي يقوم بالإبلاغ عن إحداثيات X / Y الخاصة بالمستخدم في الصفحة.
من الناحية الفنية ، ما زلت بحاجة إلى JavaScript لجمع هذه الإحداثيات وفعل أي شيء مفيد بها. لكن هذا المقتطف يوضح أنه يمكنك تصميم ميزة تتبع ماوس CSS خالصة تتبع كل حركة للمستخدم.
لا أفكر حقا في الاستخدام العملي لهذا ولكن يمكن أن يكون ممتعا على موقع مزحة.
انظر القلم تتبع الماوس CSS الخالص التجريبي بواسطة Momcilo Popov ( Momciloo ) على CodePen .
لقد رأينا جميعًا رموزًا ورسومًا إيضاحية مصممة للويب . ولكن ماذا عن الرسوم التوضيحية للناقلات كاملة الصفحات المصممة باستخدام CSS و SVG؟
هذه تصميم متنزه هو مشروع تجريبي يعمل فقط في المتصفحات المدعومة بواسطة SVG. ومع ذلك ، في هذه المتصفحات الحديثة ، يتم عرضه بلا كلل ، وكل عنصر له موضع واقعي للغاية على الصفحة.
من المؤكد أن الرسوم المتحركة مثيرة للإعجاب ولكن دقة عناصر SVG هي التي جذبت انتباهي أيضًا. في غضون بضع سنوات قد نجد هذه الأنواع من الرسوم التوضيحية على الويب تعمل فقط في الكود بدون أي ملفات صور.
انظر القلم Flat design amusement park svg by Lina (animation powered by CSS) فلاديمير جاشينكو ( gxash ) على CodePen .
تصميم رسومات CSS متكررة مثل مفهوم قطاع Möbius هي صعبة جدا. ولكن إضافة بعض العناصر ثلاثية الأبعاد والتدرجات المتفاوتة؟ الآن لديك تحد حقيقي.
هذا المقتطف مثير للإعجاب للغاية بالنظر إلى مدى سلاسة مظهره ورمزه الصغير المستخدم (90 سطرًا فقط من CSS). باستخدام Haml ، تحتاج فقط إلى 6 أسطر من الشفرة لإنشاء المفهوم بأكمله أيضًا.
سأعترف بأن هذا لن يكون مفيدًا للغاية على موقع ويب حقيقي ، ولكنه دليل على مدى ما يمكنك فعله مع بضع عشرات من أسطر HTML و CSS.
انظر القلم Möbius 6hedrons (CSS خالص) بواسطة Ana Tudor ( thebabydino ) على CodePen .
بعد استخدام تطبيق الويب هذا لبضع ثوان ، قد تشعر بالثقة في أنه يعمل على جافا سكريبت. السلوكيات الديناميكية مثل الدوران ثلاثي الأبعاد ووضع التضاريس كلها علامات على webS الحلو.
لكن هذه الخريطة الخالق واجهة المستخدم فينسنت دوراند هو في الواقع 100٪ CSS خالص. يتم تشغيل الأسهم للتناوب ، وتأثير الدوران نفسه ، وجميع ميزات النقر إلى الموقع على CSS.
من الجدير بالذكر كيف يتم تقديم هذا المفهوم بأكمله باستخدام مكعبات ثلاثية الأبعاد أيضًا. الكتل نفسها تعمل كعناصر ثلاثية الأبعاد ويمكنك تدوير المكعبات فقط عن طريق تحوم.
لا شك أن أحد الاستخدامات الأكثر جنونًا لـ CSS التي رأيتها منذ وقت طويل.
انظر القلم كامل خالق خريطة CSS بقلم فنسنت دوراند onediv ) على CodePen .
هذا المشروع هو أقل تفاعلا قليلا ولكن لا يزال مجرد لالتقاط الأنفاس. المطور بيتر Schmiz إعادة كل من الرئيسي رموز تطبيقات iOS 7 باستخدام HTML الخالص و CSS.
لا تستخدم أي من هذه الرموز أي ملفات SVG أو ملفات صور. يتم ترميز كل عنصر في كل رمز إلى HTML مع عنصر span / div ، ثم تصفيفه باستخدام CSS. الجزء الأكثر جنونا هو مدى دقة هذه!
المجموعة الكاملة تضم 22 رمزًا وكلها جميلة. أعجبني كثيرًا الاهتمام بالتفاصيل الخاصة بالرموز مثل الخرائط والطقس. مجرد دليل أكثر أنه مع ما يكفي من الوقت والصبر ، يمكنك تصميم أي شيء في CSS إلى حد كبير.
انظر القلم أيقونات iOS 7 مع CSS النقي بيتر شميز ( peterschmiz ) على CodePen .
إعادة إنشاء الرسوم المتحركة تحميل Slack مع CSS3 مثير للإعجاب بالتأكيد. لكن هذا المقتطف إعادة إنشاء محمل Slack مع عنصر واحد فقط على الصفحة. هذا ما أسميه التفاني.
إجمالي عدد CSS لهذا المقتطف هو أكثر من 100 سطر فقط والتي تتضمن ألوان شعار Slack وتأثيرات الحركة.
لا استطيع ان اقول ما اذا كانت هذه الفكرة ستعمل على أيقونات تحميل تحمل علامات تجارية أخرى ، لكنني بالتأكيد معجب بهذا.
انظر القلم عنصر واحد سلاك لودر بواسطة CrocoDillon ( CrocoDillon ) على CodePen .
ستجد العشرات من تصميمات العارضات ثلاثية الأبعاد المخصصة في CodePen مع كل الرسوم المتحركة الخاصة بهم. لكن هذه القضبان ثلاثية الأبعاد من جانب رافائيل غونزاليز تبرز لجميع الرسوم البيانية شريط CSS الحديثة.
كل من هذه الرسوم البيانية تشغيل في flexbox للحاويات بحيث يتم ضبط حجمها تلقائيًا اعتمادًا على عدد الأشرطة التي تضيفها وكمية الحاوية. بالإضافة إلى أن كل مخطط شريطي يتحرك عندما ينزلق إلى العرض ، وكلها يتم التحكم فيها من خلال CSS خالص.
ونظرًا لأن حجم كل شريط يتم تشغيله في em ، فيمكنك ضبط كل شريط منفرد لقياس الحجم الطبيعي بناءً على أحجام خطوط المتصفح. مثال رائع يبرهن على أن CSS الحديثة أكثر مرونة من أي وقت مضى.
انظر القلم نقية CSS القضبان بواسطة رافائيل غونزاليز ( rgg ) على CodePen .