CSS mix-blend-mode and GoGo Penguin
This week was a pretty straight forward win.
The aim was to reproduce the GoGo Penguin - Man Made Object cover, but figuring out blend modes in CSS. For some reason I felt this would be really complicated, but in the end it was super easy. One rule and I was done!
The main trick was not to use blend-mode from a background, but mix-blend-mode on the whole elements.
GoGo Penguin - Man Made Object https://codepen.io/loficodes/pen/PVXOjZ
Kasabian - 48:13: https://codepen.io/loficodes/pen/jdoNeX
MDN CSS mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
If you enjoyed this article, sign up here to get new articles whisked straight to your inbox!