内容简介: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:
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:
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:
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 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:
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。