10 تصميمات شخصية تم إنشاؤها بالكامل باستخدام HTML و CSS
نشرت: 2020-12-06أنا مندهش باستمرار من مقدار ما يمكنك فعله باستخدام CSS. يعرف مطورو الويب أن CSS تتيح لك إنشاء بعض تخطيطات الصفحات الرائعة وتأثيرات الرسوم المتحركة المخصصة.
ولكن يمكنك استخدامه في الكثير من المشاريع الممتعة أيضًا. مثل ، على سبيل المثال ، بناء تصميمات الشخصيات باستخدام CSS فقط. يبدو غريبا أليس كذلك؟
حسنًا ، إنه بالتأكيد كذلك. وقد جمعت بعضًا من أغرب تصميمات الشخصيات (لكنها أروع) ، وكلها مصنوعة من كود HTML و CSS خالص بنسبة 100٪.
1. الطيور الغاضبة
من لا يحب Angry Birds؟ لقد بدأوا كلعبة وحصلوا بطريقة ما على فيلم خاص بهم بعد اختراق ثقافة البوب.
ويثبت هذا القلم من Rachel Bull أن Angry Birds يمكن أن تجد طريقها إلى CSS.
من المفارقات أن هناك صورة واحدة في هذه الصفحة ، ويتم استخدامها لتضمين النوع المخصص في الجزء العلوي. كل عنصر آخر من منحنيات تلك الطيور إلى التدرجات المخصصة تعمل جميعها على CSS خالص.
ربما ليس مقتطف الشفرة الأكثر عملية ولكنه بالتأكيد مصدر إلهام.
2. فرانكشتاين
يُعرف فرانكشتاين لماري شيلي على نطاق واسع بأنه المخلوق ذي البشرة الخضراء الذي تم إحياؤه. على الرغم من أنه وحش فرانكينشتاين تقنيًا ، إلا أن هذا لا ينفجر على لسانه جيدًا.
وعلى الرغم من أن مخلوق فرانكشتاين هذا قد يكون مخطئًا إلى حد ما ، إلا أنه لا يزال أحد أفضل تصميمات الشخصيات التي رأيتها.
إنه يعمل على 40 سطرًا فقط من HTML وقد أضاف المطور Victoria Ninni Bergquist بعض CSS لمساعدة الوحش في الوميض. أنيق جدا!
3. قصة لعبة أجنبي
قصة لعبة Pixar لديها العديد من الشخصيات التي لا تنسى وهؤلاء الرجال الفضائيين الأحمق هم بالتأكيد جزء من هذا الفريق.
صمم Sunyoung Park هذا القلم كعرض توضيحي لـ CSS ولاختبار حدود ترميز الواجهة الأمامية. يجب أن يتم عرضه بشكل صحيح في جميع المتصفحات الرئيسية وحتى بعض المتصفحات القديمة. على الرغم من أنها تعتمد على خاصية rotate () قليلاً.
لحسن الحظ ، يأتي هذا كجزء من ميزة تحويلات CSS التي تدعم المتصفحات التي يعود تاريخها إلى IE9 +. لذلك يمكن لهذا الفضائي الأخضر الصغير أن يسعد معظم العالم المتصل بالإنترنت.
4. أكو أكو
إذا كان لديك PlayStation ، فمن المحتمل أنك تعرف عن Crash Bandicoot. حسنًا ، هذا الرجل المجنون المسمى Aku Aku هو نسخة طبق الأصل من القناع ... مخلوق ... شيء.
كل عنصر له عنصر div الخاص به مع فئة ذات صلة تحدد هذه الميزة (مثل العين وشفة الأنف).
أود أن أقول إن أصعب جزء في هذا التصميم كله هو تاج الريش على رأسه. بالإضافة إلى الرسوم المتحركة الرائعة التي قد تشجع اللاعبين على التقاط ألعاب Crash القديمة.
5. طفل Squirtle
إليك مثال رائع آخر للرسوم المتحركة الممزوجة بتصميم شخصية CSS.
قام جوش بدر بترميز شخصية Squirtle باستخدام CSS خالص و 15 سطرًا فقط من HTML. محرج!
للحصول على تأثير المشي ، قام جوش بإلحاق : بعد فئة زائفة على كل عنصر بحركة متكررة. إنه إنجاز بسيط بشكل مدهش بمجرد النظر تحت غطاء المحرك ، وسيكون الأمر أكثر إثارة للدهشة كيف أن مثل هذا الرمز الصغير مطلوب لبناء شخصيات مثل هذه.
6. ريك بدون مورتي
ستجد في هذا القلم العمل الغريب للمطور James Gilmore الذي صنع ريك تشيبي في CSS خالص.
يستخدم التصميم في الواقع بعض ظلال إسقاط CSS اللطيفة لخلق عمق وإعطاء هذه الشخصية بعض الحياة. ناهيك عن الرسوم المتحركة المتكررة التي تمتزج أيضًا بشكل جيد مع التصميم.
لاحظ أن هذا يعمل أيضًا على Sass وإذا كنت تريد العبث به ، فهناك متغيرات مخصصة في الكود. إنه منسق جيدًا ، لذا سيكون هذا مقتطفًا رائعًا للدراسة لتعلم Sass.
7. بريان جريفين
إليكم تصميم شخصية آخر من تصميم راشيل بول ، هذا التصميم يتميز بعلامة Family Guy's Brian Griffin.
من المدهش مقدار التفاصيل التي يمكنك الحصول عليها باستخدام CSS فقط. يتطابق أسلوب Brian بالكامل بشكل وثيق مع أسلوب العرض الفني ، ويستخدم ظلالًا متدلية تبدو واقعية بشكل لا يصدق.
على الرغم من أن هذا الخط تقني جدًا مع أكثر من 150 سطرًا من CSS ويستخدم مكتبة البوصلة للتمهيد.
8. إيميت
من فيلم Lego ، إنه Emmet بكل مجده. قامت راشيل مرة أخرى ببناء هذا المقتطف من البداية باستخدام CSS و Haml ، الطريقة المبسطة لكتابة HTML الحديث.
تبرز بعض هذه العناصر على أنها مثيرة للإعجاب تمامًا للتشغيل على CSS فقط. والجدير بالذكر أن دوامات الشعر تبدو حقًا مثل قطع Lego البلاستيكية. من الجنون أن هذا ممكن!
هناك الكثير من منطق Sass الرائع في CSS ، وإذا كنت مهووسًا بالتطوير ، فستستمتع بالبحث عن هذا القلم. كل من الكود والنتيجة مجيدة.
9. CSS Eevee
تم بناء CSS Eevee النقي حول ظاهرة Pokemon Go بواسطة David Khourshid.
يستخدم خلفية ونمط صفحة مشابهين للتطبيق أثناء إعادة إنشاء بوكيمون بالكامل في CSS خالص. مع القليل من التركيب وبعض الطبقات الذكية ، جعل ديفيد هذا إيفي يبدو في الواقع ثلاثي الأبعاد!
الرسوم المتحركة هي أيضًا لمسة لطيفة ، وتجعل الأمر برمته أكثر واقعية. سواء كنت من محبي Pokemon أو لم تلمس اللعبة مطلقًا ، عليك أن تعترف بأن هذا عمل جيد.
10. ميكي ماوس
في حين أن رأس ميكي ماوس هذا أبسط قليلاً ، إلا أنه يعد إنجازًا رائعًا. قد تعتقد أنه سيكون من الأسهل إدارته لأنه ثابت ، لكن القلم يدفع أكثر من 450 سطرًا من Sass.
الجزء الأكثر تقنية هو ترتيب جميع الأشكال وإعادة ترتيب العناصر لتتوافق بشكل صحيح فوق بعضها البعض.
ومع ذلك ، فإن النتيجة رائعة ، ويمكنك أن ترى التشابه مع الرسوم الكاريكاتورية المبكرة لميكي.
11. الأميرة زيلدا
لقد قمت بحفظ الأفضل للأخير مع تصميم شخصية Zelda. إنها قصيرة بعض الشيء في الساقين لكن بشكل عام الأسلوب دقيق.
يستخدم المطور Charlie Marcotte تحويلات Sass وتحويلات CSS المخصصة لترتيب كل العناصر. بالإضافة إلى أن HTML الخام تم تبسيطه إلى حد ما بفضل المعالج Pug المسبق.
إذا كنت تحاول دفع حدود معرفتك بـ CSS ، فلماذا لا تأخذ مشروعًا مشابهًا؟ إنها طريقة رائعة لاختبار مهاراتك ، ويمكنك دائمًا مشاركة كل ما تنشئه في التعليقات أدناه.