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

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

۱. ساختار HTML 🧱

• ▪ لیست‌های غیرترتیبی (UL)
• ▪ هر آیتم به عنوان یک رویداد (LI)
• ▪ عناصر داخلی برای تاریخ و محتوا

۲. تایم‌لاین عمودی ⬆️

• ▪ استفاده از `::before` برای خط
• ▪ `position: relative` و `absolute`
• ▪ تراز کردن محتوا در دو طرف

۳. تایم‌لاین افقی ↔️

• ▪ `display: flex` یا `grid`
• ▪ مدیریت سرریز (Overflow)
• ▪ رسپانسیو کردن با Media Queries

۴. مدرن‌سازی و تعامل ✨

• ▪ افکت‌های هاور و انیمیشن
• ▪ استفاده از Font Awesome
• ▪ دسترسی‌پذیری (Accessibility)

فهرست مطالب

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

درک اصول اولیه تایم‌لاین: چرا و چگونه؟

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

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

ساختار HTML پایه برای تایم‌لاین

اساس هر تایم‌لاینی، یه ساختار HTML منطقیه. بهترین راه برای ساختن یه تایم‌لاین، استفاده از لیست‌های غیرترتیبی (<ul>) هست. هر آیتم در این لیست (<li>) یک “رویداد” یا “نقطه زمانی” رو نشون می‌ده. داخل هر <li> می‌تونیم المان‌هایی برای تاریخ، عنوان، توضیحات و حتی آیکون‌ها قرار بدیم.

نمونه ساختار HTML

اینجا یه نمونه از ساختار اولیه HTML رو می‌بینید که برای هر دو نوع تایم‌لاین (عمودی و افقی) قابل استفاده‌ست:

<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>

تایم‌لاین عمودی: گام به گام

تایم‌لاین‌های عمودی رایج‌ترین نوع هستن و برای نمایش اطلاعات به ترتیب زمانی خیلی خوب کار می‌کنن. ایده اصلی اینه که یه خط عمودی در مرکز یا یک طرف داریم و رویدادها در کنار اون خط قرار می‌گیرن. می‌تونیم از شبه‌عنصرهای ::before و ::after در CSS برای ایجاد این خط و نقاط رویداد استفاده کنیم.

CSS پایه برای تایم‌لاین عمودی

بیاید با استایل‌دهی به <ul> و <li> شروع کنیم:

.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;
}

ساخت خط عمودی و نقاط رویداد

حالا وقتشه که خط اصلی و نقاطی که هر رویداد رو نشون می‌دن، اضافه کنیم. این کار با استفاده از ::before و ::after روی .timeline-event انجام می‌شه:

/* خط عمودی اصلی */
.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;
}

برای اینکه تایم‌لاین شلوغ نباشه و خوانایی خوبی داشته باشه، میشه از display: flex روی .timeline-event استفاده کرد و محتوا رو به دو طرف خط منتقل کرد. برای این کار، نیاز به تغییراتی در ساختار HTML و CSS داریم. همچنین، می‌تونی از وب‌سایت ما برای کشف ابزارهای بیشتر طراحی وب استفاده کنی.

تایم‌لاین عمودی دو طرفه (Dual-sided Vertical Timeline)

این طراحی جذاب، رویدادها رو به صورت متناوب در سمت چپ و راست خط عمودی نمایش می‌ده. این کار به بهبود استفاده از فضا و زیبایی کمک می‌کنه.

برای این کار، باید .timeline-event رو به دو دسته زوج و فرد تقسیم کنیم یا کلاس‌های جداگانه‌ای براشون تعریف کنیم. من اینجا از :nth-child(even) و :nth-child(odd) استفاده می‌کنم.

/* تغییرات برای مرکز قرار دادن خط */
.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);
}

با این تغییرات، خط عمودی به مرکز می‌ره و رویدادها به صورت متناوب در دو طرف قرار می‌گیرن. برای آیکون‌ها، می‌تونی از Font Awesome استفاده کنی. فراموش نکن که لینک CDN اون رو به <head> اضافه کنی: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">.

تایم‌لاین افقی: از صفر تا صد

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

ساختار با Flexbox

بهترین ابزار برای ساخت تایم‌لاین افقی، Flexbox هست. با استفاده از display: flex روی کانتینر <ul>، می‌تونیم آیتم‌ها رو در کنار هم قرار بدیم:

.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 Queries انجام می‌شه:

@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;
}

استفاده از آیکون‌ها و رنگ‌بندی

آیکون‌ها و رنگ‌های مناسب می‌تونن به تایم‌لاین شما روح ببخشن. با Font Awesome می‌تونید هزاران آیکون مختلف رو به راحتی اضافه کنید و با استفاده از متغیرهای CSS، مدیریت رنگ‌ها رو آسون‌تر کنید.

: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); */

