نویسنده: Mahyarmi

طراحی پاپ‌آپ‌های (Popup) خروج از صفحه با انیمیشن‌های ورود جذاب و بدون پرش

طراحی پاپ‌آپ‌های (Popup) خروج از صفحه با انیمیشن‌های ورود جذاب و بدون پرش رفیق توسعه‌دهنده! تا حالا شده کلی وقت بذاری روی یه پروژه و کاربر دقیقاً لحظه آخر بخواد از صفحه خارج بشه؟ اون لحظه است که پاپ‌آپ خروج درست و حسابی میاد وسط. اینجا یاد می‌گیریم چطور پاپ‌آپ‌هایی بسازیم که هم چشم‌نواز باشن، […]

آموزش ساخت شمارنده‌های (Counters) خودکار با استفاده از ویژگی counter-reset

آموزش ساخت شمارنده‌های (Counters) خودکار با استفاده از ویژگی counter-reset رفیق برنامه‌نویس، تا حالا شده بخوای توی پروژه‌هات یه لیست یا بخش‌بندی با شماره‌گذاری خاص خودت داشته باشی؟ یا اصلاً بخوای بدون دردسر جاوااسکریپت و کلی کد اضافه، تیترها و زیرتیترها رو خودکار شماره‌گذاری کنی؟ اگه جوابت مثبته، پس درست اومدی! ویژگی counter-reset در CSS […]

کدهای CSS برای استایل‌دهی به لیست‌های بولت‌دار و ساخت Custom Bullets

کدهای CSS برای استایل‌دهی به لیست‌های بولت‌دار و ساخت Custom Bullets اگه تا حالا با لیست‌های HTML سروکله زدی و دوست داشتی بولت‌های پیش‌فرض و تکراری رو بندازی دور و لیست‌های خاص و چشم‌نواز خودت رو بسازی، جای درستی اومدی. قراره اینجا یه سفر حسابی به دنیای جذاب CSS برای استایل‌دهی به لیست‌ها داشته باشیم […]

پیاده‌سازی افکت‌های ترانزیشن پیچیده و ترکیبی روی تصاویر هنگام هاور

پیاده‌سازی افکت‌های ترانزیشن پیچیده و ترکیبی روی تصاویر هنگام هاور سلام رفیق برنامه‌نویس! اگه مثل من دنبال اینی که وبسایت‌ها و اپلیکیشن‌هات جون بگیرن و کاربرا باهاشون ارتباط حسی عمیق‌تری برقرار کنن، حتماً می‌دونی که جزئیات کوچیک چقدر مهمن. یکی از این جزئیات، افکت‌های ترانزیشن جذاب و پویا روی تصاویر موقع هاور (Hover) هست. این […]

ساخت گالری تصاویر ماسونری (Masonry Layout) با ستون‌های متغیر در CSS

ساخت گالری تصاویر ماسونری (Masonry Layout) با ستون‌های متغیر در CSS رفیق برنامه‌نویس، تا حالا شده بخوای یه گالری عکس بسازی که مثل دیوار سنگی‌های قدیمی، همه تصاویرش چفت و بست بخورن و هیچ فضای خالی ناخوشایندی بینشون نمونه؟ همون چیزی که بهش می‌گیم Masonry Layout یا چیدمان ماسونری. این نوع چیدمان، مخصوصاً برای گالری […]

آموزش ایجاد سایه‌های نرم و طبیعی (Soft Drop Shadows) در طراحی‌های مینیمال

آموزش ایجاد سایه‌های نرم و طبیعی (Soft Drop Shadows) در طراحی‌های مینیمال رفیق برنامه‌نویس یا طراح، اگه دنبال اینی که به المان‌های UI پروژه‌هات یه حس عمق و بعد بدی، بدون اینکه ظاهر مینیمال و تمیزشون رو خراب کنی، دقیقاً اومدی جای درست. سایه‌های نرم و طبیعی (Soft Drop Shadows) کلید حل این معماست. این […]

طراحی آکاردئون‌های بازشونده نرم با CSS بدون نیاز به توابع جاوااسکریپت

طراحی آکاردئون‌های بازشونده نرم با CSS بدون نیاز به توابع جاوااسکریپت سلام رفیق برنامه‌نویس! اگه خسته شدی از اینکه برای هر انیمیشن ساده‌ای مثل یه آکاردئون بازشو، مجبور باشی کلی کد جاوااسکریپت بنویسی و نگران پرفورمنس سایتت باشی، این مقاله دقیقاً برای توئه. قراره بهت نشون بدیم چطور با CSS خالص و چند تا ترفند […]

کدهای آماده ساخت نشانگرهای پیشرفت (Progress Bar) متحرک و داینامیک

**کدهای آماده ساخت نشانگرهای پیشرفت (Progress Bar) متحرک و داینامیک** (این تیتر اصلی (H1) است، با سایز فونت بزرگ (مثلاً 32px) و ضخیم نمایش داده شود.) رفیق برنامه‌نویس، بیا رو راست باشیم. هیچ‌کس دوست نداره وقتی روی یک دکمه کلیک می‌کنه یا منتظر بارگذاری فایلیه، فقط یک صفحه سفید یا ثابت ببینه. اونجاست که نشانگرهای […]

ترفندهای استفاده از Pseudo-class های پیشرفته CSS برای تعامل بهتر با کاربر

ترفندهای استفاده از Pseudo-class های پیشرفته CSS برای تعامل بهتر با کاربر سلام رفیق برنامه‌نویس! تا حالا شده بخوای با CSS یه چیز خفن بسازی که تعامل کاربر با سایتت رو حسابی بهبود بده، اما فکر کردی فقط جاوااسکریپت از پسش برمیاد؟ اشتباه می‌کنی! Pseudo-class ها، مخصوصاً اون پیشرفته‌هاشون، اینجا مثل یه شوالیه با زره […]

آموزش ساخت مگا منوهای (Mega Menu) عریض و تمام‌صفحه با استفاده از CSS Grid

آموزش ساخت مگا منوهای (Mega Menu) عریض و تمام‌صفحه با استفاده از CSS Grid رفیق توسعه‌دهنده! تا حالا شده بخوای یه منوی بزرگ و کاربردی بسازی که هم شیک باشه و هم روی همه دستگاه‌ها عالی نمایش داده بشه؟ دقیقاً همینجا، با CSS Grid قراره بهت نشون بدم چطور میشه مگا منوهای عریض و تمام‌صفحه‌ای […]