ما این را به دو روش مختلف ایجاد می کنیم تا درک خوبی از ویژگی های مختلف CSS داشته باشید. می توانید از این الگوی رابط کاربری در قسمت های مختلف سایت خود استفاده کنید، به عنوان مثال:

  • برای معرفی اعضای تیم
  • برای نمایش پست ها/محصولات برگزیده یا جدید
  • برای فهرست کردن توصیفات

مانند هر ویژگی جدید CSS، بسته به مرورگری که برای بررسی نسخه‌های نمایشی استفاده می‌کنید، ممکن است تناقضاتی مشاهده کنید. به عنوان مثال، کروم نوار اسکرول سفارشی ما را نشان می دهد، در حالی که فایرفاکس همچنان نوار اسکرول پیش فرض را نشان می دهد. این را در نظر داشته باشید و حتما بررسی کنید caniuse.com برای پشتیبانی مرورگر از ویژگی های مختلف front-end.

رابط کاربری اسکرول کارت ما

اولین نسخه کامپوننت تمام شده ما را که از flexbox برای طرح بندی شبکه استفاده می کند، بررسی کنید:

و در اینجا دومین نسخه از مؤلفه نهایی ما است که از CSS Grid برای طرح بندی شبکه استفاده می کند:

سعی کنید هر کدام را به گونه‌ای پیمایش کنید که نصف کارت در لبه قابل مشاهده باشد—ببینید که چگونه رفتار پیمایشی کارت‌ها را به‌طور خودکار در موقعیت خود قرار می‌دهد!

1. Layout را تعیین کنید

بیایید کارها را با بحث در مورد الزامات پروژه شروع کنیم.

ما باید یک طرح کارت قابل پیمایش تطبیقی ​​ایجاد کنیم. تعداد کارت هایی که در نمای ظاهر می شوند بسته به اندازه ویوپورت تغییر می کند.

در اینجا یک جدول مفید وجود دارد که در آن ثبت می کنیم که چیدمان (شبکه) ما چگونه باید در صفحه های مختلف رفتار کند:








صفحه نمایش اندازه درگاه دید ستون های شبکه شکاف شبکه
X-Small < 500 پیکسل 1 10 پیکسل
کم اهمیت ≥ 500 پیکسل 2 20 پیکسل
متوسط ≥ 700 پیکسل 3 30 پیکسل
بزرگ ≥ 1100 پیکسل 4 40 پیکسل

برای تجسم چیزها، on صفحه نمایش کوچک اضافی، طرح به این صورت خواهد بود:

طرح کارت روی صفحه نمایش تا 499 پیکسلطرح کارت روی صفحه نمایش تا 499 پیکسلطرح کارت روی صفحه نمایش تا 499 پیکسل

Oدر صفحه نمایش های کوچک، به شکل زیر خواهد بود:

چیدمان کارت روی صفحه نمایش های بین 500 تا 699 پیکسلچیدمان کارت روی صفحه نمایش های بین 500 تا 699 پیکسلچیدمان کارت روی صفحه نمایش های بین 500 تا 699 پیکسل

On صفحه نمایش متوسط، این ظاهر را خواهد داشت:

چیدمان کارت روی صفحه نمایش های بین 700 تا 1099 پیکسلچیدمان کارت روی صفحه نمایش های بین 700 تا 1099 پیکسلچیدمان کارت روی صفحه نمایش های بین 700 تا 1099 پیکسل

در نهایت، در صفحه نمایش های بزرگ، به صورت زیر خواهد بود:

طرح بندی کارت در صفحه نمایش های بزرگتر از 1099 پیکسلطرح بندی کارت در صفحه نمایش های بزرگتر از 1099 پیکسلطرح بندی کارت در صفحه نمایش های بزرگتر از 1099 پیکسل

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

این اثر در صفحه‌های موبایل که تنها یک کارت ظاهر می‌شود، واضح‌تر خواهد بود و با کشیدن انگشت، کارت مجاور به داخل می‌لغزد.

