آموزش ساخت تایم‌لاین‌های (Timeline) عمودی و افقی مدرن با CSS

رفیق توسعه‌دهنده! این مقاله قراره یه نقشه راه کامل باشه تا بتونی با CSS، تایم‌لاین‌های عمودی و افقی رو به صورت حرفه‌ای بسازی. اگه دنبال ابزارهای خفن برای طراحی‌های وبت هستی و می‌خوای پروژه‌هات رو جذاب‌تر کنی، یه سر به فروشگاه ابزارهای ما بزن که کلی چیزای باحال اونجا منتظرته!

همچنین اگه تو مسیر کدنویسی سوالی برات پیش اومد، می‌تونی با ما تماس بگیری: 09202232789

🗺️ نقشه راه ساخت تایم‌لاین‌های مدرن با CSS

فهرست مطالب

• 🔹 درک اصول اولیه تایم‌لاین
• 🔹 ساختار HTML پایه
• 🔹 تایم‌لاین عمودی: گام به گام
• 🔹 تایم‌لاین افقی: از صفر تا صد
• 🔹 طراحی رسپانسیو برای همه دستگاه‌ها
• 🔹 اضافه کردن جلوه‌های مدرن و تعاملی
• 🔹 تکنیک‌های پیشرفته و بهینه‌سازی
• 🔹 عیب‌یابی سریع و راه حل‌ها
• 🔹 سوالات متداول (FAQ)

💡 نکته کلیدی: استفاده از ساختار معنایی HTML باعث می‌شه تایم‌لاین شما برای موتورهای جستجو و ابزارهای دسترسی‌پذیری، قابل فهم‌تر باشه. هیچ ضروررتی برای استفاده از <div>های بی‌شمار نیست.

<div class="timeline">
    <ul>
        <li class="timeline-event">
            <div class="event-date">۲۰۲۳</div>
            <div class="event-icon"><i class="fas fa-code"></i></div>
            <div class="event-content">
                <h4>شروع پروژه</h4>
                <p>فاز اول توسعه و جمع‌آوری نیازمندی‌ها آغاز شد.</p>
            </div>
        </li>
        <li class="timeline-event">
            <div class="event-date">۲۰۲۴</div>
            <div class="event-icon"><i class="fas fa-rocket"></i></div>
            <div class="event-content">
                <h4>انتشار اولیه</h4>
                <p>نسخه بتا برای تست و بازخورد کاربران منتشر گردید.</p>
            </div>
        </li>
        <!-- رویدادهای دیگر -->
    </ul>
</div>

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

.timeline ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-event {
    position: relative;
    padding: 20px 0;
    margin-left: 60px; /* برای فاصله از خط عمودی */
    margin-bottom: 30px;
    border-bottom: 1px dashed #eee; /* جداکننده رویدادها */
}

.timeline-event:last-child {
    border-bottom: none;
}

/* خط عمودی اصلی */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px; /* موقعیت خط */
    width: 4px;
    background: linear-gradient(to bottom, #4CAF50, #2196F3); /* گرادیانت برای جلوه مدرن */
    border-radius: 2px;
}

/* نقطه روی خط برای هر رویداد */
.timeline-event::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid #4CAF50; /* رنگ دایره */
    border-radius: 50%;
    left: 13px; /* تنظیم موقعیت دقیق روی خط */
    top: 25px;
    z-index: 1; /* بالاتر از خط اصلی */
}

/* برای محتوا */
.event-date {
    position: absolute;
    left: -100px; /* تاریخ رو در سمت چپ خط قرار می‌دهیم */
    top: 20px;
    width: 80px;
    text-align: right;
    font-weight: 600;
    color: #888;
    font-size: 0.9em;
}

.event-content {
    background-color: #f9f9f9;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-left: 20px; /* فاصله از نقطه */
}

.event-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #3f51b5;
    font-size: 1.2em;
}

.event-content p {
    margin-bottom: 0;
    color: #666;
    line-height: 1.6;
}

/* تغییرات برای مرکز قرار دادن خط */
.timeline::before {
    left: 50%;
    transform: translateX(-50%);
}

.timeline-event {
    margin-left: 0; /* ریست کردن مارجین قبلی */
    width: 50%; /* هر رویداد نیمی از عرض رو بگیره */
    position: relative;
    margin-bottom: 40px;
    padding: 0 25px; /* پدینگ برای فاصله از مرکز */
    box-sizing: border-box; /* پدینگ داخل عرض حساب بشه */
}

