In applications like photoshop, you are spoilt for choice when it comes to giving your graphics that X factor. Over the years many of these effects have been implemented in CSS3. one such effect is the mixed-blend-mode CSS property. This property can take the following values: screen, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. These effects are mainly categorized into the lightening or darkening effect categories. To see how CSS interprets these effects I put together this tutorial, which looks at the screen blend mode.
In screen blend mode you have a top layer of solid colors (this can be considered as a mask ) and a bottom layer that contains a color image. In the example above, the top layer is black, white, and shades of gray. After you apply the effect, the left side of the image is clear, this is because black areas become totally transparent. But as you gradually look towards the right of the image, the gray areas have half transparency, while the white area is opaque. Knowing how this works you can use black text on a white background and use as a mask over an image.
In the tutorial, I put together a little demo page with a vibrant background image which is overlayed with a flex grid with eight boxes., Then I applied the screen blend modes to select a group of boxes as shown below.
You can have a play around with different colors, gradients, transparency to get many effects. Hope you enjoy the video.
Top comments (0)