برای درک بهتر آنچه که من توضیح می دهم، ویدیوی زیر را در نظر بگیرید، یا حتی بهتر، نسخه های نمایشی با اندازه های مختلف صفحه نمایش را بررسی کنید:


2. علامت گذاری HTML را تعریف کنید

ما از یک ساختار کاملاً ساده برای این کار استفاده خواهیم کرد: یک عنصر ظرف با عنوان و لیستی از کارت‌ها در داخل آن. هر کارت حاوی عنوان، محتوا و پیوند خواهد بود. ما این عناصر را در اطراف مقداری اضافی قرار می دهیم divs برای اطمینان از اینکه دکمه پیوند همیشه در پایین کارت قرار می گیرد.

این نشانه گذاری است:

3. سبک های اصلی را مشخص کنید

برای ساخت چیدمان مورد نظر و به خصوص گرید می توانیم از تکنیک های چیدمان مختلفی استفاده کنیم. ما با یک رویکرد flexbox شروع می کنیم و سپس با یک CSS Grid ادامه می دهیم.

برای سادگی، ما فقط قسمت های مهم CSS را مورد بحث قرار می دهیم.

همه کارت‌ها در ظرفی قرار می‌گیرند که دارای عرض 1400 پیکسل است.

رابط کاربری کارت فلکس باکس

نکات کلیدی در مورد بسته بندی کارت:

  • این یک ظرف انعطاف پذیر خواهد بود.
  • خواهد داشت overflow-x: scroll، همانطور که می خواهیم به صورت افقی اسکرول کنیم تا همه کارت ها را ببینیم.
  • ما به یک نوار اسکرول سفارشی نیاز داریم که با رنگ های برند ما مطابقت داشته باشد، با این فرض که رنگ اصلی برند ما قرمز تیره است.

نکات کلیدی در مورد هر کارت:

  • این یک ظرف انعطاف پذیر با flex-direction تنظیم کنید column. این بدان معنی است که اقلام انعطاف پذیر به صورت عمودی در امتداد محور اصلی قرار می گیرند.
  • همانطور که قبلاً گفته شد، دکمه پیوند همیشه باید مستقل از عنوان و طول محتوای هر کارت در پایین باشد. بنابراین برای دستیابی به این یکنواختی، ما بسته بندی لینک والد را می دهیم margin-top: auto.
  • ما آن را می دهیم flex-shrink: 0 چون نمی خواهیم کوچک شویم و از آن استفاده کنیم flex-basis ویژگی برای تنظیم عرض آن. را flex-grow دارایی به ما علاقه ای ندارد، بنابراین پیش فرض را حفظ می کنیم 0 ارزش. عرض به اندازه صفحه و حاشیه بین کارت های مجاور بستگی دارد. بیایید توضیح دهیم.

در صفحه های بسیار کوچک، همه کارت ها دارای عرضی برابر با عرض والد خواهند بود.

برای محاسبه عرض کارت در صفحه نمایش های کوچک، این محاسبات را انجام می دهیم:

طرح کارت در صفحه نمایش های کوچک توضیح داده شده استطرح کارت در صفحه نمایش های کوچک توضیح داده شده استطرح کارت در صفحه نمایش های کوچک توضیح داده شده است

  • فضای کل بین کارت های قابل مشاهده = 1 * 20px => 20px. فضای کارت آخر را حذف می کنیم.
  • عرض هر کارت = calc (50٪ – 10px). مقدار 10px بدست آمده با محاسبه: فضای کل بین کارت های قابل مشاهده / تعداد کارت های قابل مشاهده (20px / 2 => 10px).

برای محاسبه عرض کارت در صفحه های متوسط، این محاسبات را انجام می دهیم:

طرح کارت در صفحه نمایش متوسط ​​توضیح داده شده استطرح کارت در صفحه نمایش متوسط ​​توضیح داده شده استطرح کارت در صفحه نمایش متوسط ​​توضیح داده شده است

  • فضای کل بین کارت های قابل مشاهده = 2 * 30px => 60px. فضای کارت آخر را حذف می کنیم.
  • عرض هر کارت = calc (calc (100٪ / 3) – 20px). مقدار 20px بدست آمده با محاسبه: فضای کل بین کارت های قابل مشاهده / تعداد کارت های قابل مشاهده (60px / 3 => 20px).

