انیمیشن های مرزی CSS

نگاهی به چندین روش برای متحرک سازی مرز در CSS

Bramus

تنظیم مرزها

چند روش برای تنظیم حاشیه بر روی یک عنصر وجود دارد: border ، outline ، و box-shadow . همانطور که در 3 روش CSS برای افزودن مرزهای عنصر توسط استفانی اکلز توضیح داده شده است، هر رویکرد دارای مزایا و معایب خاص خود است - به خصوص زمانی که صحبت از متحرک سازی مرزها می شود. دلیل اصلی استفاده نکردن از border CSS مناسب برای اهداف انیمیشن است.

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

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

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

حفظ مدل جعبه

نقطه ضعف استفاده از محتوای تولید شده برای تقلید از یک حاشیه این است که در نهایت با یک مدل جعبه شکسته مواجه می‌شوید: محتوا اکنون می‌تواند مرز تقلبی را مبهم کند زیرا «حاشیه» زیر آن نقاشی شده است. برای کاهش، باید 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 استفاده کنید.

/* 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 قرار دهید. به این ترتیب پس زمینه دیگر زیر ناحیه حاشیه کشیده نمی شود.

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، این امر در مرورگرهایی که از آن پشتیبانی می‌کنند بسیار راحت می‌شود:

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

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

همه با هم ترکیب می شوند، کد این می شود:

محتوای جایزه: border-image

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

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

/* 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 تنظیم شده، بلکه در بالا نقاشی می شود. اگر می خواهید پس زمینه نیمه شفاف باشد، این می تواند دردسرساز باشد.

در بسته شدن

امکانات زیادی برای متحرک سازی مرزها در CSS وجود دارد. بسته به مورد استفاده، ممکن است به یکی یا دیگری متمایل شوید.