29 مخططًا زمنيًا رائعًا للتصميم في CSS وبقليل من Javascript

انتقل إلى الجدول الزمني

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

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

الجدول الزمني عن طريق التمرير

انتقل إلى الجدول الزمني

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

الجدول الزمني في CSS

خصائص الخط الزمني لـ CSS

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

شريط تمرير المخطط الزمني المستجيب

شريط تمرير المخطط الزمني المستجيب

تم إنشاء هذا المخطط الزمني باستخدام مكتبة Swiper JS لتضمين تعليمات HTML و CSS و JavaScript. لا يحتوي على إمكانية التمرير أثناء تقدمنا ​​عبر صفحة الويب ، ولكنه يفعل ذلك يضع السنوات على الجانب الأيمن وزر يمكننا من خلاله الانتقال إلى الزر التالي ، بصرف النظر عن القدرة على استخدام مؤشر الماوس للانتقال إلى عام محدد. رسوم متحركة رائعة في كل من التحولات.

الجدول الزمني المتقدم

الجدول الزمني المتقدم

يبرز هذا الجدول الزمني لاستخدام HTML و CSS و JavaScript ، بصرف النظر عن اذهب إلى monocolor، على وجه التحديد باللون الأحمر. يتميز أيضًا باستخدام زر يسمح بالتقدم أو العودة في الجدول الزمني الذي يتميز به رمز النتيجة الرائع هذا ليكون بسيطًا تمامًا.

الجدول الزمني مع رأس ثابت و Flexbox

تم إصلاح الجدول الزمني

كود HTML و CSS لرأس ثابت سيبقى ثابتًا في الوقت الذي نقوم فيه بالتمرير في الصفحة. من الدقة الكبيرة أن تكون جدولًا زمنيًا ذا أهمية كبيرة لأي مطور حالي يريد التميز وفقًا لمعايير تصميم الويب الحالية.

الجدول الزمني للمشروع

الجدول الزمني للمشروع

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

الخط الزمني

الخط الزمني

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

Hyperloop

Hyperloop

Hyperloopu هو الجدول الزمني بدلا من ذلك تبرز للتصميم المستخدم ولأنها تمت برمجتها في HTML و CSS. يتميز باستخدام أحجام مختلفة في خط النص بخط عمودي وسلسلة من المربعات التي تحدد كل لحظة مهمة في الخط الزمني.

الجدول الزمني العمودي

الجدول الزمني العمودي

فاصل زمني ان ينأى بنفسه عن البقية بلمسته البصرية. يحتوي على خلفية متدرجة حالية جدًا في التصميم وسلسلة من المربعات التي تحدد كل فترة من هذه الفواصل الزمنية. مبرمج في CSS و HTML.

الجدول الزمني في Flexbox

الخط الزمني flexbox

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

الجدول الزمني في DIV

الخط الزمني div

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

الجدول الزمني في CSS و HTML

الجدول الزمني CSS

يمكنك وضعها صور بحجم 400 × 300 في هذا الجدول الزمني يتميز باللون الأخضر للخطوط ونص التواريخ والأيام. لا تحتوي على رسوم متحركة وتتميز بالأحرى بتصميمها البسيط على جميع المستويات.

الجدول الزمني للتعليقات وردود الفعل

تعليقات الجدول الزمني

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

صباح الجدول الزمني بتنسيق HTML و CSS

جدول زمني مستجيب

جدول زمني مثالي للاستجابة لذلك يتميز بكونه HTML، CSS وتقديم مخطط زمني بسيط إلى حد ما ولكنه شديد التنقل.

واجهة مستخدم المخطط الزمني

الخط الزمني

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

المخطط الزمني في CSS فقط

الجدول الزمني CSS

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

الجدول الزمني المستجيب V3

الجدول الزمني المستجيب V3

أول المخططات الزمنية الأفقية في القائمة بتنسيق HTML و CSS و JavaScript. تبرز بصريا لـ استخدام الألوان السوداء والرمادية لوضع خط أفقي بسلسلة من النقاط. يتم تمييز كل فاصل زمني بوزن أكبر في المصدر وفي محتوى النص.

الخط الزمني متداخل في اللون

متداخلة

أحد المخططات الزمنية الأفقية أعلى جودة بصرية في القائمة. جدول زمني تفاعلي جيدًا مع رسوم متحركة دقيقة للغاية ومقدمة جيدًا لتقديم تجربة مستخدم رائعة في كل مرة يتم فيها الضغط على الفواصل الزمنية. انها مصنوعة من HTML CSS / Sass و JavaScript / TypeScript (jquery.js).

الجدول الزمني لتاريخ الاستجابة

قصة مستجيبة

جدول زمني مثالي لـ تظهر الأحداث المختلفة في الصور فترة زمنية في التاريخ. إنه أفقي وسريع الاستجابة وقد تم تطويره في HTML و CSS و JavaScript.

الجدول الزمني للمجموعة

مجموعة الجدول الزمني

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

أفقي CSS و HTML الجدول الزمني

إنفاتو أفقية

صنع بواسطته المعروف Envato Tuts +، نقدم لنا جدول زمني أفقي مع سلسلة من البطاقات النظيفة والأساسية في التصميم. ألوان مسطحة وخط أفقي بسلسلة من النقاط الحمراء التي تتشابك مع كل فاصل.

Timeline CSS و HTML و slick.js 

الجدول الزمني الباستيل

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

تسلسل المخطط الزمني V1

تسلسل التسلسل الزمني

الجدول الزمني الذي يبرز أزرار على كل خط عمودي من كل فاصل زمني لربط صورة خلفية ملء الشاشة في كل مرة نضغط على واحدة.

الخط الزمني الأفقي HTML CSS

الجدول الزمني للموارد البشرية

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

الجدول الزمني كوديهاوس

الجدول الزمني CodyHouse

هذا الجدول الزمني قدمها كوديهاوس لون واحد في التصميم وتم تطويره في HTML و CSS و JavaScript. يقدم خطًا مبسطًا بسلسلة من النقاط كفواصل زمنية يتم النقر عليها وتسبب الحركة الأفقية لأقل من نصف ثانية. بسيط ولكنه قوي.

الجدول الزمني الأفقي

الجدول الزمني الأفقي

جدول زمني آخر مصنوع في HTML و CSS و JavaScript. تتميز بلون واحد، يحتوي على تصميم أنيق بلون أخضر لوضع الدانتيل على كل نقطة تمثل الفترات الزمنية. في كل مرة نضغط على واحدة ، تبدأ حركة جانبية سلسة للغاية.

مخطط زمني بدون اسم

مخطط زمني بدون اسم

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

الجدول الزمني

الجدول الزمني

يضع هذا الجدول الزمني اللكنة على اللون الأخضر أن تكون ثابتة تمامًا.

جدول زمني أفقي آخر

جدول زمني آخر

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

لا تفوت سلسلة أخرى من القوائم في CSS و HTML.


اترك تعليقك

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها ب *

*

*

  1. المسؤول عن البيانات: ميغيل أنخيل جاتون
  2. الغرض من البيانات: التحكم في الرسائل الاقتحامية ، وإدارة التعليقات.
  3. الشرعية: موافقتك
  4. توصيل البيانات: لن يتم إرسال البيانات إلى أطراف ثالثة إلا بموجب التزام قانوني.
  5. تخزين البيانات: قاعدة البيانات التي تستضيفها شركة Occentus Networks (الاتحاد الأوروبي)
  6. الحقوق: يمكنك في أي وقت تقييد معلوماتك واستعادتها وحذفها.