- css 2017-03-19T16:58:15+01:00 https://fadeit.dk/blog/tag/css.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> HTML emails & email signatures, how hard can it be?! 2015-10-21T02:23:32+02:00 https://fadeit.dk/blog /2015/10/21/html-emails-and-email-signatures-how-hard-can-it-be <h2 id="tldr">TL;DR</h2> <p>I put together some gulp stuff to generate simple HTML email signatures / templates &amp; hope others will find it useful. Check out <a href="https://github.com/fadeit/responsive-html-email-signature">the repo</a>. There’s plenty to do to improve it, so fork away! The current samples look like this:</p> <p><img src="/blog/assets/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-signature-light.png" alt="Light Signature" /></p> <p><img src="/blog/assets/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-signature-dark.png" alt="Dark Signature" /></p> <h2 id="intro">Intro</h2> <p>A few weeks ago I was listening to the the JavaScript Jabber <a href="https://devchat.tv/js-jabber/177-jsj-ui-validation-with-oren-rubin/mini_player">episode 177</a> with <a href="https://twitter.com/shexman">Oren Rubin</a>. For those that know nothing about Oren, he’s been developing stuff for the past 20 years. In his career he worked with machine learning, distributed computing and compilers, just to name a few. He moved on to web development afterwards, which he admits in the podcast was ‘the really hard stuff’. I know many of you would be tempted to close this article, run outside and burst into tears of joy… but there’s actually more to this post!</p> <p>Web development <strong>is hard</strong> indeed. It also seems like it’s not going to get easier anytime soon. Hell, the next generation of web developers won’t be able to work on a so called ‘web application’ without using some sort of transpiler. You will be the laughing stock of the web if you are still writing in ES5 (or ES6 in about a year or so). The days of writing code in Notepad++ and refreshing a page in a browser are gone and they are not coming back.</p> <p>So… you need to know all the new stuff, but that’s not enough. You also need to know all the old stuff, because the web is not your colleague with a MacBook Pro using the latest version of Chrome. The web is any device with an internet connection, so we have to develop accordingly. I’ll say it again:</p> <blockquote> <p>Web development is hard. Damn, web development is hard!</p> </blockquote> <p>I believe the web today is not much different from the web 10 years ago (in a philosophical sense at least), however the ‘what’ and ‘how’ of web development have changed quite a lot. I am not talking about JS frameworks here or smartphone apps, but the stuff ‘under the hood’: the way we think of progressive enhancement (after all, we should learn from past mistakes), mobile-first designs, responsive layouts, etc.</p> <p>You see, a lot of these revolutionary changes are strongly related to layout. In fact, web layout is changing again as we speak (web-time, not human-time). We moved from tables, wacky flash sites knew how to navigate, grids, now (almost) flexbox, tomorrow CSS shapes / multi columns layouts and who knows… as VR enters mainstream - some kind of 3D layout that we can’t even imagine yet.</p> <p>(I get it, I’m bad at intros but I’ll make my point super soon, promise)</p> <p>Before we look ahead, we need to take a good look back. We need to focus on a place forgotten by the web… a dark and scary box that gives me shivers when I think about it. I am of course talking about <code class="highlighter-rouge">email</code>, the last medium on the web were table layouts are the norm.</p> <p>We need to take a good look at it and face the truth - we messed up.</p> <p>Don’t get me wrong, there has been progress, but in general email clients still suck. If there were some ‘html email standards’ the story might have been similar to the browser one, but there aren’t. Everybody is free to do whatever they want. <br /> I am not thinking about crazy things here. It would be enough if we could ditch table layouts and inline styles. I would also be happy if email clients would have some basic support for media queries. Sure, it would be even nicer if we were able to do CSS3 animations or whatnot, but that’s not what I really care about.</p> <p>It’s hard enough to work with nested tables as it is. When you throw a sausage of inline CSS in the mix, various techniques to punch your computer will suddenly become appealing to you.</p> <h2 id="the-bad-news">The bad news</h2> <p>There’s no way to get rid of tables / nested tables. There is just hope and tears. I’ll point out a very unlikely solution later in the article.</p> <h2 id="the-good-news---in-your-face-inline-css">The good news - In your face, inline CSS</h2> <p>As you probably figured out from the intro, I got fed up with all of this. That inline s*** is impossible to maintain. So I started on a very basic (I thought) gulp build system to reduce my increasingly high blood pressure. About 10 npm modules later, I realized this entire business could take a couple of hours.</p> <p>My attempt to destroy inline styles and attributes was fairly successful. I used <a href="https://github.com/jonkemp/gulp-inline-css">gulp-inline-css</a>, thanks to <a href="https://twitter.com/jonkemp">@jonkemp</a>. <br /><small>By the way, inlining CSS is the new black (performance benefits), check out <a href="https://github.com/addyosmani/critical">this cool lib</a></small>.</p> <p>Unfortunately, you can’t get rid of all of them. I learned that if you wish to be on the safe side, you should use attributes whenever you can (progressive enhancement, remember?). Here are some of the things that don’t work:</p> <ul> <li><strong>width</strong> will be added as an attribute only if it’s provided in pixels</li> <li><strong>height</strong> won’t be added as an attribute at all</li> <li><strong>background-color</strong> won’t become <strong>bgcolor</strong></li> <li><strong>text-align</strong> won’t become <strong>align</strong></li> <li><strong>vertical-align</strong> won’t become <strong>valign</strong></li> <li>etc. See <a href="https://github.com/jonkemp/inline-css/issues/8">this issue</a> for more</li> </ul> <p>On the flip side, <strong>border</strong>, <strong>cellpadding</strong> &amp; <strong>cellspacing</strong> will work just fine.</p> <h2 id="re-using-templates">Re-using templates</h2> <p>It’s common that footers or headers are redundant across templates. I figured that the ability to include templates would come in handy, so I installed the awesome <a href="https://github.com/jas/gulp-preprocess">gulp-preprocess</a> plugin.</p> <p>I could then include files by writing up some HTML comment directives (e.g. <em>‹!– @include head.inc.html –›</em> and that’s about it. There are other useful directives, for displaying stuff from a configuration file you can use <em>‹!– @echo foo –›</em>.</p> <p>If pre-process was a dependency anyway, I figured might as well go deeper and do a configuration-based setup. Fast-forward a few npm modules and I ended up with a build system that can take multiple templates &amp; can handle contact info for a team (if you want it too). Here’s an overview of how it works:</p> <p><img src="/blog/assets/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-build-diagram.png" alt="Diagram: overview of what the build process can do" /></p> <h2 id="going-forward">Going forward</h2> <p>If gulp was already there I thought I should also add the classical pre-build clean-up &amp; watch the HTML, CSS &amp; configuration files for changes. I went further and minified HTML &amp; inline styles (<em>‹style›</em>), embedded images in the template (base64) for local assets and probably some other smart thing that I can’t remember at the moment.</p> <p>But why stop here? Let’s throw everything we have at it… hell, can we even make a HTML email ‘transpiler’, which converts semantic HTML into a table layout &amp; adds schema.org attributes automagically? Let’s generate screenshots of tests on the popular email clients, all at the convenience of our terminal. Let’s add pre-processor support… How do <strong>you</strong> think we can make writing email templates easier?</p> <p><a href="https://github.com/fadeit/responsive-html-email-signature/issues">Let’s get this over with, once and for all!</a></p>