/* رویدادهای سمت راست (فرد) */
.timeline-event:nth-child(odd) {
    float: right;
    clear: right;
    text-align: right;
}

.timeline-event:nth-child(odd) .event-date {
    left: auto;
    right: -100px; /* تاریخ رو به راست منتقل می‌کنیم */
    text-align: left;
}

.timeline-event:nth-child(odd) .event-content {
    margin-left: 0;
    margin-right: 20px; /* فاصله از نقطه */
}

.timeline-event:nth-child(odd)::before {
    left: -10px; /* نقطه رو به سمت چپ آیتم منتقل می‌کنیم */
    border-color: #2196F3;
}

/* رویدادهای سمت چپ (زوج) */
.timeline-event:nth-child(even) {
    float: left;
    clear: left;
    text-align: left;
}

.timeline-event:nth-child(even) .event-date {
    left: -100px; /* تاریخ رو به چپ منتقل می‌کنیم */
    right: auto;
    text-align: right;
}

.timeline-event:nth-child(even) .event-content {
    margin-right: 0;
    margin-left: 20px; /* فاصله از نقطه */
}

.timeline-event:nth-child(even)::before {
    left: auto; /* ریست کردن left */
    right: -10px; /* نقطه رو به سمت راست آیتم منتقل می‌کنیم */
    border-color: #FFC107;
}

/* آیکون‌ها در مرکز */
.event-icon {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: #555;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.timeline.horizontal {
    padding: 50px 0;
    overflow-x: auto; /* برای اسکرول افقی در صورت نیاز */
    white-space: nowrap; /* جلوگیری از شکستن خطوط */
    position: relative;
}

.timeline.horizontal ul {
    display: flex;
    justify-content: space-between; /* یا space-around */
    position: relative;
    padding-top: 60px; /* برای محتوای بالای خط */
    padding-bottom: 60px; /* برای محتوای پایین خط */
}

/* خط افقی اصلی */
.timeline.horizontal ul::before {
    content: '';
    position: absolute;
    top: 50px; /* موقعیت خط در مرکز */
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #4CAF50, #2196F3);
    z-index: 0;
}

.timeline.horizontal .timeline-event {
    flex: 1 0 200px; /* حداقل عرض برای هر رویداد */
    margin: 0 10px;
    padding: 0;
    text-align: center;
    border-bottom: none; /* ریست کردن بوردر عمودی */
    position: relative;
    white-space: normal; /* اجازه شکستن خطوط محتوا */
}

/* نقاط روی خط */
.timeline.horizontal .timeline-event::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid #4CAF50;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: 41px; /* موقعیت دقیق روی خط */
    z-index: 1;
}

