“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

As the fifth article of “How many tricks can text effects play”, this article takes you to achieve gradient text and text reflection.

Basic knowledge of

The background-clip attribute and the -webkit-box-reflect attribute will reflect two different effects.

  • Background-clip: Sets whether the element’s background (background image or color) extends below the border, inner margin box, and content box. There are four attribute values, which are described below:
    • border-box: Background extends to the edge of the border (but below)
    • padding-box: Background extends to the inner margin (paddingAlong the outside). It’s not drawn to the border
    • content-box: The background is cropped to the content area (content boxAlong the outside)
    • text: The background is cropped to textThe foreground
  • -webkit-box-reflect
-webkit-box-reflect: [ above | below | right | left ]? <length>? <image>?
Copy the code
  • Orientation: Sets the orientation of the reflection
  • Offset: Sets how far the reflection deviates from the original element
  • Mask image: Adds a mask layer to an element’s reflection. The effect syntax is similar to that of background-image.

The gradient words

Because the color attribute can not be set gradient color, so the realization of gradient text is not easy, but many big guys have also discovered a variety of implementation schemes through exploration. For example, using canvas CanvasRenderingContext2D. CreateLinearGradient () method; Use background-clip: text with background to achieve; -webkit-mask is implemented with attR.

This paper mainly uses background-clip: text and background to achieve.

  1. Background is set to gradient
background: linear-gradient(90deg.#7e40ee.#00f.#63d9ee);
Copy the code

2. Background-clip: text Clipping gradient

-webkit-background-clip: text;
background-clip: text;
Copy the code
  1. Set the text color to transparent
color: transparent;
Copy the code

The gradient text effect is achieved.

Text reflection effect

Chrome provides the -webkit-box-reflect attribute, which makes it easy to reflect in Chrome.

color: rgb(237.125.49);
-webkit-box-reflect: below -2px -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0.0.0.0)),
    to(rgba(255.255.255.0.2)));Copy the code

Note: I tested that this property must be defined on the border box element, the span setting is invalid. And the current properties may not be compatible with Firefox and Opera.

Past wonderful articles

  • Cow guest latest front-end JS written test 100 questions
  • The latest front end of the interview questions summary (including analysis)
  • Grab the latest front end test five hundred data analysis JS interview hot spots
  • Happy cat stroking for VSCode and website adoptive cats
  • Native JavaScript soul Test (1), how much can you answer?
  • A thorough understanding of prototypes and prototype chains in JavaScript
  • Complete understanding of EventLoop in JavaScript
  • “2W word big chapter 38 interview questions” completely clear JS this pointing to the problem
  • Reference: Staggered Bouncing 3D Loading
Copy the codeCopy the code

After the language

Guys, if you find this article helpful, give a like to 👍 or follow ➕ to support me.

In addition, if this article has a question, or do not understand part of the article, you can reply to me in the comment section, we come to discuss, learn together, progress together!

If you feel that the comment section does not understand, you can also add my wechat (li444186976) or QQ (3315161861) for detailed communication, the name is battlefield small bag.