There have been two previous articles on typefaces, on how to define them:
- Font-family is the font you should know
- Font-size: 14px “> < span style =” font-size: 14px
This article will be similar to this article – CSS clever border animation, talk about some text effects, using different attributes collocation, to achieve a variety of text effects.
Google Font
When writing various demos, there are sometimes special fonts that better reflect the effects of the animation. Here’s a quick tip for introducing fonts in different formats.
Google Font is a website that has a lot of different open source fonts:
It also provides a very quick and easy way to introduce a font we like when we choose one. Select the corresponding font and Select +Select this style to import it through link and @import:
Use the link tag to introduce:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap" rel="stylesheet">
Copy the codeOR, in CSS code, is introduced using @import:
<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap');
</style>
Copy the codeBoth methods use @font-face to define fonts internally.
We can specify a custom font with a quick @font-face declaration. Something like this:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
Copy the codeThis way, with Google Font, you can easily enjoy a variety of fonts.
I often use this in my personal projects or some demos when I need some artistic fonts or special fonts to show different effects. As for the business, the need to introduce some special fonts, it is a matter of opinion.
Next, we’ll take a look at what fonts can look like in CSS, combined with different properties.
Text and Shadows
By combining the font with the font shadow text-shadow, different ways of using the shadow can produce different effects.
Let’s go through a series of demos.
Long shadow text effect
Long shadows can be created by multi-level shadow changes with gradual color changes (transparency) :
div {
text-shadow: 0px 0px # 992400.1px 1px rgba(152.36.1.0.98), 2px 2px rgba(151.37.2.0.96), 3px 3px rgba(151.37.2.0.94), 4px 4px rgba(150.37.3.0.92), 5px 5px rgba(149.38.4.0.9), 6px 6px rgba(148.38.5.0.88), 7px 7px rgba(148.39.5.0.86), 8px 8px rgba(147.39.6.0.84), 9px 9px rgba(146.39.7.0.82), 10px 10px rgba(145.40.8.0.8), 11px 11px rgba(145.40.8.0.78), 12px 12px rgba(144.41.9.0.76), 13px 13px rgba(143.41.10.0.74), 14px 14px rgba(142.41.11.0.72), 15px 15px rgba(142.42.11.0.7), 16px 16px rgba(141.42.12.0.68), 17px 17px rgba(140.43.13.0.66), 18px 18px rgba(139.43.14.0.64), 19px 19px rgba(138.43.15.0.62), 20px 20px rgba(138.44.15.0.6), 21px 21px rgba(137.44.16.0.58), 22px 22px rgba(136.45.17.0.56), 23px 23px rgba(135.45.18.0.54), 24px 24px rgba(135.45.18.0.52), 25px 25px rgba(134.46.19.0.5), 26px 26px rgba(133.46.20.0.48), 27px 27px rgba(132.47.21.0.46), 28px 28px rgba(132.47.21.0.44), 29px 29px rgba(131.48.22.0.42), 30px 30px rgba(130.48.23.0.4), 31px 31px rgba(129.48.24.0.38), 32px 32px rgba(129.49.24.0.36), 33px 33px rgba(128.49.25.0.34), 34px 34px rgba(127.50.26.0.32), 35px 35px rgba(126.50.27.0.3), 36px 36px rgba(125.50.28.0.28), 37px 37px rgba(125.51.28.0.26), 38px 38px rgba(124.51.29.0.24), 39px 39px rgba(123.52.30.0.22), 40px 40px rgba(122.52.31.0.2), 41px 41px rgba(122.52.31.0.18), 42px 42px rgba(121.53.32.0.16), 43px 43px rgba(120.53.33.0.14), 44px 44px rgba(119.54.34.0.12), 45px 45px rgba(119.54.34.0.1), 46px 46px rgba(118.54.35.0.08), 47px 47px rgba(117.55.36.0.06), 48px 48px rgba(116.55.37.0.04), 49px 49px rgba(116.56.37.0.02), 50px 50px rgba(115.56.38.0);
}
Copy the code
Of course, it is difficult for us to write multiple shadows and colors one by one manually. When writing long shadows, we usually need to use SASS and LESS to save time:
@function makelongrightshadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 50{$color: fade-out(desaturate($color, 1%).02);
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}
div {
text-shadow: makeLongShadow(hsl(14.100%.30%));
}
Copy the codeStereo shadow text effect
If you have multiple shades, but the color changes are not as intense, you can create a three-dimensional effect.
div {
text-shadow: 0 -1px 0 #ffffff.0 1px 0 #2e2e2e.0 2px 0 #2c2c2c.0 3px 0 #2a2a2a.0 4px 0 # 282828.0 5px 0 # 262626.0 6px 0 # 242424.0 7px 0 # 222222.0 8px 0 # 202020.0 9px 0 #1e1e1e.0 10px 0 #1c1c1c.0 11px 0 #1a1a1a.0 12px 0 # 181818.0 13px 0 # 161616.0 14px 0 # 141414.0 15px 0 # 121212);
}
Copy the code
Inline shadow text effect
Reasonable shadow color and background background color collocation, collocation, can achieve similar embedded effect of the shadow.
div {
color: # 202020;
background-color: #2d2d2d;
letter-spacing:.1em;
text-shadow: -1px -1px 1px # 111111.2px 2px 1px # 363636;
}
Copy the code
CodePen Demo — 5 text shadow effects in css3
Neon light effect
The Neon light effect, or Neon in English, is one of the most common things I’ve seen on Codepen. The principle is very simple, but it can produce very cool results.
We only need to set 3 to n layers of shadow effect, each layer of blur radius (the third parameter of text shadow) is widely spaced, and each layer of shadow color is the same.
p {
color: #fff;
text-shadow:
0 0 10px #0ebeff.0 0 20px #0ebeff.0 0 50px #0ebeff.0 0 100px #0ebeff.0 0 200px #0ebeff
}
Copy the codeOf course, usually when Neon is used, the background color is slightly black.
Using Neon’s effects properly, you can make a lot of interesting motion effects. For example, the hover effect:
p {
transition:.2s;
&:hover {
text-shadow: 0 0 10px #0ebeff.0 0 20px #0ebeff.0 0 50px #0ebeff.0 0 100px #0ebeff.0 0 200px #0ebeff; }}Copy the code
CodePen Demo — Neon Demo
CodePen has a 2K+ awesome DEMO with Neon effects. Check out CodePen — Neon Glow.
You can also select the appropriate font, with the animation effect, to achieve a gradual lighting effect:
<p>
<span id="n">n</span>
<span id="e">e</span>
<span id="o">o</span>
<span id="n2">n</span>
</p>
Copy the codep:hover span {
animation: flicker 1s linear forwards;
}
p:hover #e {
animation-delay:.2s;
}
p:hover #o {
animation-delay:.5s;
}
p:hover #n2 {
animation-delay:.6s;
}
@keyframes flicker {
0% {
color: # 333;
}
5%.15%.25%.30%.100% {
color: #fff;
text-shadow:
0px 0px 5px var(--color),
0px 0px 10px var(--color),
0px 0px 20px var(--color),
0px 0px 50px var(--color);
}
10%.20% {
color: # 333;
text-shadow: none; }}Copy the code
Cut GIF frame rate is not enough, looking at the effect is not good, you can click into the following DEMO feel:
CodePen Demo — Neon Demo
Text and Background
Background in CSS also provides properties to enhance text.
Background – clip and text
The background property is background-clip, which sets the padding rule for the element’s background (background image or color).
Box-sizing (border-box, padding-box, content-box) has a background-clip (border-box, padding-box, content-box). Today, some browsers still need to add the webkit prefix to use -webkit-background-clip.
Using this property means that the text in the block is clipped out as the clipping area, the background of the text is the block background, and the area outside the text is clipped out.
Clip :text: background-clip:text:
<div>Clip</div>
<style>
div {
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url($img) no-repeat center center;
background-size: cover;
}
</style>
Copy the codeThe effect is as follows:
CodePen Demo
usebackground-clip:text
-webkit-background-clip:text:
div {
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url($img) no-repeat center center;
background-size: cover;
background-clip: text;
}
Copy the codeThe effect is as follows:
CodePen Demo
See here, some people may wonder, this is not the text set color property.
Don’t worry, since the color of the text is blocking the background of the div block, what if I made the text transparent? The text can be set to transparent color: transparent.
div {
color: transparent;
background-clip: text;
}
Copy the codeThe effect is as follows:
CodePen Demo
By setting the text to transparent, the background of the original div is visible, but all the areas outside the text are clipped out. This is what background-clip:text does.
usingbackground-clipGraphic collocation
In this way, we can choose the right picture and the right font to achieve any style of text effect.
CodePen Demo — background-clip: text & Image text
Or, use this effect to create a creative poster:
usingbackground-clipImplement gradient text
Furthermore, using this property, it is also easy to implement gradient text:
{
background: linear-gradient(45deg.# 009688, yellowgreen, pink, #03a9f4.#9c27b0.#8bc34a);
background-clip: text;
}
Copy the code
Rotate () with background-position or filter: hue-rotate() :
{
background: linear-gradient(45deg.# 009688, yellowgreen, pink, #03a9f4.#9c27b0.#8bc34a);
background-clip: text;
animation: huerotate 5s infinite;
}
@keyframes huerotate {
100% {
filter: hue-rotate(360deg); }}Copy the code
CodePen Demo — background-clip: text Text gradient
usingbackground-clipAdd highlight animation to text
Using background-clip, we can also easily add highlights to text animation.
Like this:
In essence, background-clip is also used, and the pseudocode is as follows:
<p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p>
Copy the codep {
position: relative;
color: transparent;
background-color: #E8A95B;
background-clip: text;
}
p::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15 rem, transparent 15rem.rgba(255.255.255.0.3) 20rem, transparent 25rem, transparent 27rem.rgba(255.255.255.0.6) 32rem, white 33rem.rgba(255.255.255.0.3) 33.15 rem, transparent 38rem, transparent 40rem.rgba(255.255.255.0.3) 45rem, transparent 50rem, transparent 100%);
background-clip: text;
background-size: 150% 100%;
background-repeat: no-repeat;
animation: shine 5s infinite linear;
}
@keyframes shine {
0% {
background-position: 50% 0;
}
100% {
background-position: -190% 0; }}Copy the codeClip: text (background-clip: text)
CodePen Demo — shine Text && background-clip
maskWith the words
There is also a background related property called mask.
Mask has been mentioned in many previous articles, and the most detailed one is the fantastic CSS Mask. This article does not explain the basic concept of mask too much. When reading down, if you are confused about the use of some masks, you can go to see it again.
Just remember the core, the most important lesson of using masks is that the content of the element with the mask attribute will overlap with the gradient transparent represented by the mask, and the overlap will become transparent.
Using mask, we can realize the appearance effects of various words:
<div>
<p>Hello MASK</p>
</div>
Copy the codeCore CSS code:
div {
mask: radial-gradient(circle at 50% 0%.# 000, transparent 30%);
animation: scale 6s infinite;
}
@keyframes scale {
0% {
mask-size: 100% 100%;
}
60%.100% {
mask-size: 150% 800%; }}Copy the code
A different direction, or something like this:
CodePen Demo — MASK Text Effect
Mix-blending-mode and Filter
Next comes the interesting blending of modes and filters. These two attributes add a lot of interest to the CSS world, live flexible use, will sigh CSS is so powerful wonderful.
There have been many previous articles on blending modes and filters, but some basic uses will not be covered here.
Add a border to the text to generate hollowed-out text
In CSS, we can use -webkit-text-stroke to quickly add borders to the text. With this, we can quickly generate hollowed-out text:
p {
-webkit-text-stroke: 3px # 373750;
}
Copy the code
Of course, we can see that the attribute used -webkit-text-stroke has a webkit prefix and has some compatibility issues.
So, back in the day, we also used text-shadow to generate hollow text.
p {
text-shadow: 0 0 5px #fff;
}
Copy the code
It can be seen that because the shadow is used, there is a very obvious sense of blur, there are certain flaws.
There is also a very convoluted way to generate hollow text using a blend mode with a filter.
p {
position: relative;
color: #fff;
&::after {
content: 'Magic Text';
position: absolute;
left: 0;
top: 0;
color: #fff;
mix-blend-mode: difference;
filter: blur(1px); }}Copy the code
Here, filter: blur(1px) was used to generate a font slightly larger than the original font to cover the original font, and mix-blend-mode: difference was used to eliminate the part with the same color, leaving only the extra part with the blur filter.
Mix-blending-mode: difference: the difference mode is used to check the color information in each channel, compare the background color and the drawing color, and subtract the pixel value of the darker pixel from the pixel value of the brighter pixel. Mixing with white will invert the background color; Mixing with black produces no change.
The schematic GIF is as follows:
CodePen Demo — Hollow TEXT EFFECT
Use mixed mode, generate gradient color hollow text
Ok, back to -webkit-text-stroke above, once we have the hollowed-out text, we can also use mix-blx-mode: multiply to generate gradient text.
Mix-blends-mode: multiply the pixel values of the two colors and divide by 255 to get the final color pixel values. Usually the color after multiply mode is darker than the original color. Multiply with any color and black to get black, multiply with any color and white to keep the same color, and with other colors to create a dark room lighting effect with that color.
p {
position: relative;
-webkit-text-stroke: 3px #9a9acc;
&::before{
content: ' ';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: linear-gradient(45deg.#ff269b.#2ab5f5.#ffbf00); mix-blend-mode: multiply; }}Copy the code
Here, mix-blend-mode: multiply plays a very similar role to mask, we actually generate a gradient pattern, but only within the text outline, the gradient color will appear.
Of course, the above effect and the overall black background color is also related.
The schematic diagram is as follows:
CodePen Demo — Hollow TEXT EFFECT
Use blend mode to generate light and shadow effect text
OK, on the basis of the above, we can continue to overlay the blend mode, this time we use the remaining ::after pseudo-class, and add a mix-blending-mode: color-dodge blend mode to add the final embellish to the text, to achieve a wonderful light and shadow effect.
Mix-blence-mode: color-dodge: Color dodge: Displays the color information of each channel, and lightening the background color by lowering the “contrast” to reflect the drawing color.
Core pseudocode:
p {
position: relative;
-webkit-text-stroke: 3px #7272a5;
&::before {
content: ' ';
background-image: linear-gradient(45deg.#ff269b.#2ab5f5.#ffbf00);
mix-blend-mode: multiply;
}
&::after {
content: "";
position: absolute;
background: radial-gradient(circle, #fff.# 000 50%);
background-size: 25% 25%;
mix-blend-mode: color-dodge;
animation: mix 8slinear infinite; }}@keyframes mix {
to {
transform: translate(50%.50%); }}Copy the codeLook at the results:
Mix-blend-mode: color-dodge mix-blend-mode: color-dodge
CodePen — Hollow TEXT EFFECT
Ok, this is it, can we continue? The answer is yes. Due to space limitations, this article will not continue to go into this effect, interested in the above DEMO can take your own tinkers.
Use mixed mode to achieve the effect of text and background color
Here, mix-blending-mode: difference is used to achieve a Title effect of inverted text and background color.
Mix-blending-mode: difference: the difference mode is used to check the color information in each channel, compare the background color and the drawing color, and subtract the pixel value of the darker pixel from the pixel value of the brighter pixel. Mixing with white will invert the background color; Mixing with black produces no change.
The code is very simple, we achieve a black and white background, the color of the text is white, with the difference mode, can achieve the effect of black text on the black background is white, white text on the black background is black.
p {
background: repeating-radial-gradient(circle at 200% 200%.# 000 0.# 000 150px.#fff 150px.#fff 300px);
&::before {
content: "LOREM IPSUM";
color: #fff; mix-blend-mode: difference; }}Copy the codeCan be used for some title effects:
CodePen Demo — Radial-gradient + Mix-blend-mode
Use mixed mode to achieve dynamic class Tiktok style Glitch effect
OK, next, let’s try other blending modes. In CSS fault Art, I mentioned fault art.
What is glitch art? Tiktok’s LOGO, as we know it, is one of those expressions. It has a magical feel and looks like it has a shimmering, vibrating effect that is very eye-catching.
The key point
- Use mix-blast-mode: lighten mixing mode to realize the overlap of two text structures as white
- Using element displacement to complete the dislocation movement animation, forming the visual impact effect
Look at the results:
This article is a bit too long, so I won’t bother with the code. The full DEMO is here:
Type Douyin LOGO text fault effect
Of course, we don’t have to use the blend mode to make the blend white, we can just use this color scheme, based on another version of the effect above, without the blend mode.
The key point
- Two copies of text are generated using pseudo-elements
- The visual effects are completed by displacement, mask and blend modes
- The color scheme borrows the style of douyin’s LOGO
The full DEMO is here:
CSS text failure effect
The advantage of using only color matching instead of blending mode is that you have more distance to move and room to work with each copy of text.
Glitch Art style 404 effect
I changed the text text to 404 and added some filters (hue-rotate(), blur()) and I found a scene that might actually work:
A:
Effect 2:
Examples of two 404 effects are as follows:
- CodePen — Error effect of CSS 404
- CodePen — 404 error effect
Tip: When using mixed mode, sometimes effects do not want to mix with the background, you can use Isolation: ISOLATE to isolate.
Use the filter to generate the text fusion effect
In the article CSS Filter tips and Details you didn’t know, we introduced a fusion effect using filters.
Using the fusion effect of blur filter superimposed contrast filter.
Taking the two filters out separately, their roles are as follows:
filter: blur(): Sets the gaussian blur effect on the image.filter: contrast(): Adjust the contrast of the image.
However, when they “fit together”, there is a wonderful fusion phenomenon. A simple example:
CodePen Demo — filter mix between blur and contrast
Using this feature, you can achieve some text fusion effects:
Using this method, we can also design some text fusion effects:
The concrete implementation you can see here:
CodePen Demo — word animation | word filter
Words and SVG
Finally, let’s look at text and SVG.
In the SVG/CSS combination, there is a class of attributes that are very suitable for animation, namely the stroke-* related attributes, which can be used to quickly create line animations with simple SVG syntax.
We use several attributes related to borders and lines in SVG to achieve line animation of text, listed below, in fact, most of the CSS comparison is very easy to understand, just change the name:
- Stroke-width: like CSS border-width, set the border width for SVG graphics;
- Stroke: Sets the border color for SVG graphics, similar to the BORDER-color in CSS;
- Stroke – linejoin | stroke – linecap: set the style of the segment joint;
- Stroke-dasharray: The value is an array of unlimited numbers, each number alternately representing the width of the stroke and interval;
- Stroke-dashoffset: is the offset of the dashed line
For a more in-depth introduction to SVG line animation, check out this article
Line text animation
Next, we implement a simple line text animation using the stroke-* related attributes.
<svg viewBox="0 0 400 200">
<text x="0" y="70%"> Lorem </text>
</svg>
Copy the codesvg text {
animation: stroke 5s infinite alternate;
letter-spacing: 10px;
font-size: 150px;
}
@keyframes stroke {
0% {
fill: rgba(72.138.20.0);
stroke: rgba(54.95.160.1);
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
stroke-width: 1;
}
70% {
fill: rgba(72.138.20.0);
stroke: rgba(54.95.160.1);
stroke-width: 3;
}
90%.100% {
fill: rgba(72.138.204.1);
stroke: rgba(54.95.160.0);
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
stroke-width: 0; }}Copy the codeThe core of the animation is to use stroke-Dasharray and stroke-dashoffset of dynamically changing text to form a visual line transformation, and then color the text at the end of the animation. Look at the results:
CodePen Demo — SVG Text Line Effect
The last
This article introduces some of the most interesting text animation tips in my opinion, and of course there are a lot of interesting text effects in CSS.
The end of this article, I hope to help you :), want to Get the most interesting CSS information, do not miss my official number – iCSS front-end interesting news 😄
More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.
If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.