מסנני CSS

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 22 מתוך 43.

מסננים מאפשרים לך לשנות חזותית תמונות, רקעים ואפילו טקסט באמצעות אפקטים מהנים. זה כמו להרכיב משקפי שמש, להדליק זרקור או לעבור למצב שחור־לבן: הכול באמצעות שורת CSS אחת.

1. טשטוש (px) : גורם לאלמנט להיראות מטושטש ולא ממוקד.

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

2. בהירות(%): שולטת במידת הבהירות או הכהות של משהו.

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

3. גווני אפור(%): ממיר את הצבע לשחור־לבן.

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

4. ספיה(%): מוסיפה גוון חמים וחום לאווירה של תמונת רטרו.

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

יש עוד מסננים רבים שאפשר להתנסות בהם! אתם מוזמנים לחקור אותם ולראות אילו אפקטים יצירתיים תוכלו ליצור.

אתגר

קל

יש לך ארבע תמונות בגלריה. האתגר שלך הוא להחיל על כל תמונה את המסננים הבאים:

תמונה ראשונה (טשטוש): החילי מסנן blur(3px) כדי לרכך את התמונה ולהוציא אותה ממיקוד.
תמונה שנייה (בהירות): השתמשי ב-brightness(2.0) כדי להבהיר את התמונה.
תמונה שלישית (גווני אפור): החילי grayscale(100%) כדי להפוך את התמונה לשחור-לבן.
תמונה רביעית (ספיה): השתמשי ב-sepia(70%) כדי להעניק לתמונה גוון חמים בסגנון וינטג'.

כל תמונה נמצאת בתוך עטיפת <div> עם מחלקה ששמה תואם למסנן שלה (blur, brightness, grayscale, sepia). גשי אל התמונה באמצעות בורר צאצא, למשל .blur img { filter: blur(3px); }, וכתבי כלל אחד לכל תמונה.

נסו בעצמכם

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