- tips-and-tricks 2017-03-19T16:58:15+01:00 https://fadeit.dk/blog/tag/tips-and-tricks.html CSS backdrop filters 2016-09-27T16:22:00+02:00 https://fadeit.dk/blog /2016/09/27/backdrop-(filter)-it-like-its-hot <p>There are many new CSS features to get excited about (<a href="http://css4.rocks/">awesome list here</a>?). Tons of selectors &amp; structural properties that I can’t wait to see implemented in all browsers. <br /></p> <p><small>Side note: OMG CSS grid 😱, amirite? Did you even see this:</small></p> <div style="width: 100%"> <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">This is a very basic type of layout CSS Grid will let you create without any additional markup <a href="https://t.co/HGOd0RGnQ1">pic.twitter.com/HGOd0RGnQ1</a></p>&mdash; Wes Bos (@wesbos) <a href="https://twitter.com/wesbos/status/777955345146777600">September 19, 2016</a></blockquote> </div> <blockquote><p lang="en" dir="ltr">Here is was the CSS behind that looks like: <a href="https://t.co/BNiJnZ7zaX">pic.twitter.com/BNiJnZ7zaX</a></p>&mdash; Wes Bos (@wesbos) <a href="https://twitter.com/wesbos/status/777957127558082561">September 19, 2016</a></blockquote> <p>However, I’m the kind of person that gets excited about the small things, <code class="highlighter-rouge">backdrop-filter</code> included. As humble as it seems, it can enable a ton of design stunts for those that can wield it.</p> <h2 id="what-you-can-do-with-backdrop-filter">What you can do with backdrop-filter</h2> <p>For centuries, designers and developers have been trying to figure out how to adjust text color when placed on top of a background. If the background is light, the text has to be dark and vice-versa. <br /> Similar to centering elements before flexbox, many gave up and looked into other professions. Others hacked their way out of it with cheap tricks, such as text-shadow / box-shadow (I’m looking at you, Facebook!).</p> <p>It doesn’t have to be that way. Here’s what we can achieve with <code class="highlighter-rouge">backdrop-filter: inverse(1)</code>:</p> <p><span style="text-align: center; width: 100%; display: inline-block;"> <img src="/blog/assets/backdrop-(filter)-it-like-its-hot/css-backdrop-trick.gif" alt="Backdrop filter trick" /> </span></p> <p>Contrary to other solutions, this one is independent from the text itself. It’s also flexible IMO &amp; it can be used for other use cases too.<br /> There’s a small trick to it. To apply the <code class="highlighter-rouge">inverse</code> filter only on the text and prevent messing with the background, the background can be inverted again (<code class="highlighter-rouge">filter</code> can be used for that). Here’s what I mean:</p> <div class="language-css highlighter-rouge"><pre class="highlight"><code><span class="c">/* has to have z-index &gt; 'before' &amp; &lt; 'after' */</span> <span class="nt">p</span> <span class="p">{</span> <span class="c">/* ... */</span> <span class="p">}</span> <span class="c">/* the background, has to have z-index &lt; 'p' */</span> <span class="nt">section</span><span class="nd">:before</span><span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">green</span><span class="p">;</span> <span class="nl">filter</span><span class="p">:</span> <span class="nb">invert</span><span class="p">(</span><span class="m">1</span><span class="p">);</span> <span class="c">/* ... */</span> <span class="p">}</span> <span class="c">/* has to have z-index &gt; 'p' */</span> <span class="nt">section</span><span class="nd">:after</span><span class="p">{</span> <span class="py">backdrop-filter</span><span class="p">:</span> <span class="nb">invert</span><span class="p">(</span><span class="m">1</span><span class="p">);</span> <span class="c">/* ... */</span> <span class="p">}</span> </code></pre> </div> <p>The full code for it is available below.</p> <div style="width: 100%;"> <p data-height="265" data-theme-id="0" data-slug-hash="XjRoZz" data-default-tab="css,result" data-user="danmindru" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/danmindru/pen/XjRoZz/">CSS filter to invert text color</a> by Dan Mindru (<a href="http://codepen.io/danmindru">@danmindru</a>) on <a href="http://codepen.io">CodePen</a>.</p> </div> <p><br /> Unless you are on <strong>Safari 9+</strong>, you’ll see the inverted background (pink) and nothing else. <br /> Browser support <a href="http://caniuse.com/#feat=css-backdrop-filter">is limited</a> at the moment. <br /> <strong>Update</strong>: you can also make it work in the current Chrome build by enabling the <code class="highlighter-rouge">'Experimental Web Platform features Mac, Windows, Linux, Chrome OS, Android'</code> flag.</p> <p>But that’s not all! Like <code class="highlighter-rouge">filter</code>, we can use a bunch of effects, such as <code class="highlighter-rouge">brightness</code>, <code class="highlighter-rouge">contrast</code>, <code class="highlighter-rouge">grayscale</code>, <code class="highlighter-rouge">hue-rotate</code> (awesome!), <code class="highlighter-rouge">saturate</code> and more. <br /> So many possibilities, so little time! What will you build?</p> <h2 id="cool-stuff-you-can-do-with-it-suggested-by-the-community-yay">Cool stuff you can do with it (suggested by the community, yay!)</h2> <p>Got a cool use case for backdrop-filter? Drop us a line and we’ll include it here!</p> <h4 id="night-mode">Night mode</h4> <p><span style="text-align: center; width: 100%; display: inline-block; background-color: whitesmoke;"> <img src="/blog/assets/backdrop-(filter)-it-like-its-hot/backdrop-filter-css-night-mode.gif" alt="Night mode" /> </span></p> <p>Proof of concept: <a href="https://codepen.io/danmindru/pen/rrwpow">yes sir!</a> <br /> Thanks for the suggestion <a href="https://disqus.com/by/bkinney/">@bkinney</a></p> <h4 id="frosted-glass-effect">Frosted glass effect</h4> <p><span style="text-align: center; width: 100%; display: inline-block; background-color: whitesmoke;"> <img src="/blog/assets/backdrop-(filter)-it-like-its-hot/backdrop-filter-apple-frost-effect.gif" alt="Frosted glass effect" /> </span></p> <p>Proof of concept: <a href="https://codepen.io/danmindru/pen/vXJNgg">sure!</a> <br /> (Due to popular demand)</p> <h2 id="why-does-it-exist">Why does it exist</h2> <p>But wait, we already have <code class="highlighter-rouge">filter</code>? What’s the difference? <br /> Simply put, <code class="highlighter-rouge">filter</code> applies a certain (duh) filter on an element. On the other hand, <code class="highlighter-rouge">backdrop-filter</code> applies the effect to the layers (elements) underneath it.</p> <p><small>Don’t confuse setting opacity &lt; 1 to an element that has a <code class="highlighter-rouge">filter</code> with applying that filter to the elements underneath it. It’s completely different.</small></p> <p>The origin of <code class="highlighter-rouge">backdrop-filter</code> is tied to Apple’s frosted glass design on iOS (and macOS). It’s fairly popular these days, with many devs trying to reproduce it one way or another. In recent Webkit builds, creating the frosted glass effect is as easy as:</p> <p><img src="/blog/assets/backdrop-(filter)-it-like-its-hot/css-backdrop-filter-apple.jpg" alt="Apple backdrop filter" /> If you want to read more about it there’s plenty of info in <a href="https://webkit.org/blog/3632/introducing-backdrop-filters/">this blog post</a>.</p> <h2 id="why-i-dont-care-about-the-frost-effect">Why I don’t care about the frost effect</h2> <p>It’s just a trend. It’s going to disappear when the next trend comes out… use it with caution if you have to (damn, I should remove it from <a href="http://mindrudan.com">mindrudan.com</a>).</p> <h2 id="wrap-up">Wrap up</h2> <p>Convincing browsers vendors to implement this experimental feature won’t be easy. As we all know, the best way to do it is with a good song. Here it goes:</p> <p><i> …<br /> When the browser pimp’s in the crib ma<br /> (Back)drop it like it’s hot<br /> (Back)drop it like it’s hot<br /> I got the rolly on my DOM and I’m pouring Chandon<br /> And I roll the best stylesheet cause I got it going on<br /> … </i></p> <script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>