The new Nurture Digital site utilises some of the most recent capabilities in CSS to capture an intriguing effect to mask video with animated content.

Masking on the web within anything other than a rectangular or circular shape has only recently become a possibility in CSS, and some recent advancements have really exploded some of the things we can do. Things like clip-path, -webkit-mask and such are great tools to mask content, but they have real limitations in terms of what the actual masks can be and do.

One other recent advancement has been the ability to blend layers with a property called blend-mode – this article explores how you can use layered background-blend-modes to produce a mask made up of anything to mask anything.

Blend modes function exactly like those seen in Photoshop – options include blends such as multiply, screen and color-burn amongst many others. This technique centers around mixing multiply and screen in a way in which you have always been able to in Photoshop but taken into HTML layers, presents a rather novel masking opportunity.

Step 1 – Raw Letterforms

The image below shows the scene where no blend modes are applied. A white background with black letterforms covers the entire window, in their absolute raw state. These letterforms are made up completely of CSS shapes, but in theory they can be literally anything – video, gifs, anything which merely shows movement of black shapes.

Step 2 – Screening the Mask

Here, we can see what the first of two blend modes being applied results in. A ‘screen’ (mix-blend-mode: screen) is applied to the letterforms/white-background layer, which allows anything which isn’t 100% white to be seen through to some degree (depending on the darkness). In areas of 100% black as for the letterforms, the entire scene below is visible.

Step 3 – Shedding the Skin

The video layer and lettering layer (white background with video shown within letterforms) are then themselves wrapped in an element which is blended with multiply (mix-blend-mode: multiply) – this means that anything which isn’t completely black will blend into the background. For instance, white is seen as completely invisible, meaning that the entire white around the letterforms show the bold colour backgrounds through completely.

Step 4 – Revealing Video

The effect of the mask multiplied on top of bold colours is cool, and gives a sniff of the video content. A 100% black element transitions above the letters to reveal ‘everything’ below the mask layer

Step 5 – Full Colour Video

But really, the ideal scenario is that we can show these videos in full colour when a user opts to see more – but the problem is that when opening up the video, we would still have our video blended into colour, as shown above:- The solution for this is very simple.

A 100% white (#ffffff) element below the video/lettering wrap layer but above the flat colour simultaneously follows the transition of the black element within the mask layer. This means that the area of demasking is being multiplied against white – and anything multiplied against 100% white is seen in it’s pure form!

The image below shows the screen when the video takeover is half way through – you can see the very subtle difference between the multiplied content when it’s on top of white on the left, and orange on the right.

So that’s the technique – and the thing that’s really interesting is that the elements which do the masking don’t have to even be CSS – it can be ANYTHING which is visually black. The idea is also utilised on the About page, where you can see having any sort of motion or objects within a space supply the same masking.

P.S. As a little extra something to play with – on the Nurture Digital homepage, you can type the first letter of some blend modes which produce the most interesting effects! Give C, D, E, H, L, O or S a go for some funky blend results!

Further Reading...

• Basics of CSS Blend Modes on CSS Tricks

  An article which introduces blend modes.

• Mix Blend Modes on CSS Tricks

  Going into depth specifically on the background blend mode.

• Understanding Blend Modes

  A video all about understand what different blend modes do.

Back to All Articles