طريقة إضافة حدود ملونة و متحركة حول عناصر صفحات الويب
في هذا المقال ستتعلم كيف تقوم بوضع العنصر في وسط الصفحة و إظهار حدود متحركة حوله بواسطة 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);
}
}
الآن أصبح يظهر حدود متحركة حول الصورة كالتالي.
الكاتب
هالة حسن
حائزة على إجازة فنية ( ليسنس تقني ) في الأنظمة و الشبكات. مبرمجة هاوية. كاتبة مقالات و محررة دروس في موقع هرمش.
تعليقات 4
أضف تعليق
تقييم المقال
روابط مهمة
حقوق النشر
جميع الحقوق محفوظة لموقع هرمش. لا يسمح باستخدام الشروحات لأغراض تجارية، إجراء تعديل عليها، نشرها في موقع آخر، وضع الشروحات في تطبيق أو في كتاب إلا في حال أخذ موافقة صريحة من إدارة الموقع كما أن المحتوى مسجل بواسطة DMCA و في حال قيامك بمخالفة حقوق النشر سنضطر آسفين لاتخاذ الإجراءات اللازمة.
