Using the brightness() CSS Filter to generically highlight Content

栏目: IT技术 · 发布时间: 4年前

内容简介:On this page:So it seems I have to pay better attention to CSS standards as I just realized that you can quite easily use CSS Filters to apply useful effects for generic control behaviors. Sure, I remember

On this page:

Using the brightness() CSS Filter to generically highlight Content

So it seems I have to pay better attention to CSS standards as I just realized that you can quite easily use CSS Filters to apply useful effects for generic control behaviors. Sure, I remember filter merely from the old, evil IE6 days to handle things like shadows and opacity, but it looks like the filter properties have migrated into the CSS mainstream with two now widely used and accepted filter operations that have quite a few useful filters available.

The two filter properties are:

There are a number of filter functions available:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

A few of these are very useful as generic tools - especially brightness() and grayscale() .

Filter and Brightness

I recently ran discovered the brightness() filter, which I didn't realize existed, but which is very, very useful for a number of generic operations.

It's so useful because it allows you to generically change the color value of an element, without having to specify a specific color value . Instead you can vary the brightness (or perhaps also the hue or saturation if you want to get more fancy) and basically affect he behavior of the element. That makes it quite useful for generic things like a 'button' control or other highlightable element.

brightness() Filter for Generic Highlighting

I can't tell you how many times over the years I've implemented a custom 'button' like CSS implementation. Over the years I've used images, backgrounds, gradients and opacity to effectively 'highlight' a control. All that works of course, but the problem with most of these approaches is that one way or the other you're hard coding a color value, image or gradient. Which means every type of button needs it's own highlight configuration and if you're doing any sort of theming the buttons need to be overridden for each theme to work typically.

The brightness() filter offers a potentially simpler alternative by simply boosting the color brightness of either or both foreground and background colors . Because brightness() works off the existing base color values, using a modifier style like :hover , you don't have to explicitly provide a new color, but rather just provide a generic brightness adjustment value.

What this means is that you can apply the button behavior to just about any content, regardless of what color it is which is great.

For example, this is what I use for turning FontAwesome icons into using button-like behavior:

<style>
  .toolbar { 
      padding: 5px;
      background: #f5f5f5;
  }
  .fa-button {
      padding: 0.5em 0.5em;
      background: #e0e0e0;  
      border-radius: 3px;                    
  }           
  .fa-button.dark {
      background: #555;                      
  }
  .fa-button:hover {
      cursor: pointer;
      border-radius: 3px;                    
      filter: brightness(120%);                    
  }            
  .fa-button.disabled {
      filter: grayscale(100%);
  }
</style>

<div>
  <a href="#"><i></i></a>
  <a href="#"><i></i></a>
  <a href="#"><i></i></a>

  <a href="#"class="ml-1"><i></i></a>
  <a href="#"><i></i></a>
  <a href="#"><i></i></a> 
  
                  
  <a href="#" title="this button is disabled (b&w filter)"><i></i></a>
<a href="#" title="this button is disabled (b&w filter)"><i></i></a>
<a href="#" title="this button is disabled (b&w filter)"><i></i></a>
</div>

Here's what that looks like:

Using the brightness() CSS Filter to generically highlight Content sample on CodePen

No matter which color is applied to the icon - the highlighting just works !

If you've been paying attention to CSS standards this is probably not news to you, but I didn't know that this was something you could do. In fact I didn't realize that there are so many useful filters available including filters to blur, gray scale and a few other things that are useful for things like disabling buttons.

Background Filters

Another very useful thing and again new to me is the ability to apply a backdrop-filter . A backdrop filter lets you apply a filter to the content that the affected elements sits on top of in HTML compositional layout.

Effectively - with a little extra effort - you can apply many of these filters to the background only which was previously very difficult to do unless you used absolute positioning and z-index!

This makes it much easier to highlight content that sits on top of background images for example.

<style>
    .image-background-text {                    
        background: url(./images/Icon.png);
        background-repeat: no-repeat;                    
        border: 1px solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 256px;
        width: 256px;
    }
    .text-overlay {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

        height: 256px;
        width: 256px;
        text-align: center;
          
        background: transparent;
        font-size: 70pt;
        font-weight: bold; 
        color: firebrick;
    }
</style>

<div>
    <h3>Icon</h3>
</div>

which produces this:

Using the brightness() CSS Filter to generically highlight Content sample on CodePen

What makes this work is the backdrop-filter which lets you apply a filter to anything that sits behind the filtered element . This was notoriously difficult to do otherwise, because without the backdrop-filter applying a filter or opacity to a background element would also apply to any child content contained within a parent element.

Note that using backdrop-filter is different than setting filter on the background element , because filter also applies to all contained elements .

If you do this, which seems very similar:

.image-background-text {     
   ...
   filter: blur(10px);
}
.text-overlay {
    /*backdrop-filter: blur(2px);*/
    ...

You get this unsatisfying result:

Using the brightness() CSS Filter to generically highlight Content sample on CodePen

Using backdrop-filter on the top level elements instead of blur on the bottom element, makes that actually work as it applies the filter to any content behind the top element.

It's still not exactly easy to do these kind of layouts, because you still have to make sure that the content on top completely covers the bottom container in order to ensure a full fill. But it still considerably easier than having to explicitly mess around with relative and absolute positioning layout in the middle of your document.

Backdrop Filter Caveats

To be clear: The backdrop-filter does not apply to the affected element background properties like background , background-image , gradients and so on. Rather it's applied to any content that sits behind the current element. Only the area that is 'covered' by the element with the backdrop-filter gets the filter applied.

As useful as I think that backdrop-filter is, the bad news is that it takes a very recent browser to work. It requires Chromium 76 or later, and I couldn't get it to work in FireFox (even with the supposedly supported layout.css.backdrop-filter.enabled = true flag).

As of today, the compatibility for backdrop-filter (not for filter which works in all browsers) looks like:

Using the brightness() CSS Filter to generically highlight Content

It works in current Chromium browsers. FireFox even with the Compat flag isn't working, and it looks like iOS still requires -webkit-backdrop-filter (apparently not required in IOS 13). So this feature is just making it into evergreen browsers, but it looks like it will eventually be supported by all browsers.

Summary

Filters have been around for a while, but some of the functionality is new to me. Filters are surprisingly useful especially for generic styling of elements for dynamic hover behaviors which I've been using filter for a lot lately to reduce a bunch of redundant hard coded style rules.

backdrop-filter is still a little too bleeding edge in terms of browser support to be used, unless you know your browser targeting supports it or you can live with content not applying the filter. Nevertheless, backdrop-filter is useful for some cool effects that otherwise are a pain in the ass to achieve via layered content.

Resources


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

四维人类

四维人类

(英)劳伦斯·斯科特 / 祝锦杰 / 浙江教育出版社 / 2018-10 / 79.90元

数字技术如何重新定义 我们的思维方式与生存方式?一起来看看 《四维人类》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具