Theory
Theory
Comments

Grayscale and Sepia

The following two filters have their historical origins in photography: photos were originally black and white or brownish sepia.

Colorless and sepia filters can be used to give your photos an “antique” look.

Colorlessness is assigned using grayscale. Valid values range from 0 to 1, and percentages range from0% to 100%. If the value is set to 0 or 0%, the element will be displayed unchanged.

.effect {
  filter: grayscale(1); /* Full color removal */
  filter: grayscale(50%); /* Removal of half of the colors */
}

Sepia is set using sepia. The valid values are the same as for grayscale.

.effect {
  filter: sepia(1); /* Full sepia effect */
  filter: sepia(25%); /* 25% sepia effect */
}

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Grayscale and Sepia</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="image"> <img src="img/spb-4.jpg" alt=""> </div> <div class="compare"> <div class="compare-left grayscale"> <div class="image"> <img src="img/spb-4.jpg" alt=""> </div> </div> <div class="compare-right sepia"> <div class="image"> <img src="img/spb-4.jpg" alt=""> </div> </div> </div> </body> </html>

CSS

.grayscale img { } .sepia img { }

Goalscompleted

Apply the grayscale(1) filter to the image in the .grayscale block,
and apply the sepia(1) filter to the image in the .sepia block.

Grayscale and Sepia

Comments

Log in

Sign up

Restore access