mix-blend-mode

How To Specify mix blend mode For An Element In Css

Mix blend mode is an awesome way to create text which automatically changes their color whenever they come across a background with the same color. As we know, Creativity will always lead us to making some sort of interesting design but not all the designs will come out as we wanted, although a few will settle for what they do not really prefer. There are time you will be saddled with task of making a two color background with text of similar color, for instance, you have a mix color background or z-axis items of black and white and you have text of white, no doubt, your text will always cut across the white background and that will make your page visitor miss out on that information. In this case you can use the mix-blend-mode property. Below is a practical demonstration on how to specify the mix blend mode

mix blend mode example

HTML

  <div class=”main”>

      <div class=”menu”>

        <span>Welcome</span>

      </div>

      <div class=”content”></div>

      <div class=”content”></div>

      <div class=”content”></div>

      <div class=”content”></div>

      <div class=”content”></div>

      <div class=”content”></div>

    </div>

CSS

body{

background-color: orange;

}

.content {

  height: 100px;

  background-color: #0b1433;

}

.content:nth-child(2n) {

  background-color: #fff;

}

.menu {

  position: fixed;

  font-weight: 600;

  font-size: 24px;

  right: 1vw;

  top: 40%;

  writing-mode: tb-rl;

  border-right: 6px double #000;

  filter: invert(1);

  mix-blend-mode: difference;

}

If you run the code above, it will be noticed that when the text color is on a white background, the particular text changes its color to a different color so that it can be visible, that’s the importance of using the mix-blend-mode property and setting it to “difference”.

Your output should be

output with mix blend mode

Your question now will be , ok, what about the other div with a class of content?

Those div do not have a specified. So if we add width, our HTML cs will become

.content {

  height: 70px;

  width: 100px;

  background-color: #0b1433;

}

.content:nth-child(2n) {

  background-color: #fff;

}

.menu {

  position: fixed;

  font-weight: 600;

  font-size: 24px;

  left: 50%;

  top: 40%;

  transform: translate(-50%, 50%);

  writing-mode: tb-rl;

  filter: invert(1);

  mix-blend-mode: difference;

}

When you update your css, your output should be like this

text characters changed with mix blend mode

And here you can see the beauty of using this property, when the text come across a background with the same color, it changes to a different color. Even if it is just a single character that meets the same color, with mix blend mode, that character will automatically change its color

Adding animation to the text

You can make this even more interesting by making the text to animate,

use the following codes for your CSS instead

.content {

  height: 70px;

  width: 300px;

  background-color: #0b1433;

}

.content:nth-child(2n) {

  background-color: #fff;

}

.menu {

  position: fixed;

  font-weight: 600;

  font-size: 24px;

  left: 50%;

  top: 40%;

  transform: translate(-50%, 50%);

  writing-mode: tb-rl;

  filter: invert(1);

  mix-blend-mode: difference;

  animation: rotate 4s infinite;

}

@keyframes rotate {

  0% {

    transform: rotate(90deg);

    font-size: 2rem;

  }

  50% {

    font-size: 5rem;

    transform: rotate(-50deg);

  }

  75% {

    font-size: 1rem;

    transform: rotate(-90deg);

  }

  100% {

    font-size: 5rem;

    transform: rotate(-180deg);

  }

}

 Just a few animation but still cool. This sum up a very cool design we can achieve with this awesome property

For some reason, you may wonder what the writing-mode with a value of tb-r1 works for, well I can tell you that the best way to get clarity is to comment it out and refresh your page, again, by default, the filter is set to zero(0), this means if you set it to zero, you  can’t find the item.

Leave a Comment

Your email address will not be published. Required fields are marked *