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!
![Conquering Impostor Syndrome]()
Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...
![How I Stopped WordPress Comment Spam]()
I love almost every part of being a tech blogger: learning, preaching, bantering, researching. The one part about blogging that I absolutely loathe: dealing with SPAM comments. For the past two years, my blog has registered 8,000+ SPAM comments per day. PER DAY. Bloating my database...
![Create a Context Menu with Dojo and Dijit]()
Context menus, used in the right type of web application, can be invaluable. They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available. Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...
![Create a Download Package Using MooTools Moousture]()
Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP.
The XHTML
We provide...
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?