صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
آموزش CSS
۲۷ مقاله
Filterها در CSS
تا اینجا با Transform ، Transition و Animation آشنا شدیم و یاد گرفتیم چگونه ظاهر و رفتار عناصر صفحه را تغییر دهیم. اما گاهی اوقات لازم است خودِ ظاهر یک تصویر یا عنصر را تغییر دهیم؛ مثلاً یک تصویر را سیاه‌وسفید کنیم، کمی تار کنیم، روشن‌تر یا تیره‌تر کنیم، رنگ آن را تغییر دهیم یا برای آن سایه‌ای متناسب با شکل واقعی تصویر ایجاد کنیم. CSS برای این کار ویژگی بسیار کاربردی filter را در اختیار ما قرار می‌دهد. با استفاده از Filterها می‌توانیم افکت‌های گرافیکی مختلفی را مستقیماً در مرورگر ایجاد کنیم و روی تصاویر، پس‌زمینه‌ها، متن‌ها، Borderها و سایر عناصر اعمال کنیم. این افکت‌ها حتی می‌توانند همراه با transition یا animation استفاده شوند.
Flexbox در CSS
تا اینجا بیشتر ویژگی‌های CSS را برای کنترل ظاهر عناصر یاد گرفتیم؛ از رنگ و فونت و Box Model گرفته تا Position، Transform، Transition، Animation و Filter. اما یک سؤال مهم باقی می‌ماند: چطور عناصر صفحه را به شکل حرفه‌ای در کنار یکدیگر قرار دهیم؟ مثلاً فرض کنید می‌خواهیم سه کارت را کنار هم قرار دهیم، منوی سایت را به صورت افقی بسازیم، یک دکمه را دقیقاً وسط صفحه قرار دهیم یا محتوای داخل یک کارت را در دو طرف آن پخش کنیم. در گذشته برای بسیاری از این کارها از float ، position ، Marginهای مختلف و تکنیک‌های پیچیده استفاده می‌شد. اما Flexbox بسیاری از این مشکلات را بسیار ساده‌تر کرده است. Flexbox یک سیستم Layout یک‌بعدی در CSS است که برای قرار دادن عناصر در یک ردیف یا ستون ، مدیریت فضای آزاد و تراز کردن عناصر طراحی شده است. در Flexbox عناصر می‌توانند متناسب با فضای موجود رشد کنند یا کوچک شوند.
Grid Layout در CSS
در مقاله قبل با Flexbox آشنا شدیم؛ ابزاری قدرتمند برای ساخت Layoutهای یک‌بعدی که در چیدمان عناصر در یک ردیف یا یک ستون بسیار کاربردی است. اما بسیاری از Layoutهای واقعی وب‌سایت‌ها فقط به یک محور محدود نمی‌شوند. برای مثال، یک صفحه داشبورد ممکن است هم‌زمان چند ردیف و چند ستون داشته باشد، یا یک فروشگاه اینترنتی نیاز داشته باشد محصولات را در قالب یک شبکه منظم نمایش دهد. اینجاست که CSS Grid Layout وارد می‌شود. Grid یکی از مهم‌ترین سیستم‌های Layout در CSS است که برای ساخت چیدمان‌های دو‌بعدی بر اساس ردیف و ستون طراحی شده است. با Grid می‌توانیم عناصر را در سلول‌ها قرار دهیم، چند سلول را با هم ترکیب کنیم، Layoutهای پیچیده بسازیم و حتی ساختار کلی یک صفحه را با نام‌گذاری بخش‌ها تعریف کنیم.
طراحی Responsive در CSS
امروزه کاربران با دستگاه‌های بسیار متنوعی وارد وب‌سایت‌ها می‌شوند؛ از گوشی‌های کوچک و تبلت گرفته تا لپ‌تاپ، مانیتورهای بزرگ و حتی نمایشگرهای بسیار عریض. بنابراین نمی‌توانیم یک صفحه وب را فقط برای یک اندازه صفحه طراحی کنیم و انتظار داشته باشیم در تمام دستگاه‌ها ظاهر مناسبی داشته باشد. Responsive Web Design یا طراحی واکنش‌گرا روشی برای طراحی صفحات وب است که باعث می‌شود ساختار، اندازه، فاصله‌ها، تصاویر و سایر بخش‌های صفحه متناسب با فضای موجود تغییر کنند. به عبارت ساده‌تر، صفحه باید خودش را با محیطی که در آن نمایش داده می‌شود تطبیق دهد.
Media Query در CSS
در مقاله قبل با مفهوم Responsive Design آشنا شدیم و دیدیم که یک وب‌سایت باید بتواند خودش را با اندازه‌های مختلف صفحه تطبیق دهد. برای رسیدن به این هدف، CSS ابزارهای مختلفی مانند Flexbox، Grid، واحدهای نسبی، clamp() و minmax() را در اختیار ما قرار می‌دهد. اما گاهی Layout به تغییرات مشخصی نیاز دارد؛ مثلاً در دسکتاپ منوی کامل نمایش داده شود، در موبایل فقط یک دکمه منو دیده شود، یا یک بخش که در دسکتاپ دو ستون دارد در موبایل به یک ستون تبدیل شود.
طراحی RTL با CSS
وقتی برای زبان‌هایی مانند فارسی یا عربی وب‌سایت طراحی می‌کنیم، تنها تغییر جهت متن از چپ به راست به راست به چپ کافی نیست. جهت صفحه روی نحوه قرارگیری متن، فاصله‌ها، Layout، Navigation، فرم‌ها، آیکون‌ها، جدول‌ها و حتی بعضی از رفتارهای ظاهری عناصر تأثیر می‌گذارد. به همین دلیل، طراحی یک سایت فارسی باید از ابتدا با در نظر گرفتن RTL یا Right-to-Left انجام شود. در این مقاله یاد می‌گیریم چگونه یک Layout استاندارد راست‌به‌چپ بسازیم، چه تفاوتی میان direction و text-align وجود دارد، چرا استفاده از ویژگی‌های Logical CSS اهمیت زیادی دارد و چگونه یک صفحه واقعی فارسی مانند سایت «بنو سرویس» را به شکل اصولی RTL کنیم.
استفاده از فونت‌های فارسی در وب
در طراحی یک وب‌سایت فارسی، فونت فقط یک عنصر تزئینی نیست؛ بلکه بخش مهمی از تجربه کاربری و هویت بصری سایت است. انتخاب فونت نامناسب می‌تواند باعث شود متن‌ها سخت خوانده شوند، فاصله خطوط نامناسب باشد، تیترها ظاهر ضعیفی داشته باشند یا حتی ساختار کلی صفحه غیرحرفه‌ای به نظر برسد. از طرف دیگر، استفاده صحیح از فونت در وب فقط به نوشتن font-family محدود نمی‌شود. اگر بخواهیم یک فونت فارسی اختصاصی را در پروژه استفاده کنیم، باید با @font-face ، فرمت فونت، وزن‌های مختلف، font-display ، Fallback Font، اندازه متن، line-height و عملکرد بارگذاری فونت آشنا باشیم.