10 قصاصات CSS لإنشاء رسوم بيانية شريطية بسيطة

هل تبحث عن طريقة لإنشاء رسوم بيانية شريطية بسيطة لـ CSS على الويب؟ من المؤكد أن هذه المجموعة ستساعدك لأنها مليئة بالمخططات الشريطية المجانية مفتوحة المصدر كلها مصممة في CSS.

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

1. مخططات البيانات

ستجد في هذه المجموعة بعض المخططات التي تم تصميمها بشكل جميل وتنفيذها بشكل جيد للغاية. ركز المطور Kris Olszewski في الغالب على UX لهذه الرسوم البيانية الشريطية جنبًا إلى جنب مع الجزء العلوي من كل شريط يشارك البيانات الأولية (أرقام العناصر النائبة في هذه الحالة).

بطبيعة الحال ، كل شيء يعمل على CSS ، وهو أمر مثير للإعجاب بالتأكيد. يتميز بقوالب للأشرطة الرأسية والأفقية والأشرطة المتدرجة حيث يمكنك تغيير لون الخلفية بناءً على قيم معينة.

من السهل العثور على أحد الأشياء المفضلة لدي لأنه يوفر الكثير من التنوع للمطورين لالتقاطه وتخصيصه.

2. بوكيمون بار الرسم البياني

لا يمكنني القول أن هذا التصميم سيكون مفيدًا بشكل خاص في تخطيط العالم الحقيقي ولكنه بالتأكيد مثير للإعجاب.

تقدم هذه الأشرطة المصممة على طراز Pokemon تصميمًا بيانيًا إبداعيًا للويب. يعتمد كل شريط على نظام ألوان معين جنبًا إلى جنب مع عناصر متجهة لعيون البوكيمون الفردي.

يتميز كل واحد بتأثير حركة التمرير ، بحيث يمكنك حتى إعادة تصميمه ليلائم أي انتقالات تريدها. وإذا كنت تريد تغيير هذه المخلوقات إلى حيوانات أخرى ، فيمكنك اتباع نفس القالب بألوان متغيرة.

3. رسم متحرك

تستخدم الرسوم البيانية الشريطية لعرض البيانات المرئية لسهولة الاستهلاك. هذا يعني أنه يجب تضمين العناصر المرئية والبيانات الأولية.

هذا شيء أحبه حقًا في هذا الرسم البياني باستخدام تسميات النسبة المئوية على طول الجزء العلوي من كل شريط. لا تحتوي على وسيلة إيضاح أو أي تسميات X / Y ، ولكن لن يكون من الصعب إضافتها.

أعتقد أن الجزء الأكثر إثارة للإعجاب هو كيفية تشغيل كل شيء عبر CSS. تظهر الرسوم المتحركة والنسبة المئوية للنص بسبب خصائص CSS. اشياء مجنونة!

4. مخطط الحد الأدنى

البساطة وسهولة الاستخدام هي أفضل وصف للجنون البسيط الذي يجتاح الويب. غالبًا ما يكون الحد الأدنى هو الخيار الأفضل لمواقع الويب المتجاوبة أو التخطيطات الأبسط التي لا تتطلب أنظمة ألوان كثيفة.

وباستخدام هذا المخطط الشريطي ، يمكنك إعادة ترتيب البيانات لتناسب أي لون فاتح تريده.

يستخدم صفوف خلفية عشوائية للإشارة إلى القياسات ، ويمكنك حتى إضافة تسميات على المحور ص لتوضيح البيانات.

5. أشرطة ألوان CSS نقية

تضيف تدرجات CSS الكثير إلى الويب وهذا الرسم البياني الشريطي هو مجرد مثال آخر للتدرجات في العمل.

يستخدم كل شريط تدرجات الويب 2.0 الكلاسيكية التي يمكن أن تشعر بأنها قديمة بعض الشيء ولكنها تبدو رائعة. يعمل التصميم بالكامل على كود Sass ويستخدم المتغيرات لضبط تأخير الرسوم المتحركة وأحجام الشريط وإجمالي ارتفاع الرسم البياني.

