spooky cyber buddha image

Buddha-Vision

Go here and have a look: https://whitelightninggun.github.io/Buddha-Vision/

The key to this visual effect is using the CSS pseudo-element ::before in order to set a background image to the text box, which is then convolved with the underlying image using the CSS property “mix-blend-mode“.

“mix-blend-mode: multiply” – this convolves the white text with the underlying background image to control opacity, creating the effect.
Setting “mix-blend-mode: normal” makes the image opaque again.

CSS blend modes offer a computationally cheap way to get extravagant and eye-catching visual effects with a little imagination and a firm understanding of colour theory. A good description of the underlying mathematics can be found with the GIMP documentation: https://docs.gimp.org/2.8/en_GB/gimp-concepts-layer-modes.html

Tags