CSS related techniques for text retouching

This article mainly introduces you to some of the techniques related to the text modification. Here are mainly from the text-decoration and Text-shadow these two properties chat, the article through the sample code introduced in very detailed, the needs of friends below to see together.

This article is mainly about the CSS text decoration related materials, share out for everyone to reference the study, the following to see a detailed introduction:

First, Text-decoration

I believe you are not unfamiliar with this attribute of text-decoration, when resetting the default style of a tag, we often write this: text-decoration:none; there may be very few people who know about it, actually text-decoration is a composite attribute , consisting of line, style, and color.

So we can achieve this effect:

Yellow Dashed line down

Unfortunately, line only underline (underline), overline (underline), and Line-through (strikethrough). What if you suddenly need to draw a wavy line? Don't worry, the magic CSS will do you a favor. First, you need to look at the skill of using gradients. Let's go first:

Gradient implements text wavy lines

To talk about the idea here, we first have to use a two-stage gradient to construct a basic element: ' X ' (I don't put a picture here), the next step is more important, we want to intercept the upper part of the ' X ', get a ' V ', thus combining the repeat to form a wavy line. The following is a mixin written with Scss, convenient for later use.

    @mixin waveline ($color, $h) {        position:relative;        &::after {            content: ';            Display:block;            Position:absolute;            top:100%;            left:0;            width:100%;            Height: $h;            Background:linear-gradient (135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),                        Linear-gradient (45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);            Background-size: $h * 2 $h * 2;        }    }

Second, Text-shadow

For Text-shadow and Box-shadow almost almost, it also supports comma syntax, so it can generate multiple shadows, here we will introduce a few simple applications:

1, the 3D effect of the text

This 3D is also the technique of using multiple shadows, below:

Text-shadow for 3D effects

    @mixin Threedtext ($color) {        text-shadow:1px 1px $color, 2px 2px $color,                     3px 3px $color, 4px 4px $color,                     5px 5 PX $color, 6px 6px $color,                     7px 7px $color, 8px 8px $color;    }

Here a few colors need to be adjusted properly, the effect will be better.

2. Text Stroke effect

Below:

Text-shadow to achieve text stroke effects

    @mixin Stroketext ($w, $color) {        Text-shadow: $w 0 0 $color,                     -$w 0 0 $color,                     0 $w 0 $color,                     0-$w 0 $colo R;    }

In fact, the effect here is not particularly good, but can let us marvel at the small properties, the use of large.