معرض بطاقات تفاعلي بتأثيرات موجية مميزة

شرح كود البطاقات ذات التأثيرات الموجية

css Cards Gallery

تحليل مفصل لتقنية CSS وSVG Filters لإنشاء معرض بطاقات تفاعلي بتأثيرات بصرية مذهلة

مقدمة

هذا الكود يخلق معرض بطاقات تفاعلي بتأثيرات موجية مميزة باستخدام SVG filters. في هذا المقال سنقوم بتحليل الكود بالتفصيل لفهم كيفية عمل هذه التأثيرات البصرية المذهلة.

الهيكل الأساسي

يتكون المشروع من قسمين رئيسيين:

• HTML: لبناء هيكل البطاقات والعناصر
• CSS: لتنسيق المظهر والتأثيرات البصرية
• SVG Filters: لإنشاء التأثيرات الموجية

الهيكل HTML

يبدأ الكود بهيكل HTML أساسي لإنشاء البطاقات:

             <div class="containe">
  <div class="card">
    <div class="image image1"></div>
    <div class="info">
      <h5>About me</h5>
      <p>...</p>
    </div>
  </div>
  <!-- بطاقتان أخريان -->
</div>
<svg>...</svg> <!-- مرشحات SVG -->
           

يحتوي الهيكل على:

• حاوية رئيسية (containe) تحتوي على جميع البطاقات
• بطاقات فردية (card) تحتوي على الصورة والمعلومات
• عناصر SVG لإنشاء المرشحات البصرية

التنسيق الأساسي باستخدام CSS

1 إعادة الضبط الأساسية

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

هذه القاعدة الأساسية تضمن أن جميع العناصر تستخدم نموذج الصندوق border-box وتزيل الهوامش والإبعاد الافتراضية.

2 تنسيق الصفحة الأساسي

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f4f4f4;
  padding: 20px;
}

يستخدم display: flex مع justify-content: center و align-items: center لمركزة المحتوى في منتصف الصفحة.

min-height: 100vh يضمن أن المحتوى يشغل كامل ارتفاع الشاشة.

3 حاوية البطاقات

.containe {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

flex-wrap: wrap يسمح للبطاقات بالانتقال لأسفل عندما لا يوجد مساحة كافية في الصف.

تحليل تصميم البطاقات

4 تصميم البطاقة

.containe .card {
  position: relative;
  width: 280px;
  height: 350px;
  margin: 30px;
}

position: relative لتحديد موقع العناصر الداخلية بالنسبة للبطاقة.

5 تأثير الدوران على البطاقات

.containe .card:nth-of-type(2) {
  transform: rotate(5deg);
}

يدور البطاقة الثانية 5 درجات لخلق تأثير مرئي مثير للاهتمام وتجنب المظهر الرتيب.

6 الصور داخل البطاقات

.containe .card .image {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  transform: translate(10px, 10px);
}

background-size: cover تجعل الصورة تغطي المساحة المخصصة بالكامل.

transform: translate(10px, 10px) تنزاح الصورة 10px لليمين و 10px لأسفل.

التأثيرات المتقدمة

7 الإطار الموجي باستخدام الـ pseudo-element

.containe .card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 255px;
  height: 325px;
  border: 25px solid #fff;
  z-index: 1;
  box-shadow: 7px 7px 21px #bdbdbd, -7px -7px 21px #ffffff;
  background: transparent;
}

الـ :before يخلق إطاراً أبيض حول الصورة.

z-index: 1 يجعله فوق الصورة.

8 تطبيق المرشحات الموجية

.containe .card:nth-of-type(1)::before {
  filter: url(#wavy1);
}

يطبق مرشح SVG محدد على الإطار لخلق تأثير متموج.

9 معلومات البطاقة (تظهر عند التمرير)

.containe .card .info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition-duration: 1s;
}

.containe .card:hover .info {
  opacity: 1;
}

المعلومات مخفية في البداية (opacity: 0) وتظهر عند التمرير على البطاقة (opacity: 1).

transition-duration: 1s يخلق تأثير ظهور سلس.

مرشحات SVG

<svg>
  <filter id="wavy1">
    <feTurbulence x="0" y="0" baseFrequency="0.2" numOctaves="5" seed="1"></feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="20" />
  </filter>
</svg>

شرح مرشح SVG:

• <feTurbulence>: يخلق نمطاً مضطرباً
• baseFrequency: يحدد تردد النمط (كلما زاد الرقم زادت التعقيد)
• numOctaves: يحدد عدد طبقات التفاصيل
• seed: يحدد البذرة العشوائية للنمط
• <feDisplacementMap>: يشوه الصورة بناءً على نمط الاضطراب
• scale: يحدد مقدار التشويه

المشاكل والإصلاحات

الأخطاء الشائعة والحلول

• خطأ في كتابة feTurbulence: يجب تصحيحها إلى feTurbulence
• الصور الخارجية: قد لا تعمل إذا تم حذفها من الخوادم - يفضل استخدام صور بديلة
• التوافق مع المتصفحات: بعض تأثيرات SVG قد لا تعمل في المتصفحات القديمة