لتحرير الألوان ، ستحتاج إلى العمل من خلال Sass / SCSS أو استخدام CodePen للترجمة إلى CSS خام. لكنه ليس رسمًا بيانيًا شديد التعقيد ، لذا لا ينبغي أن يكون هناك الكثير من المتاعب.

6. قضبان أفقية متداخلة

الرسوم المتحركة الخطية هي بعض من المفضلة لأنها تجذب الانتباه بسرعة. سترى في هذا القلم مثالاً للرسوم المتحركة الخطية مع تحميل كل شريط واحدًا تلو الآخر.

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

أحد الرسوم البيانية الشريطية الأنظف التي رأيتها ويمكن أن تعمل بشكل رائع على أي موقع ويب خاص بالمحفظة القائمة على المهارات.

7. رسم بياني شريطي متجاوب

يجب أن يكون كل موقع ويب حديث بالفعل مستجيبًا لاستيعاب جميع الأجهزة. لكن بعض العناصر أصعب من غيرها في الاستجابة.

علامات التبويب والجداول الكبيرة والرسوم البيانية كلها أمثلة معقدة. يقوم هذا الرسم البياني سريع الاستجابة بعمل ممتاز في التعامل مع الشاشات الأصغر حجمًا. لا يعيد ترتيب ما يتجاوز الحجم الإجمالي والمسافة بين القضبان.

على الشاشات الأصغر ، يمكن أن تشعر عناصر الشريط بأنها ضيقة ويكاد يكون من المستحيل قراءتها. ولكن بالنسبة للجزء الأكبر ، فإن هذا الأسلوب المتجاوب رائع وبديل مثالي للرسوم البيانية الثابتة.

8. الرسم البياني CSS اليومي

يحب المطورون اختبار مهاراتهم مع تحديات مثل Daily CSS. يسحب هذا صورًا لتصميمات واجهة المستخدم كل يوم ويطلب من المطورين إعادة إنشائها في HTML / CSS.

ستجد الكثير منها في CodePen ، وهذا الرسم البياني هو أحد الأمثلة الأصلية.

إنه مصمم بالبساطة وتأثيرات الرسوم المتحركة النظيفة المرفقة بكل شريط. ناهيك عن أنه يتبع نظام ألوان أحادي اللون يمكن أن يتكيف بسهولة مع أي موقع ويب.

9. مخطط Vinventory

مثال آخر رائع لـ Daily CSS هو مخطط جرد الكروم هذا الذي تم إنشاؤه باستخدام CSS وبعض مهارات HTML المبتكرة.

إنها فكرة فريدة جدًا وأكثر إثارة للإعجاب أنها تعمل فقط من خلال CSS. أنا معجب جدًا بالتصميم الفعلي للرسم البياني وكيف يتم عرضه بشكل مثالي في المتصفح.

من المؤكد أن هذا أيضًا لن يعمل على معظم مواقع الويب ، ولكنه شهادة على ما هو ممكن في CSS الحديثة.

10. مهارات CSS الأفقية فقط

ستجد الكثير من الرسوم البيانية الشريطية لقياس المهارات على الإنترنت ، لكن هذا الرسم البياني من Jed Trow هو متعة حقيقية.

إنه مصمم ليكون سريع الاستجابة تمامًا ، ويعمل بشكل لا تشوبه شائبة على أي شاشة. يمكنك تغيير حجم هذا الرسم البياني الشريطي إلى 320 بكسل للهواتف الذكية ، وسيظل ثابتًا.

بالإضافة إلى ذلك ، يتضمن هذا القلم قسمًا تعليميًا صغيرًا أسفل العرض التوضيحي حيث يمكنك رؤية جميع التعليمات البرمجية المصدر وكيفية عملها. بالطبع ، يمكنك أيضًا النسخ / اللصق من IDE الخاص بـ CodePen ، ولكن من الجيد أن ترى مطورًا يكسر عمليته.

تقدم كل هذه الرسوم البيانية شيئًا فريدًا ولكنها تشترك أيضًا في شيء واحد: الاستخدام المذهل لرمز CSS الخالص.

قد يعجبك أيضًا: 10 مكتبات مخططات بيانات جافا سكريبت مفتوحة المصدر تستحق الدراسة.