این روزها بازار کار با Flexbox داغ شده است و تا هنوز Grid در بین مرورگرها در جایگاه خوبی برای پشتیبانی قرار نگرفته است, فلکس باکس تازنده میدان است. از آنجا که پربازدیدترین مطلب این وب سایت تا زمان نوشتن این مطلب flexbox بوده است, تصمیم گرفتم تا مطلبی برای معرفی ابزارهایی که به یادگیری […]
در این مطلب قصد ساخت افکتی برای زمانی که متنی را hover می کنیم, داریم. این ترفند توسط wesbos@ در این پست معرفی شده است. دموی نهایی See the Pen Fun hover effect by Mojtaba Seyedi (@seyedi) on CodePen. نحوه ساخت اول از همه با استفاده از گرادینت خطی به حالت […]
تا حالا شده به این فکر کنید که بهتر است از کدام یک از واحدهای CSS برای نوشتن media query ها استفاده کنید؟ برای من خیلی پیش آمده است. ولی همیشه تنبلی و پشت گوش انداختن موضوع باعث می شد تا کاری در موردش انجام ندهم. اما همیشه می دانستم که یک مشکلاتی مثلا با […]
مانند دیگر ابزارها در دنیای کامپیوتر, مرورگرها نیز این قابلیت را به کاربران می دهند تا اندازه فونت را برای خوانایی بهتر تغییر دهند. در اینجا در مورد zoom کردن صحبت نمی کنیم بلکه در مورد تغییر اندازه فونت از طریق هسته تنظیمات مرورگر بحث می کنیم. نحوه انجام این تغییر در سه مرورگر زیر […]
در ادامه قسمت اول این مطلب به دنبال این هستیم تا با بررسی کامپوننت ها در کنار هم در یک سیستم گرید (grid) با نحوه استفاده مناسب از دو واحد em و rem بیشتر آشنا شویم. در مطلب قبل چند عنصر را در کنار هم قرار داده و نکاتی را در مورد آنها بررسی کردیم. […]
در مطلب قبل توضیح داده شد که این واحدهای نسبی چه هستند و چگونه عمل می کنند. حال در این مطلب به دنبال جواب دادن به این سوال هستیم که “از کدام یک از این واحدها باید استفاده کنیم؟“. آیا اصلا این سوال درست است؟ پای سفره ماژولاریان! اینکه می گوییم می شود به […]
در این مطلب قصد معرفی ابزاری برای بررسی بهتر واحدهای em و rem را داریم. اگر با این دو واحد آشنا نیستید به این مطلب مراجعه کنید. در این ابزار دو عنصر وجود دارند که عنصر سمت چپ با واحد em و عنصر سمت راست با واحد rem شکل گرفته شده اند. دو ویژگی font-size […]
یکی از روش هایی که واقعا باعث بهبود پیاده سازی در طراحی وب می شود استفاده از واحدهای نسبی مثل em و rem می باشد. برای ساختن کامپوننت های مستقل که دوباره قابل استفاده و یا اینکه به راحتی قابل ویرایش باشند, و اینکه بتوانیم با تغییرات کمی به طرح جدیدی از کامپوننت دست پیدا […]
چند ماه قبل در این سایت مطلبی برای نحوه استایل دهی به متن alt تصاویر در صفحات وب نوشته شد. در اینجا با استفاده از دو نکته ای که در ادامه می خوانید پارا فراتر گذاشته و بلاک تصویری که در زمان بارگذاری با مشکل مواجه می شود را زیباسازی می کنیم. دو حقیقت […]
به عنوان یک طراح سایت و یک CSS کار خیلی خیلی خیلی کار درست قطعا همیشه فایل CSS را minify می کنید. برای آنهایی که هنوز به مرحله “خیلی خیلی خیلی” نرسیدند و می خواهند بدانند معنی minify کردن چیست باید گفت عملیاتی است که روی یک فایل انجام می شود تا مواردی شامل کامنت […]