Shulou(Shulou.com)06/03 Report--

This article is about how CSS and SVG add gradients, strokes, and projections to text. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

You can often see specially treated title text in some web activity pages, such as this

Ignoring the special font for the time being, by designing the layer style of the draft, we can find that there are three text special effects, namely, gradient, stroke and projection.

As an aspiring front-end, I certainly won't use pictures directly. Here, I use CSS and SVG to realize it. Let's take a look.

Warm Tip: there are many details of the article. If you are not interested, you can also skip to the bottom to view the online demo.

1. CSS text gradient

Let's first look at the implementation in CSS.

There is no direct attribute in CSS to set the text gradient, usually the text can only be solid color. However, you can use the background clipping background-clip to make the background color display in the text area. It looks like the text has a gradient.

Custom-made for you to find wonderful

.text {background-image: linear-gradient (# FFCF02, # FF7352); background-clip: text;-webkit-background-clip: text;}

But it doesn't work. The text is still the default color.

The reason is actually very simple, because it is a cropped background, the last display is the background color, colored text is covered on the background, so here you need to set the text color to transparent, which can be achieved with color and-webkit-text-fill-color.

.text {background-image: linear-gradient (# FFCF02, # FF7352); background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; / * text transparency * /}

So you can see the text gradient effect.

II. Gradual change of SVG text

Let's take a look at the text gradient in SVG.

Text gradients are naturally supported in SVG. Text can be treated as a common vector path. The structure is as follows

Custom-made for you to find wonderful

It can be filled directly through fill, but it should be noted that filling is a little more troublesome here. Unlike CSS, you must use a special gradient tag. If you are interested, you can check linearGradient-SVG | MDN (mozilla.org), which needs to be defined in.

Custom-made for you to find wonderful

The label in defines the color slope of the gradient, offset and stop-color define the node and color of the gradient, respectively, and then fill the gradient with the fill attribute (indicates id)

.text {fill: url (# gradient);}

The effect is as follows (it's not because of the problem with the image loading)

So there are two problems.

The horizontal and vertical directions of the text are not centered.

The gradient direction is horizontal to the right.

First of all, look at the first question. The adaptive processing of text in SVG is still very weak, for example, in SVG, which is common in CSS, line wrapping can only be done manually at specified locations. Here you need to center two properties, text-anchor and dominant-baseline, which are text anchor point alignment and text baseline alignment, which is simply horizontal and vertical alignment.

.text {text-anchor: middle; dominant-baseline: middle; fill: url (# gradient);}

At the same time, the x and y positions need to be set. The percentage here can be compared with the percentage of background positions in CSS.

Custom-made for you to find wonderful

So it shows in the middle.

The gradual direction is determined by two sets of coordinates: x1, y1, x2 and y2 in SVG. Given a rectangle, the upper left corner is [0heroin 0] and the lower right corner is [1,1], so that any angle can be expressed.

For example, if you need a vertical downward direction, you can set x1 = "0" y1 = "0" x2 = "0" y2 = "1" as follows

Custom-made for you to find wonderful

The effect is as follows

3. CSS text strokes

CSS has a special attribute for text strokes-webkit-text-stroke, which controls the width and color of the stroke, such as

.text {- webkit-text-stroke: 2px # 333;}

The effect is as follows

There is indeed a stroke, but the text seems to have lost a circle. If it is not obvious, you can set it a little bigger.

As you can see here,-webkit-text-stroke actually centers the stroke and overlays the text, and cannot change the stroke method. In fact, many design tools can choose strokes, such as figma

So, how to achieve the outer stroke effect?

It's okay, too! Use two layers of text, one layer of text stroke and one layer of text gradient. In order to save tags, pseudo elements can be used to generate

Custom-made for you to find wonderful

:: before setting gradient, located at the top, the original text setting stroke, located below, pay attention to remove the-webkit-text-stroke of:: before

.text:: before {content: attr (data-title); position: absolute; background-image: linear-gradient (# FFCF02, # FF7352); background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-text-stroke: 0;} .text {- webkit-text-stroke: 6px # 333;}

The overlay is as follows

Changing different strokes will not cause the text to "get thinner".

4. SVG text strokes

SVG can also achieve the stroke effect, which is similar to CSS. It should be said that CSS borrows from SVG and controls the stroke color and size through stroke and stroke-width, such as

.text {/ * other * / stroke-width: 4px; stroke: # 333;}

You can get this effect.

Like the CSS performance, they are centered strokes and cannot be changed.

The difference is that SVG control is more flexible, the default is to fill, and then stroke, so it seems that the stroke is on top of the fill, but we can change this rule, set the first stroke, and then fill, then the fill color will overlay the stroke. Those who change this rule in SVG can be set through paint-order. About this attribute, those who are interested can visit teacher Zhang Xinxu's article: CSS paint-order wishes everyone New Year's Day Happy.

.text {/ * other * / stroke-width: 4px; stroke: # 333; paint-order: stroke; / * edge first * /}

This achieves the effect of external strokes, which is much more convenient than CSS?

In addition, SVG can also set the shape of the corner of the stroke path, for example, the setting of the corner in figma is as follows

The corresponding property in SVG is called stroke-linejoin. Here is the fillet, which can be set as follows.

.text {/ * other * / stroke-width: 4px; stroke: # 333; paint-order: stroke; / * Edge first * / stroke-linejoin: round; / * path corner to fillet * /}

The effects of various attributes are as follows

5. CSS text projection

Continue to add effects. CSS can add text projection through text-shadow

.text {- webkit-text-stroke: 6px # 333; text-shadow: 0 4px 0 # 333;}

And it turned out like this.

In fact, the reason is also related to the text gradient, the gradient is actually the background color, the text is transparent, so add a shadow to the text, as a result, the shadow covers the background. In addition to using text-shadow, it can also be implemented through the drop-shadow filter

.text {- webkit-text-stroke: 6px # 333; filter: drop-shadow (0 4px 0 # 333);}

In this way, it is perfect.

VI. SVG text projection

SVG is more flexible. For example, the drop-shadow filter used above actually draws lessons from the filter in SVG, so SVG can also be implemented in this way.

Custom-made for you to find wonderful

Here the parameters in dx, dy, stdDeviation, flood-color and drop-shadow (dx,dy,stdDeviation,flood-color) correspond one to one, so I won't explain much, and then apply the filter to the text.

.text {/ * other * / filter:url (# shadow);}

This can also achieve text projection.

In fact, there is no need to be so troublesome in SVG. The reason why text-shadow can not be used just now is that the text gradient implemented by CSS is a background and a fake text gradient, but it is a real gradient fill in SVG, so yes, it can be directly implemented with text-shadow in CSS. SVG and CSS now share many properties and styles, as shown below.

.text {/ * other * / fill: url (# gradient); text-shadow: 0 4px 0 # 333;}

Make it more concise.

7. Special font processing

Usually the activity title will use some special fonts, the English font is good, the whole introduction is OK, but the Chinese font is not, most Chinese fonts are very large, may reach dozens of MB or hundreds of MB. In fact, we only need to use the font that appears, if the special font of this part of the text is extracted separately, then the whole font file will be greatly reduced, this process is called font subset.

So how to deal with it?

Here we recommend a tool Fontmin-font subset scheme. About the principle of font subset, you can refer to this article: performance optimization magician: Chinese font practice article-Nuggets

After downloading the client, import the font file .ttf, and then enter the text you need, as follows

Click generate to get the following file

The first CSS with the suffix-embed contains the converted base64 file, which can be introduced directly.

@ font-face {font-family: "HYLiLiangHeiJ Regular"; src: url ("HYLiLiangHeiJ Regular.eot"); / * IE9 * / src: url ("HYLiLiangHeiJ Regular.eot?#iefix") format ("embedded-opentype"), / * IE6-IE8 * / url (data:application/x-font-ttf;charset=utf-8 Base64,AAEAAAAKAIAAAwAgT1MvMr6khfgAAACsAAAAYGNtYXB/inIFAAABDAAAAYJnbHlmmahvSQAAApAAAARkaGVhZA6mvEEAAAb0AAAANmhoZWEHiwK6AAAHLAAAACRobXR4BJMAmgAAB1AAAAAUbG9jYQPgBSoAAAdkAAAAFG1heHAAEwBIAAAHeAAAACBuYW1lb/SphAAAB5gAAALhcG9zdOu6TDAAAAp8AAAAdAAEA+gBkAAFAAgAZABkAAABRwBkAGQAAAOVAGQA+gAAAAIGAAQBAQEBAaAAAr8QAAAAAAAAFgAAAABITllJAEBOOny+AyD/OAAAA5UBRwAEAAAAAAAAAcAChQAAACAAAQAAAAMAAAADAAAAHAABAAAAAAB8AAMAAQAAABwABABgAAAAFAAQAAMABE46T2BSNlPRW5pfaXOwfL7/AABOOk9gUjZT0VuaX2lzsHy+/7HHsKKtzawzpGugnYxXg0oAAQABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAz/14DsALzABUAGQAAEyczFzM3MwchESEnIREjAyE1MxMjNQUzEyNkFrgZCyDiIAGk/hcRASDugf7NdVzSAbG3LLwCX4yMlJT9ALMBpv2mtAGmp+z+6wAAAAAEACj/VQPJAu4ADAAWACIAKAAAAQMzETMRIycHIzUzEwERBzU3NTMRBxEBByERIzUjByM1MzcBMxUjAzMCGiw0w/EGEbQfKP7fJyzZEwEkCwGNu/0bsx8kAjEbtyemAZL+egHk/WexmscBXf3DAesR4xzA/rYJ/boDmCv+52tuvIv9R8gCJQAAAwAk/1QDtwLzACUAKwAvAAATMwczNTMVMxUjFTMVIxUzESMRIxEjESMRIxEzNSM1MzUjByM1MwEhJzMRMwERMxFQlAgUqa+vw8O4mx2pHpu5yMgqCpgWA33+1AiAtP6uigLnLzs7jlWPIv5ZARj+vwFB/vEBniKPVUWQ/OOdAvX9JQK9/UMAAAMAJP9dA8QC8QAgACQAKQAAAQczNzMHMyczFzMVIQchFQcXMxUjJwchNQcjNTMTIzU3ATcnBzcHMxc3ARYmLSveK5oY2hpT/gAMAfy2O4jgZk7+7CPSNI63LQFaI3wtUQiKVFMC73+BgXh5pSOxvyqxUlJqasABroqa/R8iZIbzFzxTAAIALP9bA8AC7AAXACMAAAUnByM1MzczBxczESE1IRUhFSEVIRUhFQE1ISchFyEVIzUhFQFSPRDZJivbIlcS/pUDg/7SARn+5wE3/G0BSAQBFwUBMuj+OKFUWL39tVcBJqCgP5pNqgKE0jc31jczAAAIACv/XAPRAvMAEAAdACMAKQAtADEANQA5AAAXEQMjEzM1IzUzNTMVMxUjERMzNzMDIzUHITUhNzMBAyE1MzcTAyE1MzcDEyMDJzczByUzFyM3Mxcj5hqhHp2vr8KxscRdKthh/g/90wF2B+IBQkz+7VouyFj+/WIkoR2kGQwgpyP99ZsZnpicFJikAVf+rQFgEJQiIpT+jAMpav7upi+LFP22/re2kwEj/uqwZv70/p0BY863t7e+vq8AAAIAKP9bA7IC4wAYACwAAAERMxUzNTMVITUHIzUzNyMRIREjESMRNxEDIxUzFSE1MzUjNTM1IzUhFSMVMwLWJCqO/rJBu09FkQI5pPEe4Cs4/s4/NDQ5ATA8KwIo/nGaMNRhYa1pAnL9kAHP/kstAW7+0fGnp/GcrKKirAAJACP/TwPBAvIACQAhAC0AMQA1ADkAPQBBAEUAAAURIREhJzM1IxUDNTM1IzUzNSM1MzUzFTMVIxUzFSMVMxUBESM1MzUzFTMVIxEDEQcRAScRMyc3MwclMxcjARUzNQczNSMBjQIk/vAIY8G0s5ycqanFvr6pqcL8yWNjkWFhm1MBSFFRVglYC/6uVg1YAg3BwcHBqAH5/gp2F5ACD24ZZxZtGhptFmcZbv3xAgaQ/v6Q/foB9P4ZFgH9/gMWAeey0dHS0f7lHx+bHAABAAAAAQAAARwkRF8PPPUAAwPoAAAAAM58+bMAAAAA3R9/YwAj/08D0QLzAAAADAABAAAAAAAAAAEAAAOV/rkAAAPoACMAFwPRAAEAAAAAAAAAAAAAAAAAAAABA+gAAAAzACgAJAAkACwAKwAoACMAAAAAAC4AcgC2APgBMAGOAcwCMgABAAAACQBGAAkAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAEADGAAEAAAAAAAAAPAAAAAEAAAAAAAEAEwA8AAEAAAAAAAIABwBPAAEAAAAAAAMAIQBWAAEAAAAAAAQAGwB3AAEAAAAAAAUADACSAAEAAAAAAAYADQCeAAEAAAAAAAcAEgCrAAMAAQQJAAAAeAC9AAMAAQQJAAEAGAE1AAMAAQQJAAIADgFNAAMAAQQJAAMAQgFbAAMAAQQJAAQAKAGdAAMAAQQJAAUAGAHFAAMAAQQJAAYAGgHdAAMAAQQJAAcAJAH3KGMpIENvcHlyaWdodCBCZWlqaW5nIEhBTllJIEtFWUlOIEluZm9ybWF0aW9uIFRlY2hub2xvZ3kgQ28ubElOw6pSwpvCkcOPwp7DkXvCgFJlZ3VsYXJIYW55aSBIWUxpTGlhbmdIZWlKIFJlZ3VsYXIgdjUuMDBsSU7DqlLCm8KRw4/CnsORe8KAIFJlZ3VsYXJWZXJzaW9uIDUuMDBIWUxpTGlhbmdIZWlKVHJhZGVtYXJrIG9mIEhBTllJACgAYwApACAAQwBvAHAAeQByAGkAZwBoAHQAIABCAGUAaQBqAGkAbgBnACAASABBAE4AWQBJACAASwBFAFkASQBOACAASQBuAGYAbwByAG0AYQB0AGkAbwBuACAAVABlAGMAaABuAG8AbABvAGcAeQAgAEMAbwAuAGwASQBOAOoAUgCbAJEAzwCeANEAewCAAFIAZQBnAHUAbABhAHIASABhAG4AeQBpACAASABZAEwAaQBMAGkAYQBuAGcASABlAGkASgAgAFIAZQBnAHUAbABhAHIAIAB2ADUALgAwADAAbABJAE4A6gBSAJsAkQDPAJ4A0QB7AIAAIABSAGUAZwB1AGwAYQByAFYAZQByAHMAaQBvAG4AIAA1AC4AMAAwAEgAWQBMAGkATABpAGEAbgBnAEgAZQBpAEoAVAByAGEAZABlAG0AYQByAGsAIABvAGYAIABIAEEATgBZAEkAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACQAJAAABAgEDAQQBBQEGAQcBCAEJB3VuaTRFM0EHdW5pNEY2MAd1bmk1MjM2B3VuaTUzRDEHdW5pNUI5QQd1bmk1RjY5B3VuaTczQjAHdW5pN0NCRQ==) format ("truetype"), / * chrome, firefox, opera, Safari, Android IOS 4.2 + * / url ("HYLiLiangHeiJ Regular.svg#HYLiLiangHeiJ Regular") format ("svg") / * iOS 4.1-* / font-style: normal; font-weight: normal;} .text {/ * other styles * / font-family: "HYLiLiangHeiJ Regular";}

In this way, the effect is almost the same as that of the design draft.

Thank you for reading! On "CSS and SVG how to add gradient, stroke, projection effect to the text" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.