A few CSS properties I’ve been trying.
I’ve been working on creating another website and trying to improve my front-end creativity and styling. I’m using this blog to write down and share some of the things I’ve learned recently.
background-blend-mode
Using CSS blend modes is a great way to unify the look of the content across your website. It also enables you to set different color versions of an image by changing only one value in CSS: the color. There are 15 possible blend mode values, including screen, overlay, lighten, and darken.
There are a couple of implementation methods depending on the type of element you would like to apply the effect to. For example, if your using background-image and background-color, you can set background-blend-mode: darken to blend these together and make them a color overlay on the image. You can read more about this property on MDN Web Docs.
Another similar property is mix-blend-mode. This lets you blend content of the element with the content or background of its direct parent. This works especially well on overlapped lettering.
mask
Masking tells your browser which pieces of an element should be visible, and is very useful for building creative shapes and layouts. Masking can be done in three ways: using an image, CSS gradients or an SVG element. Masking is actually quite useful because it enables you to apply the same properties to background images, defining their position, size and repetition.
One great use you’ll normally see for CSS masking is in articles that combine text and images. Irregular containers and images are very popular in print, and thanks to masking this allows for the same use on the web. Here is the MDN Web Docs for mask.
clip-path
A shape’s boundary is called the clip-path, and clipping defines what area will be visible. Clipping is similar to cutting out a piece of paper, anything outside the path will be ‘cut off’, while everything inside the path will stay visible. What cool with this is that we can use shape functions and SVG as clip paths, which lets you do some cool things. For instance, you could animate them into morphing shapes.
The difference between clipping and masking is that masks are images and clips are only vector paths. It’s worth mentioning that masking will consume more memory, as you’re working with a full image so everything has to be done pixel by pixel. Again, you can read more on the MDN Web Docs.
I’m going to be checking out the HTML element Canvas this week and writing about it soon. So if you would like to check that make sure you follow up on my blogs. Thanks for reading and checking out some of my notes while I continue learning.