الخلاصة

هذا الكود يمثل مثالاً رائعاً على:

• استخدام CSS Flexbox لإنشاء تخطيط مرن
• تطبيق تأثيرات متقدمة باستخدام مرشحات SVG
• إنشاء واجهات تفاعلية مع تأثيرات التمرير
• استخدام pseudo-elements لتحسين التصميم البصري

قابلية التخصيص

الكود قابل للتخصيص بسهولة عن طريق تغيير:

• الصور والخلفيات
• النصوص والمحتوى
• الألوان والظلال
• معاملات المرشحات والتأثيرات

يمكن استخدام هذا النموذج كقاعدة لمشاريع ويب تفاعلية متعددة، مثل معارض الصور، بطاقات المنتجات، أو صفحات الملفات الشخصية.

مرشحات SVG للتأثيرات الموجية

<svg>
        <filter id="wavy1">
            <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="15" />
        </filter>
    </svg>
    <svg>
        <filter id="wavy2">
            <feTurbulence x="0" y="0" baseFrequency="0.03" numOctaves="3" seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="12" />
        </filter>
    </svg>
    <svg>
        <filter id="wavy3">
            <feTurbulence x="0" y="0" baseFrequency="0.025" numOctaves="4" seed="3"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="18" />
        </filter>
    </svg>
    

تحمــيل الكود كاملا هنا

🔒

محتوى حصري محمي

للوصول إلى المحتوى الحصري، يرجى طلب كلمة المرور عبر البريد الإلكتروني تكلفة الكود 100 جنيه مصري

📧 الحصول على كلمة المرور

أدخل كلمة المرور

المحاولات المتبقية: 3

🎉 تم فتح المحتوى بنجاح!

تهانينا! لقد قمت بفتح المحتوى المحمي بنجاح.

المحتوى الحصري

هذا هو المحتوى الحصري الذي يمكنك فقط الوصول إليه بعد إدخال كلمة المرور الصحيحة.

📄

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>بطاقات بتأثيرات موجية</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            direction: rtl;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 40px;
        }

        .container .card {
            position: relative;
            width: 280px;
            height: 350px;
        }

        .container .card:nth-of-type(2) {
            transform: rotate(5deg);
        }

        .container .card:nth-of-type(3) {
            transform: rotate(-3deg);
        }

        .container .card .image {
            position: relative;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transform: translate(10px, 10px);
            border-radius: 5px;
        }

        .container .card:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 255px;
            height: 325px;
            border: 25px solid #fff;
            z-index: 1;
            box-shadow: 7px 7px 21px rgba(0, 0, 0, 0.1), -7px -7px 21px rgba(255, 255, 255, 0.7);
            background: transparent;
            border-radius: 5px;
        }

        .container .card:nth-of-type(1)::before {
            filter: url(#wavy1);
        }

        .container .card:nth-of-type(2)::before {
            filter: url(#wavy2);
        }

        .container .card:nth-of-type(3)::before {
            filter: url(#wavy3);
        }

        .image1 {
            background-image: url("https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
        }

        .image2 {
            background-image: url("https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
        }

        .image3 {
            background-image: url("https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
        }

        .container .card .info {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 50px 20px 30px 20px;
            transform: translate(10px, 10px);
            text-align: center;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            line-height: 1.6;
            font-size: 16px;
            opacity: 0;
            transition: opacity 0.5s ease;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .container .card:hover .info {
            opacity: 1;
        }

        .container .card .info h2 {
            margin-bottom: 15px;
            font-size: 24px;
            color: #4fc3f7;
        }

        svg {
            width: 0;
            height: 0;
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .container .card:nth-of-type(2),
            .container .card:nth-of-type(3) {
                transform: rotate(0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="image image1"></div>
            <div class="info">
                <h2>من أنا</h2>
                <p>أنا مصمم ويب مبتكر، متخصص في إنشاء تجارب مستخدم فريدة وجذابة. أحب دمج الفن مع التكنولوجيا.</p>
            </div>
        </div>
        <div class="card">
            <div class="image image2"></div>
            <div class="info">
                <h2>مهاراتي</h2>
                <p>أمتلك خبرة في HTML, CSS, JavaScript، وتصميم تجربة المستخدم. أعمل على مشاريع متنوعة ومبتكرة.</p>
            </div>
        </div>
        <div class="card">
            <div class="image image3"></div>
            <div class="info">
                <h2>اتصل بي</h2>
                <p>لأي استفسار أو تعاون، لا تتردد في التواصل معي. أنا متاح للمشاريع الجديدة والمثيرة.</p>
            </div>
        </div>
    </div>
    
    <svg>
        <filter id="wavy1">
            <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="15" />
        </filter>
    </svg>
    <svg>
        <filter id="wavy2">
            <feTurbulence x="0" y="0" baseFrequency="0.03" numOctaves="3" seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="12" />
        </filter>
    </svg>
    <svg>
        <filter id="wavy3">
            <feTurbulence x="0" y="0" baseFrequency="0.025" numOctaves="4" seed="3"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="18" />
        </filter>
    </svg>
</body>
</html>
    

كيف كان المقال؟