Learn Typing Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Computer Fundamentals English English Conversations Problem Solving

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

في هذا المقال ستتعلم كيف تقوم بوضع العنصر في وسط الصفحة و إظهار حدود متحركة حوله بواسطة 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>
<!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 بكسل */
}
* { /* النجمة تعني أن الخصائص التالية سيتم تطبيقها على جميع عناصر الصفحة */ 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);
}
}
/* 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); } }

الآن أصبح يظهر حدود متحركة حول الصورة كالتالي.

جرب الكود

آخر تحديث في 06-01-2024

الكاتب

هالة حسن

حائزة على إجازة فنية ( ليسنس تقني ) في الأنظمة و الشبكات. مبرمجة هاوية. كاتبة مقالات و محررة دروس في موقع هرمش.

تعليقات 4

أضف تعليق

يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة