Blending Modes

I am Javier, a guy starting in this world of web development. My background is the filmmaking business, especially the video edition. I am writing this article to help guys like me that are learning web development or everyone that considers the design or the “look” of a webpage one of their passions. Back in my days of video-editor one cool thing that I found in the software video and design editors was the ability to blend two images or more in order to display better. So if you just put an image in a given color background you can start to discover how the different values can make interesting looks.

Blending Modes is a CSS data type that handles how elements overlap, it takes the color of the layers or elements stacked, mix them and create a new combination or output. You can play with blend modes with two CSS properties: and . The first one is used with background images and the values work with the images that are just inside the background property of the element. This would be how it looks in the code:

<background-blend-mode>

In the HTML:

   <div class="parent"> 

        <h1 class="street">Blend Modes </h1>

        </div>

In the css

   .parent { 

        background: url("assets/textureBricks.jpg");

            height: 600px;

        }

        .child {

        mix-blend-mode: screen;

        }