ساخت alert سفارشی با css و انیمیشن‌ های جذاب

امروزه کاربران به رابط‌های کاربری زیبا و جذاب توجه بیشتری دارند و استفاده از alert های سفارشی با CSS یکی از راه‌ های بهبود تجربه کاربری است. در این مقاله، به شما آموزش خواهیم داد که چگونه یک alert سفارشی با CSS و انیمیشن‌های جذاب بسازید.

مراحل ساخت alert سفارشی

برای ایجاد یک alert سفارشی، ما به HTML و CSS احتیاج داریم. در اینجا مراحل ساخت آن را باهم بررسی می‌کنیم:

۱. ساختار HTML

برای آغاز، ساختار HTML alert خود را تعریف کنید. به عنوان مثال:

<div class="alert" id="alert">
    <span class="close-btn" onclick="closeAlert()">&times;</span>
    <strong>هشدار!</strong> این یک alert سفارشی با CSS است.
</div>

۲. استایل CSS

حالا وقت آن است که استایل‌های CSS را برای alert خود اضافه کنیم. در اینجا یک مثال از استایل‌های لازم آورده شده است:

.alert {
    padding: 20px;
    background-color: #f44336; /* رنگ پس‌زمینه */
    color: white; /* رنگ متن */
    margin: 15px ;
    border: none;
    border-radius: 5px;
    position: relative;
    animation: fadeIn .5s; /* انیمیشن */
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: ; }
    to { opacity: 1; }
}

آموزش html css (رایگان)

۳. انیمیشن‌ های جذاب

برای بهبود تجربه کاربری، می‌توانید انیمیشن‌های جذابی به alert خود اضافه کنید. فرض کنید می‌خواهیم زمان پنهان‌شدن alert انیمیشن داشته باشد. می‌توانید این کار را با افزودن یک کلاس جدید و استفاده از انیمیشن انجام دهید:

.fadeOut {
    animation: fadeOut .5s forwards; /* انیمیشن پنهان شدن */
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: ; }
}

۴. عملکرد JavaScript

در نهایت، شما نیاز به یک عملکرد جاوااسکریپت برای بسته شدن alert خواهید داشت. به این شکل:

function closeAlert() {
    var alert = document.getElementById("alert");
    alert.classList.add("fadeOut");
    setTimeout(function() {
        alert.style.display = "none";
    }, 500); // مدت زمان انیمیشن
}

نتیجه‌ گیری

با استفاده از این مراحل ساده، شما می‌توانید یک alert سفارشی ایجاد کنید که جذاب و کاربرپسند باشد. علاوه بر این، افزودن انیمیشن به alert می‌تواند تجربه بهتری را به کاربران ارائه دهد. با تغییر رنگ‌ها، متن‌ها و انیمیشن‌ها، می‌توانید alert خود را مطابق با سبک وب‌سایت‌تان طراحی کنید.