چند تکنیک css که شما را حرفه‌ای میکند

چند تکنیک css که شما را حرفه‌ای میکند

طراحان وب همواره به دنبال راه‌ هایی هستند تا تکنیکهای جدید css را امتحان کنند و مرزهای توانایی‌های css را جا به جا کنند. اما واقعا چه تکنیکهایی در حال ترند شدن هستند؟ کدامشان را باید یاد گرفت؟ برای پاسخ به این سوال‌ها همراه عصرپایش باشید تا با چند ایده ساده، اما کاربردی و جذاب در دنیای وب دیزاین آشنا شوید و در پروژه‌های بعدی خودتان از آن استفاده کنید.

 

1. طراحی رسپانسیو یا واکنش‌گرا

 

css grid

 

همه چیز باید در ططراحی شما رسپانسیو باشد و مطمئن شوید چیزی از قلم نیفتاده باشد. خبر خوب این است که راه‌های زیادی وجود دارد تا یک شبکه رسپانسیو و منعطف در صفحه خود طراحی کنید به طوری که بدون در نظر گرفتن سایز صفحه دستگاه، چیزی که شما میخواهید را به شما ارائه دهد.

ساختار یک شبکه رسپانسیو میتواند شامل ستونهایی با سایز و اندازه‌ مساوی یا غیر مساوی باشد. شما میتوانید با استفاده از تغییر دادن نقاط شکست، و ارتفاع عناصری که در صفحه خود موجود است، به یک طراحی واکنشگرا مسلط شوید.

فراموش نکنید که از fraction یا همان (fr) در طراحی خود استفاده کنید چرا که یک واحد انعطاف پذیری است که بر اساس قوانین شما فضای باز را تقسیم بندی میکند. هر واحد (fr) همانند یک ستون عمل میکند و شما میتوانید بین آنها فاصله و فاضی خالی اضافه کنید و در نهایت یک شبکه رسپانسیو داشته باشید.

برای توضیحات بیشتر و مثال عملی به این لینک مراجعه کنید.

 

2. از فونت‌های تغییر پذیر استفاده کنید

 

فونت تغیر پذیر

 

فونتهای تغییر پذیر بسیار جدید میباشند و به صورت یک فایل تکی به کاربر ارائه میشود و شامل تمام نسخه‌هایی از یک فونت که طراحی شما را به کاربر نشان دهد است.

در حال حاضر لیست بزرگی از فونتهای تغییر پذیر وجود ندارد اما این موضوع در حال رشد و فراگیر شدن است. جالب است بدانید که لوگوی جدید برنامه Doctor Who شبکه BBC از یک فونت تغییر پذیر سفارشی شده استفاده میکند.

برای استفاده از فونت‌های تغییر پذیر ، باید فونتی را انتخاب کنید که از این ویژگی پشتیبانی کند و یک مرورگر که خاصیت font-variation-settings را اجرا کند.

توصیه میکنیم برای آشنایی بیشتر با این موضوع، حتما به این لینک مراجعه کنید تا خودتان تجربه کار با یک فونت تغییر پذیر و تست آنرا داشته باشید.

 

3.متن‌های متحرک بسازید

 

متن متحرک

 

CSS بر نحوه خواندن و تعامل کاربران با عناصر متن تاثیر می گذارد. چیزی که زمانی فقط یک عنصر استاتیک بود حالا میتواند ویژگی‌های داینامیکی را نشان دهد.

این یک انتخاب بسیار عامه‌پسند برای وبسایت هایی است که عناصر هنری زیادی برای درگیر کردن و ارتباط گرفتن با کاربر ندارند.

برای آزمایش کردن استایل‌های متفاوت و فراوانی که میشود به یک متن متحرک داد حتما به این لینک مراجعه کنید. 

 

4. استفاده از Scroll Snapping

 

Scroll Snapping

 

دفعات زیادی شده که تمایل داشتید روی اسکرول صفحه کنترل داشته باشید ولی نمیدانید چطور. یا به طور مثال میخواهید که حتما کاربر بخشی از طراحی شما را به صورت یکجا و کامل ببیند. راه حل ساده است! تنها باید از Scroll Snapping استفاده کنید.

به زبان ساده، یعنی میتوانید نقاط اسکرول صفحه را هم به صورت عمودی و هم به صورت افقی کنترل کنید. به این ترتیب کاربران آنچه را که دقیقا شما میخواهید، میبینند.

 

در پایان تعدادی مرجع و رفرنس برای یادگیری دقیق‌تر شبکه رسپانسیو به شما معرفی میکنیم:

Understanding the CSS Grid Layout Module

W3Schools CSS Grid Layout Module Basics

Learn CSS Grid

CSS Grid Videos

Introduction to CSS Grid Challenges by FreeCodeCamp

CSS-Tricks Complete Guide to Grid

 

منبع: Design Shack

کد خبر: 2760 | 11:15، 1398-06-24 نسخه چاپی ارسال به

افزودن دیدگاه جدید

  • دیدگاه های ارسال شده توسط شما، پس از تایید در وب سایت منتشر خواهد شد.
  • پیام هایی که حاوی تهمت یا افترا باشد منتشر نخواهد شد.
  • پیام هایی که به غیر از زبان فارسی یا غیر مرتبط با خبر باشد منتشر نخواهد شد.