برای هر وبسایت یا اپلیکیشن وبی که تجربه کاربری خوبی میخواد، نوتیفیکیشنها نقش بسیار مهمی دارن. امروز میخایم با استفاده از CSS و HTML نوتیفیکیشنهای و جذابی بسازیم که خیلی راحت روی صفحه نمایش ظاهر بشن. این پروژه هم برای مبتدیها مناسبه و هم برای توسعهدهندههای باتجربه که میخوان مهارتهای خودشون رو ارتقا بدن. برای ساخت این نوتیفیکیشنها نیازی به پیچیدگیهای زیاد نداریم 🙂
HTML:
برای شروع، یک صفحه ساده HTML میسازیم که نمایش نوتیفیکیشنها رو تنظیم کنه. این کد شامل چکباکسهایی میشه که به شما این امکان رو میده تا نمایش نوتیفیکیشنهای مختلف (کمک، موفقیت، هشدار، خطا) رو کنترل کنید. هر نوع نوتیفیکیشن داخل یک div با کلاس toast-item قرار میگیره و داخل هر div یک نوتیفیکیشن خاص همراه با برچسب برای بستن اون وجود داره. در پایین صفحه هم آیکنهای نوتیفیکیشن قرار دارند که امکان تغییر دید نوتیفیکیشنها رو فراهم میکنن.
این ساختار ساده، ولی بسیار کاربردی، شروعی عالی برای ایجاد نوتیفیکیشنهای جذاب در سایتها و اپلیکیشنهای وب هست.
✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD
CSS:
برای ساخت این نوتیفیکیشنهای جذاب با CSS، از خاصیتهای مختلف استفاده کردیم تا رنگ پسزمینه، ترنزیشنها، و تاخیر انیمیشنها رو تنظیم کنیم. تمام این اجزا با استفاده از flexbox مرتب شدن که خیلی کمک میکنه تا لایهها به درستی چیده بشن و نوتیفیکیشنها به شکل زیبا و مرتب به نمایش دربیان. هر نوع نوتیفیکیشن (کمک، موفقیت، هشدار، خطا) استایل خاص خودش رو داره که شامل رنگ پسزمینه و آیکن مربوطه میشه.
همچنین از چکباکسها استفاده کردیم که با فعال کردن اونها، نوتیفیکیشنها نمایش داده بشن. با این روش، هر وقت بخواهید یه نوتیفیکیشن خاص رو نشون بدید، فقط کافیه چکباکس مربوطه رو فعال کنید و نوتیفیکیشن به راحتی روی صفحه ظاهر میشه. این روش باعث میشه که نوتیفیکیشنها همیشه مرتب و حرفهای به نظر بیاید.
نتیجه گیری:
خب، حالا که پروژه رو کامل کردیم، باید بگم که نوتیفیکیشنهای تمیز و جذاب رو به خوبی ساختیم. این پروژه ساده و راحت باعث میشه تجربه کاربری به مراتب بهتر بشه، چون نوتیفیکیشنها به صورت جذاب و بدون زحمت روی صفحه ظاهر میشن. چه شما یک مبتدی باشید، چه یک توسعهدهنده حرفهای، این تمرین فرصتی عالی برای تقویت مهارتهای CSS و بهبود رابط کاربری وبسایتهاست.