CSS: Filter

Below are CSS Filter Examples

No Filter

The View

filter: blur(2.1px)

The View

No Filter

The View

filter: grayscale(100)

The Lake

No Filter

The View

filter: sepia(100)

The Lake

No Filter

The Lake

filter: saturate(3)

The Lake

No Filter

The Lake

filter: hue-rotate(90deg)

The Lake

No Filter

The Lake

filter: contrast(145%)

The Lake

No Filter

The Lake

filter: brightness(125%)

The Lake

No Filter

The Lake

filter: invert(35%)

The Lake

No Filter

The Lake

filter: drop-shadow(2px 3px 3px red)

The Lake

The code used for index.php is below:

<!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">
    <link rel="stylesheet" href="../styles.css">
    <title>CSS: Filter</title>
</head>
<body>

<h1 class="lesson-h1">CSS: Filter</h1>

<p>Below are CSS Filter Examples</p>

<div class="filter-img-div">
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/P8020377.jpg" alt="The View">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: blur(2.1px)</h4>
        <img class="filter-img" style="filter: blur(2.1px)" src="img/P8020377.jpg" alt="The View">
    </div>

    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/P8020451.jpg" alt="The View">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: grayscale(100)</h4>
        <img class="filter-img" style="filter: grayscale(100)" src="img/P8020451.jpg" alt="The Lake">
    </div>

    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/P8020453.jpg" alt="The View">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: sepia(100)</h4>
        <img class="filter-img" style="filter: sepia(100)" src="img/P8020453.jpg" alt="The Lake">
    </div>

    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/P8020456.jpg" alt="The Lake">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: saturate(3)</h4>
        <img class="filter-img" style="filter: saturate(3)" src="img/P8020456.jpg" alt="The Lake">
    </div>

    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/P8020488.jpg" alt="The Lake">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: hue-rotate(90deg)</h4>
        <img class="filter-img" style="filter: hue-rotate(90deg)" src="img/P8020488.jpg" alt="The Lake">
    </div>

    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/PB250001.jpg" alt="The Lake">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: contrast(145%)</h4>
        <img class="filter-img" style="filter: contrast(145%)" src="img/PB250001.jpg" alt="The Lake">
    </div>

    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/P2170003.jpg" alt="The Lake">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: brightness(125%)</h4>
        <img class="filter-img" style="filter: brightness(125%)" src="img/P2170003.jpg" alt="The Lake">
    </div>

    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/P2410080.jpg" alt="The Lake">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: invert(35%)</h4>
        <img class="filter-img" style="filter: invert(35%);" src="img/P2410080.jpg" alt="The Lake">
    </div>

    <div class="filter-img-wrapper">
        <h4 class="filter-h4">No Filter</h4>
        <img class="filter-img" src="img/P2020008.jpg" alt="The Lake">
    </div>
    <div class="filter-img-wrapper">
        <h4 class="filter-h4">filter: drop-shadow(2px 3px 3px red)</h4>
        <img class="filter-img" style="filter: drop-shadow(7px 11px 11px red);" src="img/P2020008.jpg" alt="The Lake">
    </div>
     
</div>

<?php
    include('../show_code.php');
    show_code('index.php');
?>
    
</body>
</html>