تکنیک‌های پیشرفته و بهینه‌سازی

وقتی اصول اولیه رو یاد گرفتیم، می‌تونیم با چند تکنیک پیشرفته‌تر، تایم‌لاین رو بهینه‌سازی کنیم و قابلیت‌های جدیدی بهش اضافه کنیم.

استفاده از CSS Grid برای چیدمان‌های پیچیده‌تر

در حالی که Flexbox برای تایم‌لاین‌های خطی عالیه، CSS Grid برای چیدمان‌های دو بعدی و پیچیده‌تر، قدرت بیشتری داره. مثلاً می‌تونی یک تایم‌لاین با چندین خط موازی یا با بخش‌های نامنظم بسازی.

بهبود دسترسی‌پذیری (Accessibility)

برای اینکه تایم‌لاین شما برای همه کاربران (از جمله کسانی که از ابزارهای کمکی استفاده می‌کنن) قابل فهم باشه، باید به دسترسی‌پذیری توجه کنی:

• از تگ‌های معنایی (<ul>، <li>، <h4>) استفاده کن.
• مطمئن شو که کنتراست رنگی بین متن و پس‌زمینه به اندازه کافی واظح هست.
• برای آیکون‌ها از aria-hidden="true" استفاده کن اگه فقط جنبه تزئینی دارن، و اگه اطلاعات مهمی دارن، متن جایگزین (alt یا aria-label) اضافه کن.
• برای تایم‌لاین‌های افقی که اسکرول می‌خورن، از راهنماهای ناوبری (مثلاً دکمه‌های چپ و راست) برای کاربران صفحه‌خوان استفاده کن.

عیب‌یابی سریع و راه حل‌ها

تو مسیر ساخت تایم‌لاین، ممکنه به مشکلاتی بربخوری. اینجا به چند مورد رایج و راه حلشون اشاره می‌کنم:

۱. خط عمودی/افقی نمایش داده نمی‌شه یا ناقصه

۲. محتوای رویدادها همپوشانی دارن یا بهم ریخته‌ست

۳. رسپانسیو بودن مشکل داره

سوالات متداول (FAQ)

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

نمایش خط زمانی یا همان تایم‌لاین (Timeline)، یکی از جذاب‌ترین و تاثیرگذارترین روش‌ها برای ارائه داستان برند، مراحل اجرای پروژه، تاریخچه یک رویداد یا نقشه راه محصول است. وقتی کاربر وارد سایت شما می‌شود، خواندن یک متن طولانی درباره روند رشد شرکت می‌تواند خسته‌کننده باشد؛ اما یک تایم‌لاین بصری و پویا، توجه او را فوراً جلب کرده و اطلاعات را در کمترین زمان ممکن منتقل می‌کند.

در گذشته، طراحان وب برای ساخت چنین المان‌هایی به سراغ کتابخانه‌های سنگین جاوااسکریپت یا افزونه‌های پیچیده می‌رفتند. اما امروز با پیشرفت موتورهای رندرینگ مرورگرها، شما می‌توانید با یادگیری اصول پایه‌ای و پیشرفته، زیباترین تایم‌لاین‌ها را صرفاً با استفاده از HTML و CSS پیاده‌سازی کنید. در این مقاله جامع، قدم‌به‌قدم با هم یاد می‌گیریم چطور دو مدل تایم‌لاین عمودی و افقی کاملاً مدرن، واکنش‌گرا (Responsive) و سبک بسازیم.

۱. مفاهیم پایه و ساختار اصلی HTML برای تایم‌لاین

برای این که خروجی کار ما استاندارد، خوانا برای موتورهای جستجو (SEO-friendly) و از نظر دسترسی‌پذیری (Accessibility) بی‌نقص باشد، باید از تگ‌های معنایی یا Semantic در HTML استفاده کنیم. ساختار کلی ما معمولاً از یک کانتینر اصلی تشکیل می‌شود که چندین آیتم زمانی را درون خود جای می‌دهد.

قبل از شروع کدنویسی استایل‌ها، بهتر است نگاهی به پایه ساختار سند بیندازیم. اگر مایل هستید تسلط بیشتری روی تگ‌های پایه پیدا کنید، می‌توانید سری به بخش آموزش‌ها و کدهای HTML بزنید تا با بهینه‌ترین متدهای پیاده‌سازی سندهای وب آشنا شوید.

یک ساختار استاندارد HTML برای تایم‌لاین به شکل زیر تعریف می‌شود:

<div class="timeline-container">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-date">خرداد ۱۴۰۲</div>
    <div class="timeline-content">
      <h3>راه‌اندازی فاز اول پروژه</h3>
      <p>در این مرحله زیرساخت‌های اصلی سیستم طراحی و مستقر شدند.</p>
    </div>
  </div>
  <!-- سایر آیتم‌ها در این بخش تکرار می‌شوند -->
