شکل های روبان چند خطی پاسخگو CSS (قسمت 1) – مجله Smashing

در اوایل دهه 2010، اجتناب از شکل های روبان در طراحی های وب تقریبا غیرممکن بود. در واقع در سال 2010 بود که کریس کویر یک قطعه CSS را به اشتراک گذاشت که مطمئنم هزاران بار استفاده شده است.

و دلیل خوبی دارد: روبان ها سرگرم کننده و جالب هستند. آنها اغلب برای سرفصل ها استفاده می شوند، اما البته این همه چیز نیست. روبان‌های گوشه‌ای را روی کارت‌های محصول («فروش!»)، نشان‌هایی با انتهای روبان بریده‌شده («اولین مکان!»)، یا حتی روبان‌هایی به عنوان نماد نشانک‌ها پیدا خواهید کرد. روبان ها بازیگوش هستند، دور عناصر پیچیده می شوند، به عمق و لنگرهای بصری اضافه می کنند تا توجه چشم را جلب کنند.

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

در اینجا یک نسخه ی نمایشی از آنچه در این قسمت اول می سازیم آمده است:

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

چگونه کار می کند؟

ما به یک عنصر HTML تکیه می کنیم <h1> در این مورد، اگرچه می‌توانید از هر عنصری که می‌خواهید استفاده کنید تا زمانی که حاوی متن باشد.

<h1>Your text goes here</h1>

حالا اگر به شکل های روبان دقت کنید، متوجه یک چیدمان کلی می شوید که برای هر دو طرح یکسان است. واقعاً یک قطعه وجود دارد که بارها و بارها تکرار می شود.

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

هر دو روبان در نسخه ی نمایشی که به آن نگاه کردیم تقریباً با استفاده از CSS دقیقاً یکسان ساخته شده اند. تنها تفاوت‌ها تفاوت‌های ظریفی است که به تمایز آنها کمک می‌کند، مانند رنگ و دکوراسیون. این سس مخفی من است! بیشتر روبان ها از ژنراتور من یک ساختار کد مشترک را به اشتراک می‌گذارد، و من فقط چند مقدار را برای دریافت تغییرات مختلف تنظیم می‌کنم.

بیایید با گرادیان ها شروع کنیم

هر بار که می شنوم که طراحی یک جزء نیاز به تکرار دارد، فوراً به شیب پس زمینه فکر می کنم. آنها برای ایجاد الگوهای تکرارپذیر عالی هستند و می توانند خطوطی با توقف های سخت بین رنگ ها بکشند.

ما در اصل در مورد اعمال پس زمینه در پشت یک عنصر متن صحبت می کنیم. هر خط از متن پس‌زمینه را دریافت می‌کند و به تعداد خطوط متنی که اتفاقاً وجود دارد، تکرار می‌شود. بنابراین، گرادیان باید به اندازه یک خط متن باشد. اگر نمی دانستید، ما اخیراً ارتفاع خط جدید را دریافت کردیم (lh) واحد در CSS که به ما امکان می دهد مقدار محاسبه شده عنصر را بدست آوریم line-height. در مورد ما، 1lh همیشه برابر با ارتفاع یک خط متن خواهد بود که برای آنچه ما نیاز داریم عالی است.

توجه داشته باشید: به نظر می رسد که سافاری از ارتفاع خط محاسبه شده یک عنصر والد به جای پایه گذاری آن استفاده می کند lh واحد روی خود عنصر من آن را در کد با تنظیم صریح a به حساب آورده ام line-height بر روی body عنصر، که در مورد خاص ما والد است. اما امیدوارم که در آینده ای غیر ضروری باشد.

بیایید به اولین گرادیان خود بپردازیم. این یک شکل مستطیلی در پشت متن است که بخشی از خط را می پوشاند و فضای تنفسی بین خطوط باقی می گذارد.

رنگ قرمز گرادیان روی تنظیم شده است 70% از ارتفاع، که برگ 30% رنگ شفاف برای در نظر گرفتن فضای بین خطوط.

