فلاتر CSS

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

تتيح لك Filters تغيير images والخلفيات وحتى النصوص بصريًا باستخدام تأثيرات ممتعة. الأمر يشبه ارتداء نظارات شمسية، أو turning on spotlight، أو الانتقال إلى الوضعين الأسود والأبيض: كل ذلك باستخدام سطر واحد من CSS.

1. Blur (px) : يجعل العنصر يبدو ناعمًا وغير واضح البؤرة.

img {
  filter: blur(5px);
}
//slightly out of focus

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

img {
  filter: brightness(150%);
}
//brightens like turning on a spotlight.

3. Grayscale(%): يحوّل الألوان إلى أبيض وأسود.

img {
  filter: grayscale(100%);
}
//classic vintage or newspaper effect.

4. Sepia(%): يضيف درجة دافئة مائلة إلى البني لإضفاء طابع photo قديم.

img {
  filter: sepia(70%);
}
//like an old photo album.

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

التحدي

سهل

لديك أربع صور في معرض. يتمثل التحدي في تطبيق عوامل التصفية التالية على كل صورة:

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

توجد كل صورة داخل غلاف <div> يحمل class مُسمّى باسم عامل التصفية الخاص بها (blur، brightness، grayscale، sepia). صِل إلى الصورة باستخدام محدد descendant، مثل .blur img { filter: blur(3px); }، واكتب rule واحدة لكل صورة.

جرّب بنفسك

<!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>