مقالات

متغیرهای CSS (Custom Properties): کد تمیزتر، مدیریت راحت‌تر! 🎨 سلام به همگی! توی پروژه‌های CSS، خیلی وقتا پیش میاد که یه رنگ، یه فونت، یا یه فاصله رو بارها و بارها توی جاهای مختلف استفاده می‌کنیم. مثلاً رنگ اصلی سایت‌مون...

CSS Animations: خلق انیمیشن‌های پیچیده با @keyframes! 🎬 سلام به همگی! تا الان با Transitionها آشنا شدیم که تغییرات بین دو حالت رو نرم می‌کنن. اما اگه بخوایم انیمیشن‌های پیچیده‌تر، چند مرحله‌ای، یا حتی انیمیشن‌هایی که مدام تکرار می‌شن رو...

CSS Transforms: جابجایی، چرخش، تغییر اندازه و کج کردن عناصر! 🤸‍♀️ سلام دوستان! تا اینجا با انیمیشن‌های نرم و پیوسته (Transitions) آشنا شدیم. اما گاهی وقت‌ها نیاز داریم که عناصر HTML رو جابجا کنیم، بچرخونیم، اندازه‌شون رو عوض کنیم یا...

CSS Transitions: جادوی حرکت نرم و روان! ✨ سلام به همه! تا حالا شده یه سایت رو ببینید که با هاور کردن روی یه دکمه، رنگش نرم و قشنگ عوض می‌شه؟ یا با تغییر اندازه یه عنصر، انیمیشن ظریفی رو...

واحد‌های اندازه‌گیری: پیکسل (px) در مقابل واحد‌های نسبی! ⚖️ سلام به همگی! تا حالا موقع کد زدن با CSS، خیلی از ماها راحت‌ترین کار رو انتخاب کردیم: استفاده از پیکسل (px). پیکسل یه واحد اندازه‌گیری مطلقه، یعنی یه مقدار ثابت...

رویکرد Mobile-First: اول موبایل، بعد همه! 📱➡️💻 سلام به همگی! توی بحث طراحی واکنش‌گرا (Responsive Design)، با دو تا رویکرد اصلی آشنا شدیم: Desktop-First و Mobile-First. امروز می‌خوایم روی رویکرد Mobile-First تمرکز کنیم. این رویکرد چیه و چرا اینقدر طرفدار...

Media Queries: تنظیمات جادویی برای اندازه‌های مختلف صفحه! ✨ سلام به همگی! توی جلسه قبل با مفهوم طراحی واکنش‌گرا (Responsive Design) و اهمیتش آشنا شدیم. حالا وقتشه که عمیق‌تر بشیم و ببینیم چطور می‌تونیم با استفاده از Media Queries، استایل‌های...

طراحی واکنش‌گرا (Responsive Design): سلام به همه‌ی دستگاه‌ها! 👋 سلام دوستان عزیز! امروزه دیگه مردم با یه مدل گوشی یا تبلت خاص، وب‌سایت‌ها رو چک نمی‌کنن. از لپ‌تاپ‌های بزرگ گرفته تا گوشی‌های کوچیک، همه جور دستگاهی وجود داره. پس اگه...

پروژه خفن: ساخت Layout کامل صفحه با CSS Grid! 🚀 سلام به همه! تا اینجا کلی چیزهای هیجان‌انگیز در مورد CSS Grid یاد گرفتیم. حالا وقتشه که دانش‌مون رو به کار بگیریم و یه پروژه‌ی واقعی بسازیم! قراره یه Layout...