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

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

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

    تجربة الكود في محرر هرمش


    يتضمن: HTML , CSS

    آخر تحديث: 12-1-2022

    الكاتب

    هالة حسن

    لا يوجد معلومات متاحة حول الكاتب.

    تعليقات 3

    أضف تعليق

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

    تقييم المقال

    لم تقم بتقييم المقال بعد!

    الدورات

    أدوات مساعدة

    الأقسام

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