.jpeg)
Introduction
Did you know you can create varying gradient background colors using the same single video file? Doing this can save designers countless hours of having to replicate the same video a number of times – and gives them the freedom to control the look and feel within code – all thanks to CSS Filters.
The Mini Tutorial
In this mini-tutorial, I’m going to cover how we went about creating the banners above with various color tones from a single video file using CSS filters.
I’ve also created a little mini tool at the end that allows you to see the various CSS filters in action!
First, let’s create our video banner. As you can see from our banner, we made it fully responsive by ensuring that the middle of the video always stays centered on the screen – not stretching the video.
We can accomplish this by creating a simple video container and adding the video of our choice that’ll be used as the background.
See the code below for an example:
Let’s have some fun now and see how we were able to accomplish the variations on the different pages.
Using CSS filters, we can apply various changes to apply various graphical effects to an element such as blur, brightness, contrast…etc
To play around with the colors, we can apply the hue-rotate property, which basically applies a hue rotation on the specific property (our video in this example).
We gave our video the following changes: filter: hue-rotate(301deg). Let’s see how it looks.
Pretty cool, eh? If this mini tutorial was helpful, feel free to shoot me an email at sam.kim@anyday.inc to let me know!
.svg)
