طراحان وب همواره به دنبال راه هایی هستند تا تکنیکهای جدید css را امتحان کنند و مرزهای توانایی‌های css را جا به جا کنند. اما واقعا چه تکنیکهایی در حال ترند شدن هستند؟ کدامشان را باید یاد گرفت؟ برای پاسخ به این سوال‌ها همراه عصرپایش باشید تا با چند ایده ساده، اما کاربردی و جذاب در دنیای وب دیزاین آشنا شوید و در پروژه‌های بعدی خودتان از آن استفاده کنید.
1. طراحی رسپانسیو یا واکنشگرا
همه چیز باید در ططراحی شما رسپانسیو باشد و مطمئن شوید چیزی از قلم نیفتاده باشد. خبر خوب این است که راه‌های زیادی وجود دارد تا یک شبکه رسپانسیو و منعطف در صفحه خود طراحی کنید به طوری که بدون در نظر گرفتن سایز صفحه دستگاه، چیزی که شما میخواهید را به شما ارائه دهد.
ساختار یک شبکه رسپانسیو میتواند شامل ستونهایی با سایز و اندازه مساوی یا غیر مساوی باشد. شما میتوانید با استفاده از تغییر دادن نقاط شکست، و ارتفاع عناصری که در صفحه خود موجود است، به یک طراحی واکنشگرا مسلط شوید.
فراموش نکنید که از fraction یا همان (fr) در طراحی خود استفاده کنید چرا که یک واحد انعطاف پذیری است که بر اساس قوانین شما فضای باز را تقسیم بندی میکند. هر واحد (fr) همانند یک ستون عمل میکند و شما میتوانید بین آنها فاصله و فاضی خالی اضافه کنید و در نهایت یک شبکه رسپانسیو داشته باشید.
برای توضیحات بیشتر و مثال عملی به این لینک مراجعه کنید.
2. از فونتهای تغییر پذیر استفاده کنید
فونتهای تغییر پذیر بسیار جدید میباشند و به صورت یک فایل تکی به کاربر ارائه میشود و شامل تمام نسخه‌هایی از یک فونت که طراحی شما را به کاربر نشان دهد است.
در حال حاضر لیست بزرگی از فونتهای تغییر پذیر وجود ندارد اما این موضوع در حال رشد و فراگیر شدن است. جالب است بدانید که لوگوی جدید برنامه Doctor Who شبکه BBC از یک فونت تغییر پذیر سفارشی شده استفاده میکند.
برای استفاده از فونتهای تغییر پذیر ، باید فونتی را انتخاب کنید که از این ویژگی پشتیبانی کند و یک مرورگر که خاصیت font-variation-settings را اجرا کند.
توصیه میکنیم برای آشنایی بیشتر با این موضوع، حتما به این لینک مراجعه کنید تا خودتان تجربه کار با یک فونت تغییر پذیر و تست آنرا داشته باشید.
3.متن‌های متحرک بسازید
CSS بر نحوه خواندن و تعامل کاربران با عناصر متن تاثیر می گذارد. چیزی که زمانی فقط یک عنصر استاتیک بود حالا میتواند ویژگی‌های داینامیکی را نشان دهد.
این یک انتخاب بسیار عامه‌پسند برای وبسایت هایی است که عناصر هنری زیادی برای درگیر کردن و ارتباط گرفتن با کاربر ندارند.
برای آزمایش کردن استایل‌های متفاوت و فراوانی که میشود به یک متن متحرک داد حتما به این لینک مراجعه کنید.
4. استفاده از Scroll Snapping
دفعات زیادی شده که تمایل داشتید روی اسکرول صفحه کنترل داشته باشید ولی نمیدانید چطور. یا به طور مثال میخواهید که حتما کاربر بخشی از طراحی شما را به صورت یکجا و کامل ببیند. راه حل ساده است! تنها باید از Scroll Snapping استفاده کنید.
به زبان ساده، یعنی میتوانید نقاط اسکرول صفحه را هم به صورت عمودی و هم به صورت افقی کنترل کنید. به این ترتیب کاربران آنچه را که دقیقا شما میخواهید، میبینند.
در پایان تعدادی مرجع و رفرنس برای یادگیری دقیق‌تر شبکه رسپانسیو به شما معرفی میکنیم:
Understanding the CSS Grid Layout Module
W3Schools CSS Grid Layout Module Basics
Introduction to CSS Grid Challenges by FreeCodeCamp
CSS-Tricks Complete Guide to Grid
منبع: Design Shack
