CSS3 Filters

The CSS filter property lets you apply graphical effects like blurring or color shifting to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Filter functions include:           

(1) blur()

The blur function applies a blur effect to an image.

(2) brightness()

The brightness(amount) function adjusts the brightness of an image, making it appear brighter or darker.

(3) contrast()

The contrast function adjusts the contrast of the image.

(4) drop-shadow()

drop-shadow(w h b c) creates a shadow effect that extends beyond an image for the width w and height h with blur b and color c.

(5) grayscale()

The grayscale function converts an image to grayscale.

(6) hue-rotate()

The hue-rotate function applies a hue rotation (based on the color circle) to an image.

(7) invert()

The invert function inverts the colors of an image to make dark areas bright and bright areas dark.

(8) opacity()

The opacity function sets the opacity of an image to change its transparency.

(9) saturate()

The saturate function controls the color saturation for an image.

(10) sepia()

The sepia function converts an image to sepia.        

(11) The drop-shadow Function

drop-shadow(w h b c) creates a shadow effect that extends beyond an image for the width w and height h with blur b and color c. w, h, and b are values in pixels.

Example:

.dropshadow {
            filter: drop-shadow(5px 9px 2px blue);
}

Using Multiple CSS Filters

Multiple CSS filters can be used together by separating them with spaces. The following code demonstrates the use of the blur and the hue-rotate functions.

Example:           

.filtered {
          filter: blur(5px) hue-rotate(180deg);
  }

Read about 3-D Transforms here.

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *