Transparent text, blurred text, hollow text, gradient text, image background text, use CSS to make your text also freestyle ~

preface

When we do the page font, the most is to change the color change font-family, always feel that it does not reflect your inner artistic style, then is not complaining about CSS does not set any style for the text, complaining is useless, let’s do it ourselves, see if we can “create” some CSS font style ~

Transparent words

  1. Adjust transparency with RGBA 
    div{
    background-color: pink;
    color: rgba(0, 0, 0, 0.1);
}Copy the code

  1. Adjust the mask with opacity 
    div{
    background-color: pink;
    opacity: 0.4;
}Copy the code



The two differences are that rGBA only has transparency for text, while opacity affects the entire div, and the differences can be found by comparing the background colors of the two divs.

Fuzzy words

The CSS does not specify a text blur style, but you can use the combination of text-shadow -webkit-text-fill-color to produce blurred text, that is, text-shadow to create the underlying blurred text. Fill the color with -webkit-text-fill-color to be transparent, for example:

div{
    text-shadow: 0 0 5px red;
    -webkit-text-fill-color: transparent;
}Copy the code

For the text-shadow, set the offset of x and y to 0, that is, no offset, and set the blur level of 5px. The following ffill color is set to transparent, which reflects the underlying blur font.

Hollow out words

Here we use -webkit-text-stroke to stroke the periphery of the text, and then set the text fill color to transparent so that only the periphery of the text is displayed, which is what we call hollowed-out text.

div{
    font-size: 40px;
    -webkit-text-stroke: 1px red;
    -webkit-text-fill-color: transparent;
}Copy the code

Effect:

The gradient words

This is an interesting combination. CSS doesn’t give us gradients for text, but we have background gradients for text, so how do we make text gradients? One of our properties is to make text transparent, so we can see what’s underneath the text. If the gradient background color below the text is displayed, it is equivalent to the text has the background color. Let’s try it first:

div{
    font-size: 40px;
    background: linear-gradient(to bottom,white,black);
    -webkit-text-fill-color: transparent;
}Copy the code

But the effect is:



Although had gradient background here, but text directly into transparent, so how do we do text peripheral background removal, the text displayed in the background, we know the background – clip is used to set the background image in the area, according to if it makes the text under the display, then we can not do we hope to effect ~, < webkit-background-clip:text > < webkit-background-clip:text > < webkit-background-clip:text > < webkit-background-clip:text > < webkit-background-clip:text >

div{
    font-size: 40px;
    background: linear-gradient(to bottom,white,black);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}Copy the code

Text gradient effect:

Image background text

We often see cool pictures like this on the Internet:

As a fidgety front-end dog, do the page can be achieved with CSS effect absolutely do not ask the artist to give us a high definition large image paste page, do it yourself ~

< webkit-background-clip > < webkit-background-clip > < webkit-background-clip > < webkit-background-clip > < webkit-background-clip > < webkit-background-clip > If the text is set to transparent, we can see the background image through the text. This is a powerful property that can compare to photoshop effect. Code:

Div {/* Background style */ height: 300px; width: 500px; background-size: contain; background-repeat: no-repeat; background-image: url(bg.jpg); /* Word-spacing: 0px; text-transform: none; font-weight: bold; text-align: center; line-height: 300px; */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; }Copy the code

Effect:

Later friends ask you to help do this kind of picture, no longer need to use PS to do, CSS a few lines of code to fix!

conclusion

Single CSS may seem like a simple style feature, but combining multiple CSS styles can give us some amazing effects. This article simply lists a few effects, and there are many more cool effects waiting to be discovered

have a nice day 🙂