h1 {
  --c: #d81a14;
  
  background-image: linear-gradient(var(--c) 70%, #0000 0);
  background-position: 0 .15lh;
  background-size: 100% 1lh;
}

هیچ چیز خیلی پیچیده ای نیست، درست است؟ ما یک گرادیان پس‌زمینه روی یک ایجاد کرده‌ایم h1 عنصر رنگ با یک متغیر CSS کنترل می شود (--c) و ما آن را با lh واحد برای تراز کردن آن با محتوای متن.

توجه داشته باشید که افست (.15lh) برابر با نصف فاصله بین خطوط است. ما می توانستیم از یک گرادیان با سه مقدار رنگ استفاده کنیم (مثلا، transparent، #d81a14، و transparent)، اما کارآمدتر و خواناتر است که چیزها را در دو رنگ نگه دارید و سپس یک افست اعمال کنید.

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

در اینجا نحوه برخورد من با آن است:

linear-gradient(to bottom right, #0000 50%, red 0 X, #0000 0);

این بار از کلمات کلیدی برای تنظیم جهت گرادیان استفاده می کنیم (to bottom right). در همین حال، رنگ از مورب شروع می شود (50%) به جای پیش فرض آن 0% و باید در مقداری که ما به عنوان آن را نشان می دهیم متوقف شود X برای یک مکان نگهدار این مقدار کمی مشکل است، بنابراین بیایید تصویری را دریافت کنیم که آنچه را که انجام می دهیم را نشان می دهد.

فلش سبز جهت گرادیان را نشان می دهد و ما می توانیم توقف های رنگی مختلف را ببینیم: 50%، X، و 100%. ما می توانیم برخی از قوانین هندسه را برای حل اعمال کنیم X:

(X - 50%) / (100% - 50%) = 70%/100%
X = 85%

این نقطه دقیق پایان توقف رنگ سخت گرادیان را به ما می دهد. ما می توانیم اعمال کنیم 85% مقدار برای پیکربندی گرادیان ما در CSS:

h1 {
  --c: #d81a14;
  
  background-image: 
    linear-gradient(var(--c) 70%, #0000 0), 
    linear-gradient(to bottom left, #0000 50%, color-mix(in srgb, var(--c), #000 40%) 0 85%, #0000 0);
  background-position: 0 .15lh;
  background-size: 100% 1lh;
}

احتمالاً متوجه شده اید که من جدید را اضافه کردم color-mix() تابع به گرادیان دوم حالا چرا معرفیش کنید؟ زیرا می توانیم از آن برای مخلوط کردن رنگ اصلی استفاده کنیم (#d81a14) با سفید یا سیاه. این به ما اجازه می دهد برای بدست آوردن مقادیر تیره یا روشن تر رنگ بدون نیاز به معرفی مقادیر رنگ و متغیرهای بیشتری به ترکیب. این به کارآمد نگه داشتن کارها کمک می کند!

ما قطعه اصلی طراحی را انجام داده ایم! ما می توانیم توجه خود را به ایجاد شکل روبان معطوف کنیم. متوجه تکرار ناخواسته در بالا و پایین خواهید شد. نگران آن نباش؛ در بخش بعدی رفع خواهد شد.

بعد، بیایید روبان ها را بسازیم

قبل از اینکه وارد خانه شویم، بیایید یک لحظه به یاد بیاوریم که در حال ساخت دو روبان هستیم. نسخه ی نمایشی در ابتدای این مقاله دو مثال ارائه می دهد: یکی قرمز و دیگری سبز. آنها در ساختار مشابه هستند اما در جزئیات بصری متفاوت هستند.

برای مورد اول، ابتدا و انتهای روبان را می گیریم و اساساً یک مثلث را از آن جدا می کنیم. کار مشابهی را با مثال روبان دوم با یک مرحله تا زدن اضافی برای قسمت برش انجام خواهیم داد.

روبان اول

تنها کاری که باید برای اولین روبان انجام دهیم این است که a clip-path برای برش دادن شکل مثلثی از انتهای روبان در حالی که مصنوعات ناخواسته را از شیب تکراری در بالا و پایین روبان کوتاه کنید.

ما همه مختصاتی را داریم که برای برش هایمان با استفاده از آن نیاز داریم polygon() عملکرد بر روی clip-path ویژگی. مختصات همیشه شهودی نیستند، اما من کد را گسترش داده و چند نظر در زیر اضافه کرده ام تا به شما کمک کنم برخی از نکات را در شکل شناسایی کنید.

h1 {
  --r: 10px; /* control the cutout */

  clip-path: polygon(
   0 .15lh, /* top-left corner */
   100% .15lh, /* top right corner */
   calc(100% - var(--r)) .5lh, /* top-right cutout */
   100% .85lh,
   100% calc(100% - .15lh), /* bottom-right corner  */
   0 calc(100% - .15lh), /* bottom-left corner */
   var(--r) calc(100% - .5lh), /* bottom-left cutout */
   0 calc(100% - .85lh)
  );
}

این اولین روبان را کامل می کند! اکنون، می‌توانیم چیزها را با روبان دوم بپیچیم (جناسی در نظر گرفته شده).

روبان دوم

برای تکمیل شکل از هر دو شبه عنصر استفاده می کنیم. این ایده را می توان به صورت زیر تجزیه کرد:

1. ما دو مستطیل ایجاد کنید که در ابتدا و انتهای روبان قرار می گیرند.
2. ما دو مستطیل را بچرخانید با زاویه ای که با استفاده از یک متغیر جدید تعریف می کنیم، --a.
3. ما اعمال a clip-path برای ایجاد برش مثلث و برش جایی که گرادیان سبز از بالا و پایین شکل سرریز می کند.

ابتدا متغیرها:

h1 {
  --r: 10px;  /* controls the cutout */
  --a: 20deg; /* controls the rotation */
  --s: 6em;   /* controls the size */
}

در مرحله بعد، ما استایل ها را به :before و :after شبه عناصری که در آنها مشترک است:

h1:before,
h1:after {
  content: "";
  position: absolute;
  height: .7lh;
  width: var(--s);
  background: color-mix(in srgb, var(--c), #000 40%);
  rotate: var(--a);
}

سپس، هر شبه عنصر را قرار می دهیم و کلیپ های خود را می سازیم:

h1:before {
  top: .15lh;
  right: 0;
  transform-origin: top right;
  clip-path: polygon(0 0, 100% 0, calc(100% - .7lh / tan(var(--a))) 100%, 0 100%, var(--r) 50%);
}

h1:after {
  bottom: .15lh;
  left: 0;
  transform-origin: bottom left;
  clip-path: polygon(calc(.7lh / tan(var(--a))) 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, 0 100%);
}

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

این است clip-path دوباره برای نجات، این بار روی عنصر اصلی:

clip-path: polygon(
    0 .15lh,
    calc(100% - .7lh/sin(var(--a))) .15lh,
    calc(100% - .7lh/sin(var(--a)) - 999px) calc(.15lh - 999px*tan(var(--a))),
    100% -999px,
    100% .15lh,
    calc(100% - .7lh*tan(var(--a)/2)) .85lh,
    100% 1lh,
    100% calc(100% - .15lh),
    calc(.7lh/sin(var(--a))) calc(100% - .15lh),
    calc(.7lh/sin(var(--a)) + 999px) calc(100% - .15lh + 999px*tan(var(--a))),
    0 999px,
    0 calc(100% - .15lh),
    calc(.7lh*tan(var(--a)/2)) calc(100% - .85lh),
    0 calc(100% - 1lh)
);

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

روبان دوم ما تکمیل شد! در اینجا نسخه ی نمایشی کامل دوباره با هر دو تغییر است.

بسته بندی

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

هنوز هم می توانید کد را در داخل پیدا کنید مجموعه روبان های من، اما تمرین خوبی برای نوشتن کد بدون آن است. شاید پیاده سازی متفاوتی نسبت به من پیدا کنید و بخواهید آن را در نظرات با من به اشتراک بگذارید! در مقاله بعدی این مجموعه دو قسمتی، پیچیدگی را افزایش داده و دو شکل روبانی جالب دیگر را تولید خواهیم کرد.

مطالعه بیشتر در SmashingMag

(gg, yk)