CSS text shadow text-shadow hover effect

This article will focus on using the CSS text-shadow property to achieve interesting mouseover effects, but will not actually make any text shadow effects for these texts.

text-shadow No text shadow?

Through the mouseover effect in the following gif, I believe you can understand why there is no shadow when using text-shadow.

When you see this picture, your first impression is whether you copied a text, such as creating a pseudo-element, setting content: 'text' , and then setting a separate animation for it. However, this article uses text-shadow to achieve implementation. Next, we will explain the implementation of four hover animations.

text-shadow syntax

text-shadow Add shadow to the text, you can add multiple shadows to the text. When adding multiple shadow values, separate them with commas. Each shadow value consists of the element's offset in the X and Y directions, blur radius, and color value.

 text-shadow: h-shadow v-shadow blur color;

parameter	describe
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow	Required. The position of the vertical shadow. Negative values are allowed.
blur	Optional. Blurred distance.
color	Optional. Shadow color.

Hover Effect #1

The CSS code is as follows, we set the actual color of the text to be transparent (color: #0000); then create two shadows through text-shadow , the optional parameter blur is not set, so we get a clear shadow , you can create cool effects by setting different colors and vertical values.

 .hover-1 {
  line-height: 1.2em;
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 1.2em #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  text-shadow: 
    0 -1.2em #000, 
    0 0 #1095c1;
}

As shown in the figure below, the red dotted area is the visible area of our page. By setting overflow: hidden , the repeated text will be invisible, and the transition time of transition is increased during the hover, it looks like two texts are displayed alternately, this is this article The main trick in the example.

Next, we can continue to optimize our CSS code. As shown in the above code, we have used 1.2em many times to define the height of the shadow and the offset of the movement. The optimized code through CSS var() custom attribute value is as follows :

 .hover-1 {
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 var(--h) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #1095c1;
}

This is still not concise enough, and you can continue to optimize through calc():

 .hover-1 {
  --h: 1.2em;   

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 calc(-1*var(--_t, 0em)) #000, 
    0 calc(var(--h) - var(--_t, 0em)) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  --_t: var(--h);
}

Hover Effect #2

This animation mainly uses two properties, text-shadow and background , text-shadow still set two layers, but this time only need to move the following one, Set the color above to transparent during the move. At the same time, add a background-size to modify the background color.

 .hover-2 {
  /* the height */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t,var(--h)) #fff,
    0 0 var(--_c, #000);
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% var(--_d, 0) no-repeat;
  overflow: hidden;
  transition: 0.3s;
}
.hover-2:hover {
  --_d: 100%;
  --_t: 0;
  --_c: #0000;
}

Above, we created the hover effect by combining the CSStext-shadow and background attributes, but we can continue to use CSS variables to optimize the code, and in the end we only need a CSS custom attribute variable.

 .hover-2 {
  /* the height */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_i, var(--h)) #fff,
    0 0 rgb(0 0 0 / calc(var(--_i, 1) * 100%) );
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% calc(100% - var(--_i, 1) * 100%) no-repeat;
  overflow: hidden;
  transition: 0.3s;
}
.hover-2:hover {
  --_i: 0;
}

Hover Effect #3

This effect is based on the first animation effect in this article and adds a pre-animation effect. After the final optimization, you only need to control a CSS custom variable.

 .hover-3 {
  /* the color  */
  --c: #1095c1;
  /* the height */
  --h: 1.2em;

  line-height: var(--h);  
  color: #0000;
  overflow: hidden;
  text-shadow: 
    0 calc(-1 * var(--h) * var(--_i, 0)) var(--c), 
    0 calc(var(--h) * (1 - var(--_i, 0))) #fff;
  background: 
    linear-gradient(var(--c) 0 0) no-repeat
    calc(200% - var(--_i, 0) * 100%) 100% / 200% calc(100% * var(--_i, 0) + .08em);
  transition: .3s calc(var(--_i, 0) * .3s), background-position .3s calc(.3s - calc(var(--_i, 0) * .3s));
}
.hover-3:hover {
  --_i: 1;
}

Hover Effect #4

This hover effect is an improved version based on the second effect, here we use --- clip-path , we use inset(0 0 0 0) similar to overflow: hidden what we see is only actual text. On hover, we update the third value (representing the bottom offset) with a negative value equal to the height to reveal the text layer placed at the bottom. Since we need to run the clip-path animation before everything else, we add delays on hover to all properties except clip-path :

 transition: 0.4s 0.4s, clip-path 0.4s;

On mouse out, we do the opposite:

 transition: 0.4s, clip-path 0.4s 0.4s;

final complete code

 .hover-4 {
  /* the color  */
  --c: #1095c1;
  /* the height */
  --h: 1.2em;
  
  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t, var(--h)) #fff,
    0 0 var(--_c, #000);
  box-shadow: 0 var(--_t, var(--h)) var(--c);
  clip-path: inset(0 0 0 0);
  background: linear-gradient(var(--c) 0 0) 0 var(--_t, var(--h)) no-repeat;
  transition: 0.4s, clip-path 0.4s 0.4s;
}
.hover-4:hover {
  --_t: 0;
  --_c: #0000;
  clip-path: inset(0 0 calc(-1 * var(--h)) 0);
  transition: 0.4s 0.4s, clip-path 0.4s;
}

At last

The above examples only use one element and CSS to achieve several complex hover effects, and do not need to use other elements and pseudo-elements. Based on the above animations, it can be found that we can combine different animations to form more complex animation effects without relatively large costs.

After reading it, you find it useful, remember to like 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)