طريقة إضافة حدود ملونة و متحركة حول عناصر صفحات الويب
في هذا المقال ستتعلم كيف تقوم بوضع العنصر في وسط الصفحة و إظهار حدود متحركة حوله بواسطة HTML و CSS فقط.
المرحلة الأولى
أول شيء نبدأ به هو كتابة كود 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); } }
الآن أصبح يظهر حدود متحركة حول الصورة كالتالي.
CSS
