Cascading Style Sheets allow you to truly customize your web pages. Learn how to apply filters over an image and how to use the blending, clipping and masking properties in CSS.
CSS Filters
The CSS filter property allows you to create graphic effects such as changing the color of an element or blurring another element, thus creating visual effects. You can also refer to a SVG filter with a URL (filter: url(file.svg#filter-id).
CSS formal syntax:
filter: <blur()>, <brightness()>, <contrast()>, <drop-shadow()>, <grayscale()>, <invert()>, <saturate()>, <hue-rotate()>, <opacity()>, <sepia()><url()>
Functions – Filter property is specified as one of the functions below:
- blur – this function applies an image blur effect, a higher value will create more blurring, the value for interpolation is 0
- brightness – this function applies a linear multiplier to the image so that it appears more or less bright, 0% will turn the full black, 100% leaves the image unchanged, and over 100% gives the best results
- contrast – this function adjusts the contrast of the image, the 0% value will make the image completely gray, the 100% value leaves the original image unchanged, and the values that go over 100% yield results with a higher contrast, the interpolation value is 1
- drop-shadow – this function creates a shadow effect on the image; the function accepts shadow parameter, and parameter parameters are as follows:
H-shadow – is required and sets the shadow offset horizontally; negative values place the shadow to the left of the image
V-shadow – is necessary and sets the pixel value for the shadow on the vertical; the negative values move the shadow over the image
Color – is optional and, if not specified, the color is dictated by the browser in question, basically adds a certain color to the shadow
Spread – is optional and must necessarily be expressed in pixels, the positive values make the shadow higher and the negative values diminish, this is a fourth value <length>
- grayscale – this function converts the image into grayscale, the 0% value leaves the picture unchanged, and the 100% value makes the full grayscale picture, the interpolation value is 0
- invert – this function inverts the samples from the original image, the 0% value leaves the image intact, while the 100% value completely inverts the image; the value for interpolation is 0
- saturate – this function saturates the input image, the 0% value is completely unsaturated, while the 100% value leaves the image intact, unchanged, the value for interpolation is 1
- hue-rotate – this function produces a shade of the image; a value of 0 degrees leaves the image intact, the value for interpolation is 0, and the maximum admissible value is 360 degrees
- opacity – this function applies opacity to the image, where the 0% value applies total transparency and the 100% value leaves the image intact, the interpolation value is 1, and the negative values are not allowed
- sepia – this function transforms the image into sepia, the value of 0% leaves the image intact, while the 100% value changes the full image in the sepia, the value for interpolation is 0, and the negative values are not premised
- url – this function inserts the location of the XML file that has an SVG filter and may include an anchor for the filter element
When you use invalid parameters for any function, it does not return anything. There are exceptions, which I mentioned, that take a value expressed as a percentage and turn the value into a decimal place.
Example of a saturated image:
<html>
<head>
<style>
img {
filter: saturate(400%);
}
</style>
</head>
<body>
<h1>The filter Property</h1>
<p>FIlter: saturate </p>
<img src="http://www.kinyu-z.net/data/wallpapers/26/793224.jpg">
</body>
</html>
Another example of a grayscale image:
<html>
<head>
<style>
img {
filter: grayscale(70%);
}
</style>
</head>
<body>
<h1>The Filter Property</h1>
<img src="http://www.kinyu-z.net/data/wallpapers/26/793224.jpg">
</body>
</html>
Another example for the sepia filter:
<html>
<head>
<style>
img {
filter: sepia(90%);
}
</style>
</head>
<body>
<h1>The Filter Property</h1>
<img src="http://www.kinyu-z.net/data/wallpapers/26/793224.jpg">
</body>
</html>
CSS Blending
This property creates a blending mode for each background layer. In practice, the property blends overlapping elements and describes how they should appear.
CSS formal syntax:
Background-blend-mode: normal, multiply, overlay, screen, lighten, darken, color, color-dodge, saturation, luminosity
The blend-mode data type can be defined by inserting the values below:
- normal – this value sets the normal mixing mode and is implicit
- multiply – this sets the multiplication of the blending mode, the final color resulting from the multiplication of the lower and upper colors
- overlay – sets the blending mode to overlay
- screen – sets the mode of mixing on the screen, the final color being the result of color inversion and multiplication
- lighten – sets the blending mode to make it easy, the final color being composed of the lightest values imposed by the color channel used
- darken – this sets the blending mode to darken, the final color being composed of the darkest values imposed by the color channel usedcolor
- color-dodge – sets the blending mode in order to avoid color, deriving from the result of dividing the background color with the inverse of the predominant color
- saturation – sets the blending mode to saturation, the final color having the saturation of the predominant color
- luminosity – sets the blending mode to brightness, the final color having the brightness of the top color
CSS Clipping
This property, namely the CSS clip, allows us to define which part of a particular element is visible. The property can only be applied to elements that have an absolute or fixed position. The clips are vector paths, and outside the path is transparent, and the inside elements are opaque.
CSS syntax: auto, shape, initial, inherit
- auto: is implicit and will not apply any cuts
- shape: has only one valid value, namely rect (left, right, top, bottom); the element flashes
- initial: this sets its default value
- inherit: this property is inherited from the parent element
CSS has the ability to do both cutting and masking, besides filtering and blending. With these methods, we can show what portions we want from an element using different shapes, as well as SVG elements or complete images.
Clip-path values: none, <inset()>, <circle()>, <ellipse()>, <polygon()>, padding-box, content-box, margin-box, fill-box, view-box
By clip-path, we can define a cut shape, and any part of the element that falls outside the cut shape is a transparent, empty space.
Clip shapes – we can use clip shapes such as: inset(), circle(), ellipse(), polygon()
Example:
<html>
<head>
<style>
img {
position: absolute;
clip: rect(2px,300px,400px,50px);
}
</style>
</head>
<body>
<img src="http://www.kinyu-z.net/data/wallpapers/26/793224.jpg">
</body>
</html>
CSS Masking
CSS masking defines means to completely or partially conceal the visual elements. It can be done by cutting the image at certain points that we set.
Values: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-composite
Therefore:
- mask-image: this property sets the image that is used as the mask layer for a particular element
- mask-mode: this property determines whether the mask reference defined by the mask-image is treated as a luminance
- mask-repeat: this property determines how images are repeated
- mask-position: this property establishes the base position relative to the position layer of the mask defined by the mask origin, for each mask defined image
- mask-clip: this property determines which area will be affected by the mask
- mask-origin: this property determines the origin of a certain mask
- mask-size: this property sets the dimensions of the mask images
- mask-composite: this property is a composite operation between the current layer and the lower mask layers below:
Example with mask repeat: no-repeat
<html>
<head>
<style>
body {
background-color: dimgray;
color: #355;
font-size: 2.1em;
font-family: Arial, Helvetica;
}
img {
margin: 10px auto;
display: block;
width: 100%;
height: 300px;
-webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Mask_icon.svg);
mask-image: urlhttps://upload.wikimedia.org/wikipedia/commons/3/3b/Mask_icon.svg);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<img src="http://www.kinyu-z.net/data/wallpapers/26/793224.jpg">
</body>
</html>
Conclusion
This article has shown you how to apply filters over an image and how to use the blending, clipping and masking properties in CSS.
