فلاتر CSS

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 22 من 43.

تسمح لك الفلاتر (Filters) بـ تغيير الصور والخلفيات وحتى النصوص بصرياً باستخدام تأثيرات ممتعة. الأمر يشبه ارتداء نظارات شمسية، أو تشغيل كشاف ضوئي، أو الانتقال إلى وضع الأبيض والأسود — كل ذلك بسطر واحد من CSS.

1. التمويه (بكسل) – يجعل العنصر يبدو ناعمًا وغير واضح.

img {
  filter: blur(5px);
}
// غير واضح قليلاً

2. السطوع (%) – يتحكم في مدى سطوع أو عتامة ظهور الشيء.

img {
  filter: brightness(150%);
}
// يزيد السطوع مثل تشغيل كشاف ضوئي.

3. التدرج الرمادي (%) – يحول الألوان إلى الأبيض والأسود.

img {
  filter: grayscale(100%);
}
// تأثير عتيق كلاسيكي أو تأثير الصحف.

4. سيبيا (%) (Sepia) – يضيف نغمة بنية دافئة لإضفاء طابع الصور القديمة (Retro).

img {
  filter: sepia(70%);
}
// مثل ألبوم صور قديم.

هناك العديد من الفلاتر الأخرى التي يمكنك تجربتها! لا تتردد في استكشافها ومعرفة التأثيرات الإبداعية التي يمكنك إنشاؤها.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

لديك أربع صور في معرض الصور. التحدي الخاص بك هو تطبيق المرشحات (filters) التالية على كل صورة:

الصورة الأولى (Blur): قم بتطبيق مرشح blur(3px) لجعل الصورة ناعمة وغير واضحة.
الصورة الثانية (Brightness): استخدم brightness(2.0) لجعل الصورة أكثر سطوعاً.
الصورة الثالثة (Grayscale): قم بتطبيق grayscale(100%) لتحويل الصورة إلى اللونين الأبيض والأسود.
الصورة الرابعة (Sepia): استخدم sepia(70%) لإعطاء الصورة نغمة دافئة وعتيقة (vintage).

ورقة مرجعية

تسمح لك فلاتر CSS بتغيير الصور والخلفيات والنصوص بصرياً باستخدام التأثيرات.

التمويه (Blur - px) – يجعل العناصر ناعمة وغير واضحة:

img {
  filter: blur(5px);
}

السطوع (Brightness - %) – يتحكم في مدى إضاءة أو عتامة ظهور الشيء:

img {
  filter: brightness(150%);
}

التدرج الرمادي (Grayscale - %) – يحول الألوان إلى الأبيض والأسود:

img {
  filter: grayscale(100%);
}

سيبيا (Sepia - %) – يضيف نغمة بنية دافئة للحصول على تأثير صور قديم (Retro):

img {
  filter: sepia(70%);
}

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.