ترفندهای CSS برای مدیریت نمایش متنهای طولانی (Truncate Text)
# ترفندهای CSS برای مدیریت نمایش متنهای طولانی (Truncate Text) هیچچیز بدتر از یک رابط کاربری شلوغ و درهمبرهم نیست، خصوصاً وقتی متنهای طولانی بی اجازه از محدودهی خودشون میزنن بیرون و ظاهر کار رو به هم میریزن. اگه تا حالا با مشکل مدیریت نمایش متنهای طولانی در پروژههای وبت گلاویز شدی، این مقاله رفیق […]
چگونه یک سیستم مودال (Modal) سبک و سریع بدون کتابخانه بسازیم؟
چگونه یک سیستم مودال (Modal) سبک و سریع بدون کتابخانه بسازیم؟ رفیق برنامهنویس، خسته از سنگینی کتابخانهها و فریمورکهای جاوااسکریپتی برای یه کار ساده مثل نمایش یه مودال (Modal)؟ وقتشه که کنترل رو کامل به دست بگیری و یه مودال سبک، سریع و کاملاً سفارشی برای پروژههات بسازی. بدون حتی یک بایت کد اضافی! این […]
کدهای آماده برای طراحی فرمهای مرحلهای (Multi-step Forms)
کدهای آماده برای طراحی فرمهای مرحلهای (Multi-step Forms) سلام رفیق برنامهنویس! اگه دنبال راهی هستی که فرمهات رو از حالت خستهکننده تکصفحهای دربیاری و یه تجربه کاربری جذابتر و کاربردیتر بسازی، اومدی سر جای درست. طراحی فرمهای مرحلهای (Multi-step Forms) نه فقط نرخ تکمیل فرم رو بالا میبره، بلکه کاربرا رو هم کلافه نمیکنه. تو […]
آموزش ساخت جداول قیمتگذاری (Pricing Tables) با قابلیت انتخاب پلن
آموزش ساخت جداول قیمتگذاری (Pricing Tables) با قابلیت انتخاب پلن سلام رفیق برنامهنویس! اگه دلت میخواد یه جدول قیمتگذاری (Pricing Table) حرفهای، کاربرپسند و با قابلیت انتخاب پلن (ماهانه/سالانه) بسازی که هم خوشگل باشه و هم فروش رو ببره بالا، جای درستی اومدی. قراره امروز با هم قدم به قدم پیش بریم و از صفر […]
طراحی سایدبارهای مدرن (Dashboard Sidebar) با قابلیت جمعشدن
طراحی سایدبارهای مدرن (Dashboard Sidebar) با قابلیت جمعشدن رفیق برنامهنویس، تا حالا شده به یه داشبورد نگاه کنی و ببینی چقدر شلوغه؟ یا برعکس، چقدر ساده و دلبازه؟ یکی از اجزای کلیدی که این حس رو منتقل میکنه، سایدبار یا همون نوار کناریه. ولی نه هر سایدباری! منظورم یه سایدبار مدرن و حرفهایه که علاوه […]
ترفندهای Flexbox برای تراز کردن المانهای پیچیده در موبایل
ترفندهای Flexbox برای تراز کردن المانهای پیچیده در موبایل رفیق توسعهدهنده! اگه از اونایی هستی که همیشه دنبال راهکارهای تمیز و قدرتمند برای چیدمان توی موبایلی، این مقاله برای تو نوشته شده. Flexbox یه گنجینه بینظیره که اگه قلقش دستت بیاد، دیگه لازم نیست برای هر چیدمان پیچیدهای ساعتها کلنجار بری. اینجا قراره تمام فوت […]
اسنیپتهای کاربردی برای طراحی فوترهای مینیمال و چندستونه
اسنیپتهای کاربردی برای طراحی فوترهای مینیمال و چندستونه رفیق برنامهنویس، بیا یه نگاه بندازیم به یکی از مهمترین و البته گاهی دستکم گرفته شدهترین بخشهای هر سایت: فوتر! خیلیها فکر میکنن فوتر فقط یه گوشه برای کپیرایت و یه سری لینک اضافیه، اما اگه خلاقیت به خرج بدیم، میتونه تبدیل بشه به یک ابزار قدرتمند […]
چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟
چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟ ⭐ نقشه راه: ساخت هدر هوشمند در یک نگاه ⭐ 💡 مرحله ۱: HTML پایه ساختار اصلی هدر و محتوای صفحه رو میچنیم. <header> و <nav> محتوای کافی برای اسکرول 💡 مرحله ۲: CSS چسبنده هدر رو با CSS چسبنده میکنیم و استایل […]
آموزش ساخت گالری تصاویر به سبک Pinterest با کدهای CSS
آموزش ساخت گالری تصاویر به سبک Pinterest با کدهای CSS رفیق برنامهنویس، حالت چطوره؟ امروز قراره دست به کار شیم و یه گالری تصویر بزنیم که هرکی دید بگه: “واو، چه کدی زدی!” منظورم همون چیدمان جذاب و نامنظم پینترستی هست که تصاویر با ارتفاعهای مختلف رو بدون فضای خالی اضافه کنار هم میچینه. شاید […]
۵ ساختار مدرن با CSS Grid که جایگزین بوتاسترپ میشوند
۵ ساختار مدرن با CSS Grid که جایگزین بوتاسترپ میشوند رفیق توسعهدهنده! این روزها دیگه کمتر کسی سراغ فریمورکهای سنگین و جاوااسکریپتی مثل بوتاسترپ میره تا یه چیدمان ساده بزنه. راستش رو بخوای، دنیای CSS انقدر پیشرفت کرده که با ابزارهایی مثل CSS Grid میتونی هر طرحی رو که تو ذهنته، با کمترین کد و […]