Shiv ENOW large front end

Company official website: CVTE(Guangzhou Shiyuan Stock)

Team: ENOW team of CVTE software Platform Center for Future Education

“The author:“


preface

I front-end xiaobai, recently in the art of text effect, which used a lot of CSS properties to achieve the text effect, also encountered some pits during this opportunity to make a summary, I hope to help you.

Text effects

Common text effect is divided into the following 6 kinds, and then respectively to introduce how to achieve:

  • fill
  • stroke
  • shadow
  • luminous
  • perspective
  • The reflection

1. Filling effect

Common fill effects include gradient fill and image fill, as shown below:““The above filling effect can be passedbackground-clip: textThis attribute means that the text in the block is used as the clipping area to crop out, the background of the text is the background of the block, and the areas outside the text will be clipped out, that is, the background in the block will be clipped into the foreground of the text. To achieve the effect of text filling, we must also set the Color property to transparent, whilebackground-clip:textOnly webKit kernel browsers support this, so you need to set the following:

{

  -webkit-background-clip: text;

  color: transparent;

}

Copy the code

Linear-gradient () is used to fill the background image. For example, the gradient filling CSS code is as follows:The background image is also relatively simple, but if you want to achieve the texture effect, be careful to set it at the same timebackground-repeat:repeatFor example, the image above fills the CSS with the following code:We found two bugs in Safari compatibility testing: 1, Using the Flex child element to construct text, the padding effect does not appear properly:2, The padding effect does not appear properly when using the Child element to construct text without flex:

Use flex inline Text to display inline Text.So in the“In Safari: When the backgroundClip: text attribute is used, the display: flex is not used and the inline text inside the element is displayed“

2. Stroke effect

We often see the following text stroke effect:To achieve the text stroke effect, we can use the text stroke properties provided by CSStext-stroke.text-strokeThe syntax of a property is not complicated, it is simply a combination of these two CSS properties:text-stroke-widthandtext-stroke-color, the width of the stroke and the color of the stroke. Simple hint:

{

 -webkit-text-stroke: 2px red;

}

Copy the code

After verification, it is found that text-stroke adopts the feature of center stroke, which will reduce the text weight of the real text, because half of the stroke width will cover the text area. In order not to weaken the text weight,“We came up with a way to overlay two DOM elements: the first element sets the stroke effect, and the second element sets the same foreground color as the first, covering the inner stroke of the underlying element.“For example, the above implementation is as follows:

3. Shadow effect

The shadow effect is probably the most common text effect, such as the following: text-shadowYou can add shadows to text. Each shadow value consists of the offset of the element in the X and Y directions, the blur radius, and the color value. In addition, the shadow effect can also be superimposed. Every time the shadow is superimposed, it is separated by a comma. The specific Settings are as follows:

4. Luminous effect

The glow effect is actually a special shadow effect, as shown below:To achieve the glow effect,“just“text-shadow“The offset in the X and Y directions is 0, and the glow color value is the shadow color value“So it looks like there’s a glow effect around the text. For example, the glow style Settings above are as follows:

5. Perspective effect

The perspective we usually see looks like this:As you can see from the figure above, we can usetransformProperty to achieve the perspective effect, first skew along the X-axis (skew), then scale along the Y-axis (scaleY), transform the origin (transform-origin) is the position at the lower right corner of the element, but in order to remain aligned with the bottom of the text after the transformation, the transformation origin coordinate Y value is the position at the text baseline. How do we calculate the baseline position using SVGTextElementgetBBox()Math.abs(getBBox().y) baseline = math.abs (getBBox().yStab hereLook at it. There is another point to note:transformProperties are modified directly to the original element, so you need to use a separate DOM element below the original element hierarchy for perspective, as shown in the image above:The specific CSS code is as follows:

.transform {

  transform: skew(60deg.0deg) scaleY(0.3);

    filter: blur(1px);

    transform-origin: 150.469 px. 41.8711 px.;

}

Copy the code

Filter is used for perspective effect blur processing, and the passed parameter is blur radius.

6. Reflection effect

The reflection effect we often see is shown below:We could have used CSS-webkit-box-reflectProperty, with the gradient brush can achieve the reflection effect, which-webkit-box-reflectThe syntax for attributes is as follows:

-webkit-box-reflect: [ above | below | right | left ]? <length>? <image>?

Copy the code

It consists mainly of three parameters:

  • Location: reflection toward (above | below | | right left)
  • Offset size: The distance between the reflection and the original element
  • Mask image: Mask control of element reflections. The syntax is similar to background-image.

If the mask image is using a gradient brush, pay attention to the gradient direction Settings because it is inverted. For example, the code for the reflection effect is as follows:

{

  color: rgb(237.125.49);

  -webkit-box-reflect: below -13.8438 px. linear-gradient(rgba(255.255.255.0) 0%.

    rgba(255.255.255.0.13) 40%.rgb(255.255.255));

}

Copy the code

The last

I believe that after reading the above introduction, should be on the text effect how to achieve some understanding, in fact, a lot of text effect is not a single effect to achieve, usually by a combination of several effects to complete, such as the following effect:It is a combination of stroke, fill and perspective effects. To ensure the best effect, you need to manage the levels of each effect. For example, in the image above, the perspective effect has the lowest level and the fill effect is the highest. This article just gives you a brief introduction to some commonly used text effects. In practical applications, it is necessary to set the effects for different sizes of text. At this time, some effects (perspective, reflection) need to consider the baseline alignment of text effects, such as the following effect:How to do baseline alignment? We will cover it next time due to time constraints. Thank you for reading