.timeline.horizontal .event-content {
    margin: 0;
    margin-top: 20px; /* بالای خط */
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.timeline.horizontal .timeline-event:nth-child(even) .event-content {
    margin-top: 0;
    margin-bottom: 20px; /* پایین خط */
}

.timeline.horizontal .timeline-event:nth-child(even)::before {
    top: auto;
    bottom: 41px;
    border-color: #FFC107;
}

نکته: در تایم‌لاین افقی، معمولاً رویدادهای زوج و فرد رو به ترتیب بالا و پایین خط قرار می‌دن تا فضا بهتر مدیریت بشه و تداخل متنی کمتری داشته باشیم.

@media (max-width: 768px) {
    /* تغییر تایم‌لاین افقی به عمودی برای موبایل و تبلت */
    .timeline.horizontal ul {
        flex-direction: column; /* آیتم‌ها زیر هم قرار بگیرن */
        align-items: flex-start; /* آیتم‌ها از چپ شروع بشن */
        padding-top: 0;
        padding-bottom: 0;
    }

    .timeline.horizontal ul::before {
        top: 0;
        bottom: 0;
        left: 20px; /* خط عمودی در سمت چپ */
        height: 100%;
        width: 4px;
        background: linear-gradient(to bottom, #4CAF50, #2196F3);
    }

    .timeline.horizontal .timeline-event {
        width: 100%;
        margin: 0;
        padding: 20px 0;
        margin-left: 60px; /* فاصله از خط عمودی جدید */
        text-align: left;
        border-bottom: 1px dashed #eee;
    }

    .timeline.horizontal .timeline-event:last-child {
        border-bottom: none;
    }

    .timeline.horizontal .timeline-event::before {
        left: 13px; /* نقطه روی خط عمودی */
        top: 25px;
        transform: none;
    }

    .timeline.horizontal .event-content {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 20px; /* فاصله از نقطه */
    }

    .timeline.horizontal .timeline-event:nth-child(even) .event-content {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 20px;
    }

    .timeline.horizontal .timeline-event:nth-child(even)::before {
        top: 25px;
        bottom: auto;
        border-color: #4CAF50; /* رنگ یکپارچه */
    }

    .timeline.horizontal .event-date {
        position: static; /* تاریخ رو به حالت عادی برگردونیم */
        margin-bottom: 5px;
        text-align: left;
        width: auto;
        font-size: 1em;
        font-weight: 700;
        color: #333;
    }
}

.event-content {
    transition: all 0.3s ease-in-out; /* اضافه کردن ترنزیشن برای smooth شدن تغییرات */
    cursor: pointer;
}

.timeline-event:hover .event-content {
    background-color: #e0f2f7; /* رنگ پس‌زمینه جدید */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* سایه عمیق‌تر */
    transform: translateY(-5px); /* کمی به سمت بالا حرکت کنه */
}

.timeline-event:hover::before {
    border-color: #2196F3 !important; /* تغییر رنگ نقطه */
    transform: scale(1.2); /* بزرگتر شدن نقطه */
    transition: all 0.3s ease-in-out;
}

🎨 متغیرهای CSS (CSS Variables) برای مدیریت رنگ‌بندی: با تعریف رنگ‌های اصلی در متغیرها، می‌تونید به راحتی تم رنگی تایم‌لاین رو تغییر بدید.

:root {
    --primary-color: #4CAF50;
    --secondary-color: #2196F3;
    --accent-color: #FFC107;
    --bg-light: #f9f9f9;
    --text-dark: #333;
}
/* حالا میتونی از این متغیرها استفاده کنی: */
/* background-color: var(--bg-light); */
/* border-color: var(--primary-color); */

علت احتمالی:

• position: relative; روی کانتینر اصلی (.timeline) اعمال نشده.
• content: ''; در شبه‌عنصر ::before یا ::after فراموش شده.
• عرض (width) یا ارتفاع (height) شبه‌عنصر صفر هست.
• z-index نامناسب باعث شده زیر عناصر دیگه قرار بگیره.

راه حل:

• مطمئن شو .timeline { position: relative; } اعمال شده.
• برای خط از content: ''; width: 4px; height: 100%; (عمودی) یا width: 100%; height: 4px; (افقی) و برای نقاط از width: 20px; height: 20px; استفاده کن.
• z-index: 1; رو برای نقاط روی خط و z-index: 0; رو برای خط اصلی تنظیم کن.

علت احتمالی:

• margin یا padding ناکافی بین آیتم‌ها.
• float یا position نادرست برای عناصر محتوا.
• برای تایم‌لاین افقی، flex-wrap: nowrap; اعمال نشده یا flex-basis/width آیتم‌ها کم هست.

راه حل:

• با margin-bottom (عمودی) یا margin-left/right (افقی) به آیتم‌ها فضای کافی بده.
• در تایم‌لاین عمودی دو طرفه، مطمئن شو که clear: both; یا overflow: hidden; روی کانتینر تایم‌لاین یا بعد از هر رویداد اعمال شده تا floatها بهم نخورن.
• برای افقی، overflow-x: auto; و white-space: nowrap; رو روی کانتینر اصلی .timeline.horizontal اعمال کن و حداقل عرضی با flex: 0 0 250px; به هر رویداد بده.

علت احتمالی:

• Media Queries به درستی تعریف نشده یا breakpointها مناسب نیستن.
• از واحدهای مطلق (مثل px ثابت) زیاد استفاده شده به جای واحدهای نسبی (%، em، rem، vw).
• viewport meta tag در HTML صفحه وجود نداره.

راه حل:

• تگ <meta name="viewport" content="width=device-width, initial-scale=1.0"> رو به <head> اضافه کن.
• برای تبدیل افقی به عمودی، flex-direction: column; و align-items: flex-start; رو در مدیا کوئری مناسب اعمال کن.
• بیشتر از واحدهای نسبی استفاده کن و مقادیر margin و padding رو در مدیا کوئری‌ها تنظیم کن.