نکته

ما به یک طرح سه ستونی نیاز داریم. بنابراین به جای نوشتن calc (33.333% – 20px)، به مرورگرها اجازه می‌دهیم با افزودن یک محاسبه تودرتو، درصد دقیق را تعیین کنند.

برای محاسبه عرض کارت در صفحات بزرگ، این محاسبات را انجام می دهیم:

طرح کارت در صفحه نمایش های بزرگ توضیح داده شده استطرح کارت در صفحه نمایش های بزرگ توضیح داده شده استطرح کارت در صفحه نمایش های بزرگ توضیح داده شده است

  • فضای کل بین کارت های قابل مشاهده = 3 * 40px => 120px. فضای کارت آخر را حذف می کنیم.
  • عرض هر کارت = calc (25٪ – 30px). مقدار 30px بدست آمده با محاسبه: فضای کل بین کارت های قابل مشاهده / تعداد کارت های قابل مشاهده (120px / 4 => 30px).

برای قفل کردن ویوپورت در برخی از عناصر پس از اتمام اسکرول، از ویژگی CSS Scroll Snap استفاده می کنیم. که گفت:

  • بسته بندی کارت دریافت خواهد کرد scroll-snap-type: x mandatory ارزش ملک این تضمین می کند که مرورگر به محض اتمام پیمایش کاربر به یک نقطه ضربه محکم و ناگهانی می رسد.
  • هر کارت دریافت خواهد کرد scroll-snap-align: start ارزش ملک این قسمتی از کارت را مشخص می کند که در آن پیمایش باید متوقف شود. سعی کنید به آن ارزش دیگری مانند center برای دیدن تفاوت

همچنین سعی کنید بدون فعال بودن این دو ویژگی پیمایش کنید تا تفاوت را ببینید.

در اینجا مهمترین سبک ها آورده شده است:

و نسخه ی نمایشی CodePen مربوطه که در آن می توانید تمام سبک ها را بررسی کنید:

رابط کاربری کارت شبکه CSS

در این رویکرد دوم، ما همان طرح کارت را ایجاد می کنیم، اما با CSS Grid.

طرح بندی شبکه CSSطرح بندی شبکه CSSطرح بندی شبکه CSS

در اینجا اصلاحاتی وجود دارد که اعمال خواهیم کرد:

  • بسته بندی کارت یک ظرف توری خواهد بود.
  • همه موارد شبکه را به لطف grid-auto-flow: column ارزش ملک
  • ما استفاده خواهیم کرد grid-auto-columns ویژگی برای تنظیم اندازه برای ستون ها. اندازه ستون به اندازه صفحه و فاصله بین هر ستون بستگی دارد. محاسبات دقیقاً همان است که قبلاً با آن انجام دادیم flex-basis ویژگی. بنابراین، ارزش های grid-auto-columns دارایی با مقادیر فوق مطابقت خواهد داشت flex-basis دارایی در هر اندازه صفحه نمایش

اطلاعات

ما ویژگی flex-basis را به آیتم flex اعمال کردیم، سپس ویژگی grid-auto-columns (و به طور کلی تمام ویژگی‌های CSS Grid) را در ظرف شبکه اعمال کردیم.

در اینجا سبک های اصلاح شده آمده است:

و دوباره، نسخه ی نمایشی CodePen مربوطه که در آن می توانید تمام سبک ها را بررسی کنید:

نتیجه

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

اگر می توانید راه دیگری برای ساخت این طرح فکر کنید، فراموش نکنید آن را با ما به اشتراک بگذارید! مثل همیشه، خیلی ممنون که خواندید!

آموزش Flexbox در Tuts+

Flexbox بخش بسیار پیچیده ای از CSS است، اما نگران نباشید، ما شما را تحت پوشش قرار داده ایم!