This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

preface

I learned a lot about the text-* attribute before, and felt that text-shadow was really a weak attribute. However, when implementing 3D fonts today, I found that text-shadow is really useful for this kind of application scenario. In this article I’m going to implement several CSS text effects for text-shadow.

As an old starch, EDG championship heat, I am sure to gather. This article will use EDG’s log to do the demonstration.

EDG! NB!

EDG LOGO

The logo has a black circle on the outside, a white circle on the inside, and a black circle in the middle.

If I use only one div, I choose div+:: After.

The first is the black circle,

 .edg-logo {
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    background: # 000;
}
Copy the code

And then the black circle.

 .edg-logo::after {
     content: "";
     width: 210px;
     height: 210px;
     border-radius: 50%;
     position: absolute;
     top: -15px;
     left: -15px;
     z-index: 1;
     border: 10px solid # 000;
 }
Copy the code

3 d fonts

The idea of stereo fonts is to set up multiple shadows, each shadow in the X and Y axis offset direction, and the offset value is gradually increased. zuiho

  span {
        text-shadow: 0px 0px 0 #fff, -1px -1px 0 #fff, -2px -2px 0 #fff,
          -3px -3px 0 #fff, -4px -4px 0 #fff,
          -5px -5px 5px rgb(0.0.0),
          -5px -5px 1px rgb(0.0.0);
      }
Copy the code

This may not look very three-dimensional because I have fewer shadows, but the more shadows you have, the better it looks.

Hollow out the font

The idea of hollow font is to add shadows around the text, but it is best to have the same background and text color, or the same best.

 text-shadow:  1px 1px # 000, -1px -1px # 000.1px -1px # 000, -1px 1px # 000;
Copy the code

Fuzzy font

Blurring fonts should be the simplest, and text-shadow implements the option to provide a blurring value. Ask blur effect is best, suggest font color transparent.

color: transparent;
text-shadow:  0 0 10px #fff;

Copy the code

Flash font

This effect, in fact, is the cousin of the blur effect above. Blurred fonts mainly make the font color transparent, or lighter than the shadow color. This effect can be achieved without setting the shadow color. Just set the shadow blur value.

text-shadow:  0 0 15px ;
Copy the code

Of course, if you provide a color value, the effect will be more obvious.

Highlight the effect

Hollowed-out effect is to add shadows around, highlighting is to add relative color shadows on one side. Or one is close and the other is opposite.

color: #ddd;
text-shadow:  1px 1px # 000, -1px -1px rgb(219.201.201);

Copy the code