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!
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![Use Custom Missing Image Graphics Using MooTools]()
Missing images on your website can make you or your business look completely amateur.
Unfortunately sometimes an image gets deleted or corrupted without your knowledge.
You'd agree with me that IE's default "red x" icon looks awful, so why not use
your own missing image graphic?
The MooTools JavaScript
Note that...
![Implement jQuery’s hover() Method in MooTools]()
jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements.
The MooTools JavaScript
We implement hover() which accepts to functions; one will be called on mouseenter and the other...
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?