نویسنده: Mahyarmi

آموزش ایجاد سایه‌های نرم و طبیعی (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 قراره بهت نشون بدم چطور میشه مگا منوهای عریض و تمام‌صفحه‌ای […]

طراحی باکس‌های نقل‌قول (Blockquote) با تایپوگرافی مدرن و انیمیشن ورود

طراحی باکس‌های نقل‌قول (Blockquote) با تایپوگرافی مدرن و انیمیشن ورود رفیق برنامه‌نویس، توی دنیای امروز که محتوا پادشاهه، فقط نوشتن کافی نیست؛ باید محتوات بدرخشه! باکس‌های نقل‌قول (Blockquote) ابزاری قدرتمند برای برجسته کردن ایده‌های کلیدی و نقل‌قول‌ها هستن. اما دیگه دوره باکس‌های ساده و بی‌روح گذشته. بیا با هم یاد بگیریم چطور با تایپوگرافی مدرن […]

کدهای آماده برای افکت بلور (Blur Effect) و تار کردن پس‌زمینه مودال‌ها

کدهای آماده برای افکت بلور (Blur Effect) و تار کردن پس‌زمینه مودال‌ها رفیق برنامه‌نویس، تا حالا شده بخوای یه مودال بزاری وسط صفحه و دلت بخواد بک‌گراندش یه حال دیگه داشته باشه؟ منظورم اون افکت بلور خفنیه که تمرکز کاربر رو میاره روی مودال و همه چیزای دیگه رو محو می‌کنه. اگه دنبال کدهای آماده […]

آموزش طراحی هدرهای چسبنده (Sticky Header) با تغییر استایل ملایم هنگام اسکرول

آموزش طراحی هدرهای چسبنده (Sticky Header) با تغییر استایل ملایم هنگام اسکرول رفیق برنامه‌نویس، تا حالا شده تو سایتی بچرخی و حس کنی یک چیزی کمه؟ مثلاً وقتی اسکرول می‌کنی، هدر سایت غیب میشه و برای پیدا کردن منو مجبور میشی برگردی بالا؟ یا برعکس، یک هدر چسبنده هست که خشک و بی‌روح، بدون هیچ […]

ساخت آیکون‌های متحرک (Animated Icons) با استفاده از ترانزیشن‌های روان CSS

ساخت آیکون‌های متحرک (Animated Icons) با استفاده از ترانزیشن‌های روان CSS رفیق برنامه‌نویس، امروز می‌خوایم یه سفر هیجان‌انگیز رو شروع کنیم به دنیای آیکون‌های متحرک! حتماً دیدی که چطور یه آیکون ساده با یه حرکت کوچیک می‌تونه جون بگیره و تجربه کاربری رو زمین تا آسمون تغییر بده. دیگه دوره آیکون‌های ثابت تموم شده و […]

ترفندهای استایل‌دهی به اسکرول‌بار (Custom Scrollbar) با ظاهر مینیمال و مخفی‌شونده

ترفندهای استایل‌دهی به اسکرول‌بار (Custom Scrollbar) با ظاهر مینیمال و مخفی‌شونده سلام رفیق برنامه‌نویس! تا حالا شده از اون اسکرول‌بارهای پیش‌فرض و بی‌روح مرورگرت خسته بشی و دلت بخواد یه چیزی خوشگل‌تر، مینیمال‌تر یا حتی کلاً نامرئی داشته باشی؟ خب، امروز اومدیم تا دقیقاً همین کارو با هم انجام بدیم. استایل‌دهی به اسکرول‌بار نه تنها […]