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!
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Full Width Textareas]()
Working with textarea widths can be painful if you want the textarea to span 100% width. Why painful? Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least. Luckily...
![Create a Simple Slideshow Using MooTools]()
One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.
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?