پویانمایی‌های حاشیه CSS

بررسی چند روش برای پویانمایی حاشیه در CSS

Bramus

تنظیم حاشیه‌ها

چند روش برای تنظیم حاشیه روی عنصر وجود دارد: border، outline، و box-shadow. همان‌طور که در The 3 CSS Methods for Adding Element Borders (۳ روش CSS برای افزودن حاشیه به عناصر) نوشته استفانی اکلز به‌تفصیل توضیح داده شده است، هر رویکرد مزایا و معایب خاص خود را دارد، به‌ویژه وقتی صحبت از پویانمایی حاشیه‌ها باشد. دلیل اصلی برای استفاده نکردن از border CSS مناسب، اهداف پویانمایی است.

پویانمایی‌های حاشیه بااستفاده از outline-offset توسط Kevin J. Powell

مقاله‌ای که اخیراً توجه من را جلب کرد پویانمایی حاشیه CSS فوق‌العاده است که در آن نویسنده Coco گزینه‌های بیشتری را بررسی کرده است. با تزریق محتوای تولیدشده بااستفاده از ::before و ::after، حاشیه‌ای مصنوعی ایجاد می‌کنند که سپس پویانمایی می‌شود.

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

پویانمایی‌های حاشیه بااستفاده از محتوای تولیدشده توسط Coco

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

حفظ کردن مدل چارگوش

یکی از معایب استفاده از «محتوای تولیدشده» برای تقلید حاشیه این است که درنهایت با یک مدل جعبه خراب مواجه می‌شوید: محتوا اکنون می‌تواند حاشیه مصنوعی را پنهان کند زیرا «حاشیه» مذکور در زیر آن ترسیم شده است. برای کاهش دادن، باید border-width موردنظر را به‌عنوان padding اعمال کنید.

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

اصول اولیه

بیایید با ایجاد حاشیه نقطه‌چین و افزودن چند پس‌زمینه شروع کنیم.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

درحال تغییر اندازه پس‌زمینه‌ها با background-origin

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

برای حل این مشکل، باید پس‌زمینه را بکشید تا اندازه حاشیه را نیز اشغال کند. می‌توانید این کار را به‌صورت دستی با کشیدن و تغییر موقعیت پس‌زمینه انجام دهید، اما بهترین روش استفاده از ویژگی background-origin برای تنظیم اندازه پس‌زمینه نسبت به border-box است.

Browser Support

• 1
• 12
• 4
• 3

Source

موارد غیرمجاز

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

انجام دهید

background-origin: border-box;

این یک افزودنی باعث می‌شود همه چیز خیلی بهتر به‌نظر برسد:

کوچک کردن لایه پس‌زمینه سفید با background-clip

اکنون که پس‌زمینه‌ها کل فضا را اشغال کرده‌اند، لایه نیمه‌شفاف باید دوباره کوچک شود. به‌جای اینکه دوباره با background-size کلنجار بروید، راه آسان‌تری برای انجام این کار وجود دارد: از background-clip استفاده کنید و آن را روی padding-box تنظیم کنید. به این ترتیب، پس‌زمینه دیگر زیر ناحیه حاشیه کشیده نمی‌شود.

Browser Support

• 1
• 12
• 4
• 5

Source

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

درنهایت، حاشیه را transparent کنید تا جلوه کامل را داشته باشید.

border: 0.3rem dotted transparent;

پویانمایی

برای بازیابی پویانمایی حاشیه، می‌توانید زاویه شروع conic-gradient را دستکاری کنید.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

به‌لطف @property، این کار در مرورگرهایی که از آن پشتیبانی می‌کنند بسیار آسان می‌شود:

Browser Support

• 85
• 85
• 128
• 16.4

Source

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

وقتی همه را ترکیب کنید، کد به این شکل درمی‌آید:

محتوای تشویقی: border-image

یک رویکرد قبلاً پوشش‌داده‌شده برای رسم حاشیه گرادیان، استفاده از CSS border-image است.

Browser Support

• 16
• 12
• 15
• 6

Source

این کار باعث ساده‌تر شدن کد می‌شود زیرا نیازی نیست با پس‌زمینه‌های هم‌پوشان سروکار داشته باشید. پویانمایی را می‌توان به همان روش قبلی اعمال کرد.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

بااین‌حال، متوجه خواهید شد که چند چیز دیگر با این رویکرد کار نمی‌کند:

• border-image از border-radius پیروی نمی‌کند؛ همیشه مستطیلی باقی می‌ماند.
• هنگام تنظیم border-image-slice برای پر کردن، border-image زیر background تنظیم‌شده رنگ‌آمیزی نمی‌شود بلکه روی آن رنگ‌آمیزی می‌شود. اگر بخواهید پس‌زمینه نیمه‌شفاف باشد، این موضوع می‌تواند مشکل‌ساز شود.

در پایان

There’s a multitude of possibilities to animate borders in CSS. بسته به مورد استفاده، ممکن است به یکی یا دیگری متمایل شوید.