الصور المتحركة لحدود CSS

الاطّلاع على عدّة طرق لإضافة تأثيرات متحركة إلى الحدود في CSS

Bramus

ضبط الحدود

هناك بضع طرق متاحة لضبط حدود على عنصر: border وoutline وbox-shadow. كما هو موضّح بالتفصيل في مقالة The 3 CSS Methods for Adding Element Borders (الثلاث طرق لاستخدام CSS لإضافة حدود العناصر) التي كتبتها "ستيفاني إكليس"، تتمتع كل طريقة بمزاياها وعيوبها، خاصةً عندما يتعلق الأمر بإضافة تأثيرات متحركة إلى الحدود. السبب الرئيسي لعدم استخدام border CSS مناسب هو لأغراض الصور المتحركة.

Border Animations using outline-offset by Kevin J. Powell

من المقالات التي لفتت انتباهي مؤخرًا هي Fantastic CSS border animation (تأثيرات حدود رائعة باستخدام CSS)، حيث استكشافت المؤلّفة "كوكو" المزيد من الخيارات. من خلال إدخال محتوى تم إنشاؤه باستخدام ::before و::after، يتم إنشاء حدود زائفة يتم تحريكها بعد ذلك.

ما يلفت انتباهي أكثر هو الرسومات البيانية المتحركة الداعمة المستخدَمة في المقالة. وتساعد هذه المراجع في شرح الإجراءات التي يتم اتّخاذها لتحقيق التأثير المطلوب.

Border Animations باستخدام محتوى من إنشاء شركة 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.

توافق المتصفّح

• 1
• 12
• 4
• 3

المصدر

الإجراءات غير المُوصى بها

/* 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. بهذه الطريقة، لن يتم رسم الخلفية تحت منطقة الحدود.

توافق المتصفّح

• 1
• 12
• 4
• 5

المصدر

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;

Animation

لاستعادة الصورة المتحركة للحدود، يمكنك معالجة زاوية البدء في conic-gradient.

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

بفضل @property، يمكنك إجراء ذلك بسهولة في المتصفّحات التي تتيح ذلك:

توافق المتصفّح

• 85
• 85
• 128
• 16.4

المصدر

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

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

بعد دمج كل هذه العناصر، تصبح التعليمة البرمجية على النحو التالي:

المحتوى الإضافي: border-image

من الطرق التي سبق أن شرحناها لرسم حدود متدرّجة هي استخدام CSS border-image.

توافق المتصفّح

• 16
• 12
• 15
• 6

المصدر

ويتيح لك استخدام رمز أبسط لأنّك لست بحاجة إلى التعامل مع الخلفيات المتداخلة. يمكن تطبيق الصور المتحركة بالطريقة نفسها كما في السابق.

/* 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. ويمكنك الاعتماد على أحدهما أو الآخر حسب حالة الاستخدام.