</div>

در این ساختار، کلاس timeline-container نقش نگه‌دارنده و هماهنگ‌کننده کل خط زمانی را دارد. کلاس timeline-dot مسئولیت نمایش نقاط اتصال (گره‌ها) و کلاس timeline-content وظیفه نگهداری باکس‌های متنی را بر عهده دارند. این تفکیک وظایف به ما اجازه می‌دهد تا به‌راحتی با ویرایش CSS، ظاهر کل سیستم را تغییر دهیم.

۲. آموزش ساخت تایم‌لاین عمودی (Vertical Timeline) مدرن

تایم‌لاین عمودی رایج‌ترین نوع طراحی در وب‌سایت‌های امروزی است. این الگو به کاربر اجازه می‌دهد با اسکرول کردن به سمت پایین، به ترتیب زمانی اطلاعات را مطالعه کند. ما در اینجا یک مدل دوطرفه (آیتم‌های چپ و راست متناوب) می‌سازیم که در نمایشگرهای کوچک به صورت کاملاً خودکار به یک تایم‌لاین تک‌ستونه بهینه تبدیل می‌شود.

برای شروع، کدهای CSS زیر را برای طراحی و موقعیت‌دهی عناصر به کار می‌بریم. توجه داشته باشید که استفتده هوشمندانه از ویژگی‌های position: relative و position: absolute کلید اصلی تنظیم خط مرکزی و نقاط اتصال است:

/* استایل کانتینر اصلی تایم‌لاین */
.v-timeline {
  position: relative;
  max-width: 1000px;
  margin: 50px auto;
  padding: 10px 0;
  direction: rtl;
}

/* خط عمودی مرکزی */
.v-timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #0056b3;
  top: 0;
  bottom: 0;
  right: 50%;
  margin-right: -2px;
  border-radius: 2px;
}

/* استایل هر بلاک زمانی */
.v-item {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  box-sizing: border-box;
}

/* آیتم‌های سمت راست */
.v-item.right {
  right: 0;
}

/* آیتم‌های سمت چپ */
.v-item.left {
  right: 50%;
}

/* حباب یا باکس محتوا */
.v-content {
  padding: 20px 30px;
  background-color: #ffffff;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  border: 1px solid #eaeaea;
}

/* نقطه گره روی خط مرکزی */
.v-item::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: -8px;
  background-color: #ffffff;
  border: 4px solid #ff5722;
  top: 25px;
  border-radius: 50%;
  z-index: 1;
}

.v-item.right::after {
  right: -8px;
  left: auto;
}

.v-item.left::after {
  left: -8px;
}

برای یادگیری عمیق‌تر متدهای چیدمان مدرن و بهینه‌سازی کدهای استایل، پیشنهاد می‌کنیم مجموعه تکه‌کدهای آماده CSS را مرور کنید که به شما کمک می‌کند استایل‌های سبک‌تر و پویاتری بنویسید.

در قطعه کد بالا، ما خط مرکزی را دقیقاً در موقعیت right: 50% قرار دادیم. آیتم‌های سمت راست و چپ به صورت متقارن تنظیم شده‌اند. در ادامه، کدهای مربوط به رسپانسیو سازی را اضافه می‌کنیم تا در دستگاه‌های موبایل، خط به لبه سمت راست صفحه منتقل شده و تمام باکس‌ها زیر هم نمایش داده شوند:

/* رسپانسیو سازی برای دستگاه‌های موبایل */
@media screen and (max-width: 768px) {
  .v-timeline::after {
    right: 31px;
  }
  
  .v-item {
    width: 100%;
    padding-right: 70px;
    padding-left: 15px;
  }
  
  .v-item.left {
    right: 0;
  }
  
  .v-item::after {
    right: 23px !important;
    left: auto !important;
  }
}

اکنون شما یک ساختار کاملاً واکنش‌گرا دارید. در ابعاد دسکتاپ، المان‌ها یکی در میان در چپ و راست خط وسط مرتب می‌شوند و در ابعاد موبایل، بدون هیچ به‌هم‌ریختگی، به یک چیدمان خطی و عمودیِ تمیز تغییر ساختار می‌دهند.

۳. آموزش ساخت تایم‌لاین افقی (Horizontal Timeline) رسپانسیو

تایم‌لاین‌های افقی برای پروسه‌های کوتاه‌تر، نقشه راه‌های سالانه یا فرآیندهای خرید سه‌مرحله‌ای بی‌نظیر هستند. چالش بزرگ در طراحی تایم‌لاین‌های افقی، محدودیت عرض صفحه نمایش است. برای رفع این چالش، ما از قابلیت اسکرول افقی نرم (Smooth CSS Scroll) استفاده می‌کنیم تا کاربران موبایل نیز به راحتی با کشیدن انگشت خود روی صفحه، مراحل را جابجا کنند.

