What magical uses does CSS filter have

background

Basic Concepts

CSS filter property applies graphic effects such as blur or color shift to an element to form a filter. Filters are often used to adjust the rendering of images, backgrounds, and borders. Its value can be a filter function <filter-function> or an svg filter added using url .

filter: <filter-function> [<filter-function>]* | none
filter: url(file.svg#filter-element-id)

<filter-function> can be used with filter and backdrop-filter attributes. Its data type is specified by one of the following filter functions. Each function requires a parameter. If the parameter is invalid, the filter will not take effect. The following is an explanation of the meaning of the filter function:

blur() : blurs the image
brightness() : Makes an image brighter or dimmer
contrast() : Increase or decrease the contrast of an image
drop-shadow() : Applies a drop shadow behind an image
grayscale() : Converts an image to grayscale
hue-rotate() : Changes the overall hue of an image
invert() : Inverts the image colors
opacity() : Change the transparency of an image
saturate() : Supersaturates or desaturates the input image
sepia() : Converts the image to sepia

Usage Examples

/* Using SVG filter */
filter: url("filters.svg#filter-id");
/* Use filter function */
filter: blur(5px);
filter: brightness(0.4);
filter:contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Do not use filter */
filter: none;
/* Global variables */
filter: inherit;
filter: initial;
filter: unset;

Application Cases

Smarter shadows

When adding shadows to elements, we generally use the box-shadow property. It is easy to add shadow effects to elements through the syntax of box-shadow(x偏移, y偏移, 模糊大小, 陰影大小, 色值, inset) However, box-shadow also has a disadvantage, that is, when adding shadow effects to transparent images, it cannot penetrate the elements and can only be added to the box model of transparent image elements. At this time, the drop-shadow method of filter attribute can solve this problem very well. The shadow added by it can penetrate the element instead of being added to the box model border of the element.

In addition to being able to penetrate transparent elements, the shadow added by drop-shadow has the same shadow effect as box-shadow . If the browser supports hardware acceleration, the shadow effect added by using filter will be more realistic.

The drop-shadow syntax is as follows (it is exactly the same as box-shadow except that it does not support setting inset ):

filter: drop-shadow(x offset, y offset, blur size, color value);

like:

filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));

The following figure compares the use of box-shadow and filter: drop-shadow to add shadows to transparent elements:

<img class="box-shadow" src="futurama.jpg" />
<img class="drop-shadow" src="futurama.jpg" />

.box-shadow {
  box-shadow: 1px 1px 15px rgba(0, 0, 0, .5);
}
.drop-shadow {
  filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));
}

Gray out elements and web pages

When a major disaster or other mourning event occurs, state-owned enterprise and government websites often need to gray out all web pages. Or many web pages have a style effect where a gray element turns into a colored element when the mouse hover over it. At this time, you can use the grayscale method of filter attribute, which can adjust the grayscale of the element. By setting filter: grayscale(100%) to the page element, the page element can be grayed out. In the following example, there are h1 and img tags under body tag, which look like this before adding filter style.

<body>
  <h1 class="title">FUTURAMA</h1>
  <img class="img" width="500" src="./images/futurama.jpg" />
</body>

Now we add a .gray class to body element, and <body> can achieve the gray effect of the entire web page.

.gray {
  filter: grayscale(100%);
}

In order to be compatible with other lower version browsers such as IE8 , we can add browser prefixes and svg filters. 😤

.gray {
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: grayscale(100%);
}

When there is an urgent need to gray out a web page, it is often necessary to remove this function after it has been online for a period of time. We can also add the following similar methods when it is first launched to control the automatic online and offline time of the graying effect, so that it can be automatically removed when the scheduled time is reached, without going through the construction process twice. 🤣

(function setGray() {
  var endTime = Date.parse("Apr 06 2077 00:00:01");
  var timestamp = Date.parse(new Date());
  if (timestamp <= endTime) {
    document.querySelector('html').classList.add('gray');
  }
})();

Element emphasis, highlight

brightness method achieves the effect of highlighting elements. It can be applied to the menu bar and image list hover effects to emphasize the content currently hovering or selected by the mouse. Below are two methods for adding brightness and saturate to a group of button menu bars to highlight elements by changing brightness and saturation.

<div class="container">
  <a class="button">🍋</a>
  <a class="button">🍎</a>
  <a class="button">🍐</a>
  <a class="button dark">🥑</a>
  🍄
  🌽
  <a class="button disabled">🍒</a>
  <a class="button disabled">🍅</a>
  <a class="button disabled">🥔</a>
</div>

.container {
  margin: 40px;
}
.button {
  padding: 0.5em 0.5em;
  background: #E0E0E0;
  border-radius: 3px;
}
.button.dark {
  background: #333;
}
.button:hover:not(.disabled) {
  cursor: pointer;
  border-radius: 3px;
  filter: brightness(110%) saturate(140%);
}
.button.disabled {
  filter: grayscale(100%);
}

Frosted glass effect

The Frosted glass glass effect, as the name suggests, is similar to the effect of translucent frosted glass. It is widely used in system UI such as iOS and Windows 10 Using the frosted glass effect can enhance the visual experience. There are also systematic explanations in books such as 《CSS揭秘》 . Here is my summary of how to achieve this effect using filter: blur and backdrop-filter: blur respectively.

There are two div elements with the same class name glass , and they are added with two classes glass-by-filter and glass-by-backdrop-filter to distinguish the two methods.

<div class="glass glass-by-filter"></div>
<div class="glass glass-by-backdrop-filter"></div>

General style, set the size, rounded corners and other basic styles of frosted glass elements:

