I’ve previously demonstrated fullscreen background video for web pages and shown how to use mix-blend-mode to create auto-contrast text, but I’ve never combined them in a single article like this one.
Este artículo también está disponible en español
Recently there has been a call-to-arms by Jen Simmons and others to “break out the box” of traditional web design by leveraging new technologies. One common contributor to the standard “boxes inside boxes” paradigm is the issue of images: if it’s not faces inside circles, pictures are almost always presented with straight edges in a rectangular grid; partly out of convenience, partly lack of imagination or knowledge by web designers, and partly because trying to distress image edges has usually meant a lot of work in PhotoShop. But by using blend modes, we can get fresh results with little effort required.
First, you need to find an appropriate image:
Cet article est également disponible en français
An interesting use of blend modes is to enhance the appearance of diagrams and graphs. Take, for example, the classic Venn diagram illustrating the “Fast, Cheap, Good” rule: