Pure CSS achieves four ways of text contrast color effect

As shown in the figure above, with the interactive changes of the interface, the text will modify the color of the text to form a contrasting color, so that the ordinary text has a bright effect. If you pay attention to design and animation effects, you must have seen a lot of such effects, and some websites that focus on design have similar interactive effects. This article will explain in detail what schemes can achieve text contrast color effects.

animation effect one

The blue background color of the text extends from left to right to the entire element. The background color of the text changes with the background color overlay process, and the two texts have different colors.

Implementation process

As shown in the figure, the background of the two colors is two elements, a green box and a blue box, where the green box uses the positioning level z-index higher than the blue box; by changing the width of the blue box Cover the green box; the width of the text content in the box is fixed, otherwise the two texts cannot just overlap.

The core code is as follows:

 <div id="left-side" class="side">
  <h2 class="title">
    前端开发
    <span class="fancy">南城FE</span>      
  </h2>
</div>
<div id="right-side" class="side">
  <h2 class="title">
    前端开发
    <span class="fancy">南城FE</span>    
  </h2>
</div>

 .side {
  display: grid;
  height: 100vh;
  overflow: hidden;
  place-items: center;
  position: absolute;
  width: 100%;
}

.side .title {
  font-size: 2vw;
  margin: 0px 10vw;
  text-align: center;
  width: 80vw;
}

#left-side {
  width: 50%;
  z-index: 2;
}

animation effect two

As the page scrolls, the gray area gradually becomes larger. The original source of the gray area is a picture, but for the loading speed of GIF, it is changed to a gray background. At the same time as the picture becomes larger, the text gradually becomes smaller, and gradually integrates into the inside of the box. The color of the text changes from black outside the box to white inside the box, forming a text contrast color effect.

Implementation process

This effect is more complex than the animation effect 1 in this article. It is no longer just a change in one dimension to form a contrasting color, but multiple dimensions are changing at the same time. The general principle and effect are not much different, and there are slight differences.

• The whole is still two boxes, and the element level in the middle gray area z-index is higher than the plain text element
• The size of the text content in both elements is fixed
• The gray element uses clip-path crop the element background. This attribute can crop a variety of graphics. In the example, inset() is used to crop the rectangle. Similarly, other shapes are also possible.

The core code is as follows:

 <div class="out">
  <div class="warpper">
    <div class="text-wrapper">南 城 F E</div>
  </div>
  <div class="bg-wrapper">
    <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dae42da0ace3424d84b3bdc58c922296~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"/>
    <div class="text-wrapper">南 城 F E</div>
  </div>
</div>

 .out {
  position: relative;
}
.warpper {
  position: absolute;
}
.bg-wrapper {
  position: absolute;
  z-index: 0;
  animation: run 2s infinite alternate-reverse;
}

@keyframes run {
  0% {
    clip-path: inset(47.5px 150px);  
  }
  100% {
     clip-path: inset(147.5px 350px); 
  }
}

Source code online preview:
https://code.juejin.cn/pen/7117913609337831455

Animation effect three

The mouse hover animation effect of the button. When hovering, a black background appears in the button background area from left to right, and the text color in the black background changes from the default black to white, forming a contrasting color. This effect is mainly based on background-clip: text . The main function of this property is to cut the background into the foreground color of the text. This property is not yet fully supported by all browsers. Google Chrome also needs to be set -webkit- Prefix support.

Implementation process

There are many types of hover animation effects similar to forming contrasting colors, such as the moving direction of the background animation is different, or the background area is divided into multiple areas for different animations. Without considering the animation, first look at the following picture analysis code implementation.

• The text color in the black area of the background forms a contrast, set background-clip: text, padding-box;
• The black area of the background is a parallelogram, which is actually a normal black rectangle rotated by an angle, but because the effect outside the black background is normal, the rotated background is composed of white, black and white multi-segment colors. Here we use linear-gradient achieve, the main thing is to use background-clip: text , so the final background color value is reflected in the color of the text
• Set background-position make the black background area outside the visible area of the element, and change it when hover background-position to produce an animation effect

The core code is as follows:

 .inverted-8 {
  background:
    linear-gradient(-45deg, #000  40%, #fff 0 60%, #000  0) right/300% 100% no-repeat,
    linear-gradient(-45deg, #0000 40%, #000 0 60%, #0000 0) right/300% 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
}
.inverted-8:hover {
  background-position: left;
  transition: 0.8s
}

Online preview of various hover effects source code:
https://code.juejin.cn/pen/7118274756322787341

Animation effect four

This effect is similar to Effect 1, the text moves in two different background colors, and the text produces a contrasting color effect

Implementation process

This effect seems to be similar to Effect 1, but the code implementation is very different. It is no longer necessary to create multiple DOM elements, and the background color is generated using linear-gradient gradient. Use mix-blend-mode: difference for the text element to achieve the effect of contrasting colors. It seems that it is too simple, the main thing is to use mix-blend-mode , usually called mixed mode, and difference means difference mode, in this mode, each channel will be checked. Color information, compare the background color and the drawing color, and subtract the pixel value of the darker pixel from the pixel value of the lighter pixel. Since black has a luminance value of 0 and white has a luminance value of 255, shading with black has no effect, and shading with white produces the inverse of the original pixel color being shaded.

The core code is as follows:

 div {
    height: 100vh;
    font-size: 30px;
    background: linear-gradient(90deg,  rgb(0, 0, 0) 50%, #fff 50%);
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      position: absolute;
      top: 50%;
      left: 50%;
      color: #fff;
      transform: translate(-50%, -50%);
      animation: move 2s infinite linear alternate;
      mix-blend-mode: difference;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

The contrast effect of black and white in the solid color mode is the best, because the contrast color is automatically generated, and the CSS color cannot be completely customized like the effect 1. If it is other colors, it is necessary to choose more in actual use. However, if this mode is applied to the background of the picture, the effect is relatively good, because the contrast color is automatically calculated, and different contrasts will be formed when encountering different pixels.

Source code online preview:
https://code.juejin.cn/pen/7118362939152662535

Summarize

This article enumerates several effects and different implementation methods of text forming contrasting colors in CSS. Each method has corresponding advantages and disadvantages. In actual business usage scenarios, more reference is required to select the most suitable solution for use. For example, the use of effect pair color is very flexible, but it needs to create repeated DOM, and effect four code is concise and clear, but it needs to be used with discretion when encountering non-black and white. Modern CSS is very powerful. If you have other solutions, please leave a message. If you find it useful at the end, remember to like it and save it, maybe you will use it someday.

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)

Reference link

Super Header Slider

css-hover-effects-background-masks-3d

Magical CSS, let the text intelligently adapt to the background color

mozilla-clip-path