The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

232 Chapter 18

brightness() and contrast()

The brightness() function changes the brightness of an element, whereas

the contrast() function increases or decreases the contrast between the dark

and light of an element. Both functions take a percentage as an argument.

Here’s an example:

E { filter: brightness(50%); }

E { filter: contrast(50%); }

In both cases, an argument of 100% leaves the element unchanged. An

argument of 0% for brightness() makes the element fully black, and 0% for

contrast() makes the element fully gray. You can use values in excess of 100%

to increase the brightness and contrast as necessary.

noTe You can also use a number for this function, with 1 being equivalent to 100%, 1.5

to 150%, and so on. The same applies to all other functions that accept percentage

values.

Figure 18-7 shows examples of both functions. The first image has

no filter applied and is shown as a reference. The middle image has the

brightness() function applied, and the image on the right has contrast()—

each function has an argument of 50%.

Figure 18-7: Adjusting brightness and contrast with CSS filter effects

grayscale(), sepia(), and saturate() Contents in Detail xv

The next three functions all deal with color. The grayscale() function gives

you a way to replace colors with shades of gray so you can convert images to

black and white. The sepia() toning function is similar to grayscale(), except

it uses a gold tint to produce a vintage photo effect. Finally, the saturate()

function controls the color intensity.

Each of the functions accepts a percentage value as an argument:

E { filter: grayscale(100%); }

E { filter: sepia(100%); }

E { filter: saturate(200%); }

A value of 100% for the grayscale() function makes an image completely

black and white. Passing 100% to the sepia() function makes an image fully

sepia toned. In the case of both functions, a value of 0% leaves the image

unchanged, whereas values greater than 100% are treated as 100%.