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

الاطّلاع على عدة طرق لتحريك حدود في CSS

براموس

ضبط الحدود

تتوفّر بضع طرق لضبط حد على عنصر: border وoutline وbox-shadow. على النحو الموضَّح في طرق 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;

Animation

لاستعادة مؤثر حركي للحدود، يمكنك تعديل زاوية البدء للحدود 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. اعتمادًا على حالة الاستخدام، قد تميل إلى أحدهما أو الآخر.