بیایید ابتدا ساختار استایل افقی را با تکیه بر مدل Flexbox پیاده‌سازی کنیم:

/* کانتینر تایم‌لاین افقی با قابلیت اسکرول */
.h-timeline {
  display: flex;
  overflow-x: auto;
  padding: 40px 20px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  direction: rtl;
}

/* پنهان کردن نوارهای اسکرول خشن برای زیبایی بیشتر */
.h-timeline::-webkit-scrollbar {
  height: 8px;
}
.h-timeline::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

/* آیتم‌های افقی */
.h-item {
  min-width: 280px;
  margin: 0 15px;
  position: relative;
  flex-shrink: 0;
  text-align: center;
}

/* خط افقی رابط بین آیتم‌ها */
.h-item::before {
  content: '';
  position: absolute;
  top: 20px;
  right: -50%;
  width: 100%;
  height: 3px;
  background-color: #e2e8f0;
  z-index: 0;
}

/* حذف خط اضافی برای آیتم اول */
.h-item:first-child::before {
  display: none;
}

/* دایره یا گره بالای هر بخش */
.h-dot {
  width: 20px;
  height: 20px;
  background-color: #0056b3;
  border-radius: 50%;
  margin: 10px auto;
  position: relative;
  z-index: 1;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px #0056b3;
}

یکی از دغدغه‌های توسعه‌دهندگان، افزایش تعامل کاربر با این تایم‌لاین‌ها است. اگر می‌خواهید با اضافه کردن کلیدهای «بعدی» و «قبلی» یا رویدادهای کشیدن انگشت (Swipe)، پویایی بیشتری ایجاد کنید، بهتر است از ترفندهای موجود در بخش کدهای کاربردی جاوااسکریپت کمک بگیرید تا با حداقل حجم کد، این سناریوهای حرکتی را شبیه‌سازی کنید.

۴. مقایسه کاربردی تایم‌لاین‌های عمودی و افقی

برای درک بهتر این که کدام مدل تایم‌لاین برای پروژه شما مناسب‌تر است، جدول مقایسه‌ای زیر را به دقت بررسی کنید:

۵. تکنیک‌های جذاب‌سازی: انیمیشن و هاور در CSS

برای تبدیل یک تایم‌لاین معمولی به یک اثر هنری تعاملی، انیمیشن‌های CSS می‌توانند جادو کنند. یکی از بهترین کارها، تغییر ابعاد و درخشش نقطه گره (Dot) هنگام هاور (Hover) شدن روی باکس محتوا است. با کدهای زیر، به راحتی یک ترنزیشن نرم و چشم‌نواز پیاده‌سازی کنید:

/* انیمیشن جذاب برای هاور باکس‌ها */
.v-content {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.v-item:hover .v-content {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 86, 179, 0.15);
}

/* افکت بزرگ‌شدن نقطه گره زمان ورود کاربر */
.v-item::after {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.v-item:hover::after {
  transform: scale(1.4);
  background-color: #ff5722;
}

استفاده از ترنزیشن با ویژگی ease کمک می‌کند تا فریم‌های انیمیشن بسیار نرم و طبیعی برای چشم کاربر جلوه کنند. اگر پروژه‌های شما مبتنی بر سیستم‌های مدیریت محتوا مثل وردپرس است، می‌توانید از تکه‌کدهای تخصصی بخش توسعه و شخصی‌سازی وردپرس استفاده کنید تا این استایل‌ها را مستقیماً بدون تداخل با استایل‌های قالب به بلوک‌های گوتنبرگ اضافه کنید.

برای پیاده‌سازی بک‌اند یا خودکارسازی فرآیند خواندن رویدادهای تاریخی از دیتابیس و نمایش داینامیک آن‌ها، گاهی طراحان از اسکریپت‌های سبک برنامه‌نویسی کمک می‌گیرند. در این زمینه، مرور بخش تکه‌کدهای پایتون برای ساخت پایپ‌لاین‌های اتوماتیک داده و وب‌اسکرپینگ به منظور پر کردن اطلاعات تایم‌لاین خالی از لطف نیست.

۶. عیب‌یابی سریع و رفع باگ‌های رایج (Troubleshooting)

در طول طراحی و پیاده‌سازی تایم‌لاین‌های سفارشی، ممکن است با مشکلاتی روبرو شوید که ظاهر سایت شما را تحت تاثیر قرار دهد. در این بخش، چند مسعله شایع و راه‌حل برطرف کردن آن‌ها را با هم مرور می‌کنیم.

برای دسترسی سریع به کدهای برطرف‌کننده دیگر باگ‌های CSS، می‌توانید مستقیماً از مخزن تکه‌کدهای سایت fa-tools به عنوان منبع مرجع خود استفاده کنید.

۷. سوالات متداول (FAQ)