نویسنده: Mahyarmi

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

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

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

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

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

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

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

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

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

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

پیاده‌سازی افکت پارالکس (Parallax) چندلایه‌ای برای صفحات فرود پریمیوم

پیاده‌سازی افکت پارالکس (Parallax) چندلایه‌ای برای صفحات فرود پریمیوم 🛣️ نقشه راه پیاده‌سازی پارالکس چندلایه‌ای: یک نگاه سریع 1️⃣ درک مفهوم پارالکس شناخت لایه‌ها، سرعت حرکت و کاربرد در UX. 2️⃣ ساختار HTML بنیادی تعریف کانتینر و لایه‌های مختلف با ترتیب صحیح. 3️⃣ استایل‌دهی CSS اصلی موقعیت‌دهی absolute، z-index، و تنظیم ابعاد اولیه. 4️⃣ جادوی […]

آموزش ساخت افکت تایپ‌رایتر (Typewriter) روان و بی‌نقص با استفاده از انیمیشن‌های CSS

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

کدهای CSS برای تغییر شکل و استایل‌دهی پیشرفته به چک‌باکس‌ها و رادیوباتن‌ها

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

طراحی فوترهای سایت با چیدمان شبکه‌ای نامتقارن و آینده‌نگرانه

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

۲۰. ساخت افکت پالس (Pulse Animation) برای جلب توجه کاربر به دکمه‌های CTA

۲۰. ساخت افکت پالس (Pulse Animation) برای جلب توجه کاربر به دکمه‌های CTA 📞 تماس با ما: 09202232789 رفیق برنامه‌نویس، تا حالا شده به این فکر کنی که چطور می‌شه توجه کاربر رو توی کسری از ثانیه به مهم‌ترین بخش سایتت جلب کنی؟ بله، منظورم همون دکمه‌های CTA (Call to Action) هست. اون دکمه‌ای که […]