mix-blend-mode: multiply
One of my favorite interview questions is "how do you stay current on emerging front-end techniques and APIs?" I always get the standard "blogs" and "RSS" answers but rarely do I ever hear "from gurus on Twitter." I find that strange because I learn loads from Twitter, especially when it comes to CSS, because a tiny snippet can do something really neat.
I had heard CSS mix-blend-mode was something awesome but this blew my mind:
Essentially, using mix-blend-mode: multiply; on an image with white background would turn that white into a level of opacity as though the image were a .png with opacity. Whoa! I created a demo here:
What an awesome bit of CSS! Thanks to Wes Bos for the heads up on this nifty CSS feature!
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![MooTools TextOverlap Plugin]()
Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...
![HTML5’s window.postMessage API]()
One of the little known HTML5 APIs is the window.postMessage API. window.postMessage allows for sending data messages between two windows/frames across domains. Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...
you know why twitter is bad source? cause it’s just like any channel throwing everything in single place: you’ll miss many important things, twitter is meant for things that are important only in a given moment, not for sharing knowledge
CSS-Tricks description: https://css-tricks.com/basics-css-blend-modes/
IE/Edge are listed as having the feature “under consideration” at caniuse: http://caniuse.com/#search=mix-blend
Holy moly, this is amazing. Didn’t know that’s possible at all even if I always wished for this feature.
Well, I learn stuff like that from sites like this. Thanks! :)
I wanted to use this on a recent website I made to save the client uploading heavy PNGs. But it doesn’t work in Edge or IE so had to remove it :(
I usually save between 50-80% of filesize by using http://tinypng.com to optimize my pngs. You should give it a go, it works wonders.
Hi! Any idea of how we do it in react-native?