مقاطع قهرمان با طراحی نامتقارن

در این آموزش، نحوه ساخت بخش های قهرمان با طرح های نامتقارن با استفاده از تبدیل های CSS و ویژگی clip-path را یاد می گیریم.

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

به عنوان مثال، وب سایت Stripe که در زمان نگارش این مقاله، طراحی خود را بر اساس مقاطع اریب/ اریب استوار کرده است.

بخش منحنی از وب سایت Stripe — یک بخش کج از وب سایت Stripe

یا در نظر بگیرید وب سایت ContactPigeon که از یک منحنی در پایین بخش قهرمان استفاده می کند:

روش های ایجاد طرح های نامتقارن

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

در اینجا چند مورد از این تکنیک ها وجود دارد:

تصاویر تنظیم شده یا از طریق <img> در HTML یا پس زمینه در CSS

اشکال SVG

گرادیان های CSS

CSS تبدیل می شود

CSS clip-path ویژگی

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

مقاطع قهرمان با طرح های نامتقارن

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

ما قبلاً اشکال SVG را بررسی کرده‌ایم، بنابراین بیایید دو راه جایگزین CSS برای بهبود بخش‌های قهرمان تمام صفحه با طرح‌های نامتقارن با تمرکز اصلی روی clip-path ویژگی. در هر صورت، همانطور که در دموهای آتی بررسی خواهید کرد، ما به تعریف شبه عناصر کاملاً در موقعیت به عنوان دارندگان این عناصر ادامه خواهیم داد.

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

CSS تبدیل می شود

CSS transform دارایی شامل skew() عملکردی که به ما امکان می دهد عناصر را در یک فضای دو بعدی منحرف کنیم.

مثال زیر را در نظر بگیرید که در آن ما را کج می کنیم ::before شبه عنصر بخش قهرمان:

توجه کنید که ما می دهیم oveflow: hidden به بخش قهرمان برای جلوگیری از سرریز شدن انحراف به قسمت بعدی.

اگر بخواهیم انحراف در طرف دیگر اتفاق بیفتد، باید یک مقدار مثبت به the پاس دهیم skew() تابع.

مسیر کلیپ

Clip-path یک ویژگی مدرن CSS است که در آموزش های قبلی به طور گسترده به آن پرداخته ایم. این به ما کمک می کند بخش هایی از یک عنصر را برش دهیم و فقط بخش خاصی از آن را نشان دهیم. ناحیه مرئی را می توان با اشکال هندسی مختلف مانند دایره، بیضی، چندضلعی و مستطیل نشان داد.

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