.glass {
  height: 300px;
  width: 300px;
  border: 1px groove #EFEFEF;
  border-radius: 12px;
  background: rgba(242, 242, 242, 0.5);
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
}

filter: blur method, adds a ::before pseudo class to the element to set the blur method and puts it at the bottom layer to achieve the frosted glass effect.

.glass-by-filter {
  z-index: 1;
  box-sizing: border-box;
  position: relative;
}
.glass-by-filter::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: inherit;
  filter: blur(10px);
}

backdrop-filter: blur directly adds the blur method to the element to achieve the frosted glass effect.

.glass-by-backdrop-filter {
  backdrop-filter: blur(10px);
}

The effect is shown in the following figure (left: filter , right: backdrop-filter ):

Read extension: Blurred glass border effect: https://css-tricks.com/blurred-borders-in-css

Artistic photo! Even a simplified version insatagram can be realized

Retro, printmaking, oil painting, comics, liquefaction, old photos, minimalist, Morandi, cyberpunk, and WandaVision styles can all be achieved!

By combining all the filter methods, you can create any effect you want. The following is a simple filter method regulator that can adjust the value of each method and display the filter effect of the image in real time. As shown in the figure below.

The main code of the page is as follows. The control area #imageEditor is a form . Each row of the form controls the value of a filter method. The display area #imageContainer contains an img element, and the generated filter acts on this element.

<form id="imageEditor">
  <p>
    <label for="gs">Grayscale</label>
    <input id="gs" name="gs" type="range" min="0" max="100" value="0">
  </p>
  <p>
    <label for="blur">Blur</label>
    <input id="blur" name="blur" type="range" min="0" max="10" value="0">
  </p>
  <p>
    <label for="br">Exposure</label>
    <input id="br" name="br" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="ct">Contrast</label>
    <input id="ct" name="ct" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="huer">Hue Rotate</label>
    <input id="huer" name="huer" type="range" min="0" max="360" value="0">
  </p>
  <p>
    <label for="opacity">Opacity</label>
    <input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
  </p>
  <p>
    <label for="invert">Invert</label>
    <input id="invert" name="invert" type="range" min="0" max="100" value="0">
  </p>
  <p>
    <label for="saturate">Saturate</label>
    <input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
  </p>
  <p>
    <label for="sepia">Sepia</label>
    <input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
  </p>
  <input type="reset" form="imageEditor" id="reset" value="Reset" />
</form>
<div id="imageContainer" class="center">
  <img src="futurama.jpg">
</div>

function editImage() {
  var gs = $("#gs").val(); // grayscale
  var blur = $("#blur").val(); // blur
  var br = $("#br").val(); // brightness
  var ct = $("#ct").val(); // contrast
  var huer = $("#huer").val(); // hue-rotate
  var opacity = $("#opacity").val(); // opacity
  var invert = $("#invert").val(); // invert
  var saturate = $("#saturate").val(); // saturate
  var sepia = $("#sepia").val(); // sepia
  $("#imageContainer img").css(
    "filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
  $("#imageContainer img").css(
    "-webkit-filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
}
// Apply filters when input value changes $("input[type=range]").change(editImage).mousemove(editImage);

Currently, we have only realized the real-time preview of the filter. The subsequent functions to be realized include supporting complex svg filter templates, exporting and downloading, etc. After completing these steps, you will no longer need to download other APP😅 to add filters to your photos. Full example code: https://codepen.io/dragonir/pen/abJmqxM

Save space and increase web page loading speed

Practice has proved that the volume of the same image after reducing the brightness, contrast and hue saturation can be greatly reduced compared with the original image. A picture of about 2M can be compressed to about 1M after being weakened and saved. We can use弱化images on web pages and then restore them through CSS filter . In this way, the purpose of compressing resource volume, increasing web page loading speed and improving user experience can be achieved.

For detailed operations, please read the following tutorials:

Contrast Swap Technique: Improved Image Performance Using CSS filter https://css-tricks.com/contrast-swap-technique-improved-image-performance-css-filters

compatibility

From the caniuse query results, we can see that css filter attribute is well supported in modern browsers. Except for IE browser, it can be used normally in most other browsers. If necessary, you can add a browser kernel prefix. However, the official website also has the following 3 issue prompts. I believe that these problems will be gradually fixed as the browser is upgraded:

In Safari, if the child element is animated, the filter is not applied.
Currently no browser supports the spread-radius method of the drop-shadow filter.
In the Edge browser, if the element or sub-element is set with負值z-index , the filter cannot be applied.

Summarize

This article simply lists several commonly used page effects using CSS filter . In fact, each built-in method of filter can have infinite possibilities for expansion and application. For example, invert color can also be applied to hover effects, and adjusting sepia brown value of the web page can achieve eye protection effects. As long as you use your imagination and creativity, filter can be well applied in practice.

The following examples are good applications. If you are interested, you can read more:

Frosted glass effect https://codepen.io/KazuyoshiGoto/pen/nhstF

Broken glass effect https://codepen.io/bajjy/pen/vwrKk

Hover effect using filter https://codepen.io/nxworld/details/ZYNOBZ

Inverted color button https://codepen.io/monkey-company/pen/zZZvRp

Old photo https://codepen.io/dudleystorey/pen/pKoqa

Advanced filter editor: https://codepen.io/stoumann/pen/MWeNmyb

Finally, attached is a picture of復古莫蘭迪色性冷淡油畫效果filter adjusted using the filter editor above. (Wow, this is too awesome, CSS absolutely awesome yyds🤣 )

The above are the details of the magical uses of CSS filters. For more information about the magical uses of CSS filters, please pay attention to other related articles on 123WORDPRESS.COM!

<<: Two ways to specify the character set of the html page

>>: Detailed explanation of HTML basic tags and structures