تصميم خط زمني متجاوب باستخدام HTML وCSS

Timeline

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

مقدمة

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

فهم تصميم الخط الزمني

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

أهمية تصميم الخط الزمني

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

أنواع تصميمات الخط الزمني

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

عناصر رئيسية لتصميم خط زمني فعال

الوضوح وسهولة القراءة
الترتيب الزمني المنطقي
التسلسل الهرمي المرئي
التقليلية وتجنب الازدحام
التصميم المتجاوب
الاتساق في التصميم

تطبيقات تصميم الخط الزمني

يمكن استخدام الخطوط الزمنية في مجالات متعددة مثل التعليم، إدارة المشاريع، التسويق، العلامة الشخصية، الرعاية الصحية، وتخطيط الأحداث.

خطوات تصميم خط زمني فعال

تحديد الغرض والجمهور المستهدف
جمع المعلومات وتنظيمها
اختيار التنسيق المناسب
رسم تخطيط مبدئي
التصميم والتخصيص
الاختبار والتحسين

أفضل الممارسات في تصميم الخط الزمني

الابتعاد عن التعقيد
استخدام مقياس زمني متسق
الاستفادة من الألوان للتمييز
إضافة عناصر بصرية مساعدة

ملفات المصدر - تصميم خط زمني متجاوب باستخدام HTML وCSS

كود HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timeline Design using HTML and CSS | Codehal</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>

    <section class="timeline">
        <div class="timeline-row">
            <div class="timeline-column">
                <h2 class="title">Education<span class="animate" style="--i:1;"></span></h2>

                <div class="timeline-box">
                    <div class="timeline-content">
                        <div class="content">
                            <div class="year"><i class='bx bxs-calendar'></i>2021 - 2022</div>
                            <h3>High School Degree</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio voluptate natus consectetur suscipit aspernatur quos obcaecati dolore veniam debitis omnis.</p>
                        </div>
                    </div>

                    <div class="timeline-content">
                        <div class="content">
                            <div class="year"><i class='bx bxs-calendar'></i>2022 - 2023</div>
                            <h3>Bachelor Degree</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio voluptate natus consectetur suscipit
                                aspernatur quos obcaecati dolore veniam debitis omnis.</p>
                        </div>
                    </div>

                    <div class="timeline-content">
                        <div class="content">
                            <div class="year"><i class='bx bxs-calendar'></i>2023 - 2024</div>
                            <h3>Master Degree</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio voluptate natus consectetur suscipit
                                aspernatur quos obcaecati dolore veniam debitis omnis.</p>
                        </div>
                    </div>

                    <span class="animate" style="--i:2;"></span>
                </div>
            </div>

            <div class="timeline-column">
                <h2 class="title">Experience<span class="animate" style="--i:4;"></span></h2>
            
                <div class="timeline-box">
                    <div class="timeline-content">
                        <div class="content">
                            <div class="year"><i class='bx bxs-calendar'></i>2021 - 2022</div>
                            <h3>Frontend Developer</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio voluptate natus consectetur suscipit
                                aspernatur quos obcaecati dolore veniam debitis omnis.</p>
                        </div>
                    </div>
            
                    <div class="timeline-content">
                        <div class="content">
                            <div class="year"><i class='bx bxs-calendar'></i>2022 - 2023</div>
                            <h3>Backend Developer</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio voluptate natus consectetur suscipit
                                aspernatur quos obcaecati dolore veniam debitis omnis.</p>
                        </div>
                    </div>
            
                    <div class="timeline-content">
                        <div class="content">
                            <div class="year"><i class='bx bxs-calendar'></i>2023 - 2024</div>
                            <h3>Full Stack Developer</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio voluptate natus consectetur suscipit
                                aspernatur quos obcaecati dolore veniam debitis omnis.</p>
                        </div>
                    </div>

                    <span class="animate" style="--i:5;"></span>
                </div>
            </div>
        </div>
    </section>

</body>

</html>

كود CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #1f242d;
    color: #ededed;
}

.timeline {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0 9%;
}

.timeline .timeline-row {
    display: flex;
    column-gap: 64px;
    flex-wrap: wrap;
}

.timeline-row .timeline-column {
    flex: 1 1 320px;
}

.timeline-column .title {
    position: relative;
    display: inline-block;
    font-size: 28px;
    margin: 32px 0 16px 30px;
}

.timeline-column .timeline-box {
    position: relative;
    border-left: 2px solid #0ef;
}

.timeline-box .timeline-content {
    position: relative;
    padding-left: 27px;
}

.timeline-box .timeline-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10.5px;
    width: 20px;
    height: 20px;
    background: #0ef;
    border-radius: 50%;
}

.timeline-content .content {
    padding: 24px;
    border: 2px solid #0ef;
    border-radius: 8px;
    margin-bottom: 32px;
}

.timeline-content .content .year {
    font-size: 16px;
    color: #0ef;
}

.timeline-content .content .year i {
    margin-right: 8px;
}

.timeline-content .content h3 {
    font-size: 19px;
    margin: 8px 0;
}

.timeline-content .content p {
    font-size: 16px;
}

.animate {
    position: absolute;
    top: 0;
    right: 0;
    width: 105%;
    height: 100%;
    background: #1f242d;
    animation: show-right 1s ease forwards;
    animation-delay: calc(.5s * var(--i));
}

@keyframes show-right {
    100% {
        width: 0;
    }
}

الخلاصـــــة

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

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

الجدول الزمني.zip 1.84KB

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

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

تصميم خط زمني متجاوب باستخدام HTML وCSS

مقدمة

فهم تصميم الخط الزمني

أهمية تصميم الخط الزمني

أنواع تصميمات الخط الزمني

عناصر رئيسية لتصميم خط زمني فعال

تطبيقات تصميم الخط الزمني

خطوات تصميم خط زمني فعال

أفضل الممارسات في تصميم الخط الزمني

ملفات المصدر - تصميم خط زمني متجاوب باستخدام HTML وCSS

كود HTML

كود CSS

الخلاصـــــة

كيف كان المقال؟

إرسال تعليق

الدردشة عبر واتساب

إرسال طلب

الدليل الشامل للبرومبت (Prompt) ما هو البرومبت التعريف الدقيق؟

كيفية إنشاء كلمة مرور قوية والحفاظ عليها آمنة

دليل شامل لمواقع البرومبتات للذكاء الاصطناعي

مجموعة شاملة لتصاميم العناوين باستخدام CSS

تركيب محرر النصوص البرمجية CodeMirror علي مدونتك