طريقة إضافة حدود ملونة و متحركة حول عناصر صفحات الويب

في هذا المقال ستتعلم كيف تقوم بوضع العنصر في وسط الصفحة و إظهار حدود متحركة حوله بواسطة HTML و CSS فقط.

المرحلة الأولى

أول شيء نبدأ به هو كتابة كود HTML الذي نحدد بواسطتها العناصر الأساسية التي نحتاجها في الصفحة.

الكود

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centered Image with animated borders</title>
</head>
<body>
    <div class="box">
        <img src="/posts/142/f0e1fa11-67f6-4fc5-b6de-0559f1863c7e_harmash-logo.png"> 
    </div>
</body>
</html>

الكود السابق يقوم بإظهار الصورة في الصفحة فقط كالتالي و لاحظ أنها لا تظهر في وسطها و لا يظهر أي مؤثرات بعد.

تجربة الكود

المرحلة الثانية

الآن سنقوم بإضافة كود CSS مهمته جعل لون خلفية الصفحة سوداء و الصورة تظهر في وسط الصفحة. لفعل ذلك سنجعل الوسم <div> الموضوعة فيه الصورة يظهر في وسط الصفحة و هكذا الصورة بدورها ستظهر في وسط الصفحة لأنها موضوعة بداخله.

الكود

* {                         /* النجمة تعني أن الخصائص التالية سيتم تطبيقها على جميع عناصر الصفحة */
  margin: 0;                /* لإزالة الفراغ الخارجي الإفتراضي التي يضيفها المتصفح للعناصر بشكل تلقائي */
  padding: 0;               /* لإزالة الفراغ الداخلي الإفتراضي التي يضيفها المتصفح للعناصر بشكل تلقائي */
  box-sizing: border-box;   /* لجعل الفراغ الخارجي و حدود العناصر يتم إحتسابها ضمن المساحة التي نحددها للعناصر */
}

html {
  height: 100%;  /* body هنا قمنا بتحديد أن محتوى الصفحة سيظهر عليها بالكامل و هذا الأمر مهم من أجل العنصر */
}

body {
  min-height: 100%;        /* هنا حددنا أن محتوى الصفحة سيظهر على الأقل على كل محتوى الصفحة عمودياً */
  display: flex;           /* flex هنا قمنا بتحديد أن أول شيء نضعه في الصفحة سيتم ترتيبه بأسلوب و خصائص */
  justify-content: center; /* هنا حددنا أن أول عنصر يضاف في الصفحة سيظهر في وسطها أفقياً */
  align-items: center;     /* هنا حددنا أن أول عنصر يضاف في الصفحة سيظهر في وسطها عمودياً */
  background-color: #000;  /* هنا قمنا بجعل لون خلفية الصفحة أسود */
}

.box {
  position: relative;      /* نسبةً له ::after و ::before أضفنا له هذه الخاصية حتى نتمكن من عرض الحدود بواسطة */
  width: 300px;            /* هنا حددنا أن عرضه 300 بكسل */
  height: 360px;           /* هنا حددنا أن طوله 360 بكسل */
  display: flex;           /* flex هنا قمنا بتحديد أن أي شيء نضعه فيه سيتم ترتيبه بأسلوب و خصائص */
  justify-content: center; /* هنا حددنا أن أي عنصر نضعه بداخله سيوضع في وسطه أفقياً */
  align-items: center;     /* هنا حددنا أن أي عنصر نضعه بداخله سيوضع في وسطه عمودياً */
  overflow: hidden;        /* أضفنا هذه الخاصية لإخفاء أي جزء زائد موضوع داخل الوسم حتى لا يظهر خارج حدوده */
  border-radius: 20px;     /* هنا حددنا أن حدوده مائلة بنسبة 20 بكسل حتى لا تظهر بشكل حواف حادة */
}

.box img {
  z-index: 1;              /* هنا جعلنا الصورة تظهر أما الوسم الموضوعة بداخله حتى تظهر فوق المؤثرات التي سنعرضعها خلفها */
  width: 180px;            /* هنا حددنا أن عرض الصورة هو 180 بكسل */
}

الآن أصبحت خلفية الصفحة سوداء و الصورة ظاهرة في وسطها كالتالي.

جرب الكود

المرحلة الثالثة

الآن سنقوم بإضافة كود CSS مهمته إظهار حدود متحرّكة حول الصورة. فعلياً سنقوم بإضافة طبقة تحت العنصر <div> بواسطة الخاصية before:: تمثل مستطيل لونه أزرق و أبيض, و طبقة فوق العنصر <div> بواسطة الخاصية ::after الهدف منها إخفاء الأجزاء الملونة من الطبقة السفلية حتى لا تظهر الصورة.

الكود

/* div باختصار هنا أضفنا مستطيل لونه مزيج بين الأزرق و الأبيض, يدور في مكانه خلف الصورة الموضوعة في الوسم */
.box::before {        /* هنا أضفنا عنصر في بداية الوسم و قبل الصورة و هذا سيكون بمثابة الخط الذي يتحرك */
  position: absolute; /* هنا قمنا بتحديد أنه سيتم وضعه في الوسط تماماً كالعنصر الأب له */
  content: " ";       /* هنا قمنا بتحديد أن محتواه سيكون فراغ لأننا مجبرين على تحديد ما سيحتويه */
  width: 150px;       /* هنا قمنا بتحديد أن عرضه 150 بكسل لأن هذا العرض يكفي ليظهر الخط على كامل المربع الذي سيتم عرضه فيه */
  height: 140%;       /* هنا قمنا بتحديد أن طوله 140 بالمئة لأن هذا العرض يكفي ليظهر الخط على كامل المربع الذي سيتم عرضه فيه */
  background: linear-gradient(#0041ff, rgb(253 251 251));  /* هنا حددنا أن لونه سيكون مزيج بين الأبيض و الأزرق */
  animation: animate 4s linear infinite;  /* animation هنا حددنا أنه سيطبق المؤثرات التي حددناها بإسم */
}

/* باختصار, هنا أضفنا مربع أسود فوق المربع الذي يدور و قربناه للداخل بنسبة 5 بكسل حتى تظل حدوده التي سيظهر المربع و هو يدور عليها ظاهرة و الباقي مخفي */
.box::after {
  content: "";          /* هنا قمنا بتحديد أن محتواه سيكون فراغ لأننا مجبرين على تحديد ما سيحتويه */
  position: absolute;   /* هنا قمنا بتحديد أنه سيتم وضعه في الوسط تماماً كالعنصر الأب له */
  inset: 5px;           /* هنا قمنا بإبعاده عن حدود العنصر الأب له بمقدار 5 بكسل من كل الجهات */
  background: #000;     /* هنا جعلنا لون خلفيته أسود مثل خلفية الصفحة حتى يخفي الجزء الذي لا نحتاجه من المربع الموضوع خلفه */
  border-radius: 20px;  /* هنا حددنا أن حدوده مائلة بنسبة 20 بكسل حتى لا يظهر المربع الذي سيدور خلفه مقطوع عند الزوايا */
}

/* كإسم animation هنا قمنا بتعريف أنيمشين أعطيناه */
/* العنصر الذي يقوم باستدعاء هذا الأنيمشين يتم تدويره في مكانه فقط */
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}