The module contains CSS features related to text decoration, such as underlines, text shadows, and accents in the text of East Asian languages.

Properties for text decoration

1. Line decoration: underline, stroke and strikethrough

Underlines, strokes, and strikethrough lines are displayed only for non-replaceable line-level boxes (display: inline) and appear throughout text, including spaces between characters and words, except for indentation at the beginning and end of a line.

Browsers can break underlines and strokes where the line crosses the glyph, rendering some distance on either side of the glyph's outline. When the browser breaks off an underline or stroke at the borders of a glyph, the line shape at that border should match the shape of the glyph. However, the specification does not dictate a specific method for "following the shape" of a glyph, leaving that up to the browser.

Rice. 1. Interruption of the underline

1.1. The appearance of the decoration line: the text-decoration-line property

Browser support

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

The text-decoration-line property determines what type of line, if any, is added to the element.

The property is not inherited.

Syntax

Text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; text-decoration-line: underline overline; text-decoration-line: overline underline line-through; text-decoration-line: inherit; text-decoration-line: initial;

1.2. Decoration line style: text-decoration-style property

Browser support

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

The text-decoration-style property defines the style of the lines drawn to decorate the text specified in the element. The values ​​have the same meaning as for the border-style property.

The property is not inherited.

Syntax

Text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; text-decoration-style: inherit; text-decoration-style: initial;

1.3. Decoration line color: text-decoration-color property

Browser support

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

The text-decoration-color property specifies the color of the text decoration line set for the element with text-decoration-line.

The property is not inherited.

Syntax

Text-decoration-color: currentColor; text-decoration-color: salmon; text-decoration-color: # 00ff00; text-decoration-color: rgba (255, 128, 128, 0.5); text-decoration-color: transparent; text-decoration-color: inherit; text-decoration-color: initial;

1.4. A summary of decoration line properties: the text-decoration property

Browser support

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2

The text-decoration property is a short form of writing the text-decoration-line text-decoration-style text-decoration-color properties in a single declaration. Missing values ​​are set to their initial values. Default text-decoration: none solid currentColor; ... The property is not inherited. However, the style of all text decoration lines must be the same for one element.

1.5. Layout line layout: text-underline-position property

Browser support

IE: —
Edge: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 71
Samsung Internet: —

The text-underline-position property sets the position of the underline line specified in an element.

The property is inherited.

Values:
auto	The browser can use any algorithm to determine the position of the underline, however the line must be placed on or below the baseline of the text. Default value.
under	The underline is located below the text content of the element. In this case, the underline usually does not intersect the descender. This value can be combined with left or right if a particular side is preferred in vertical typographic modes.
left	In vertical typography modes, the underline is aligned to the left of the text. However, this value is interpreted as under.
right	In vertical typography modes, the underline is aligned to the right of the text. However, this value is interpreted as under.
inherit
initial

Syntax

Text-underline-position: auto; text-underline-position: under; text-underline-position: left; text-underline-position: right; text-underline-position: under left; text-underline-position: under right; text-underline-position: inherit; text-underline-position: initial; Rice. 2. Underline text on both sides in vertical typography modes using left and right values

2. Text shadow: the text-shadow property

Browser support

IE: 10
Edge: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 4

The text-shadow property is used to add shadows to text. Text shadow is a fun tool that lets you create amazing effects. Shadows can be single-layered or multi-layered, blurred, colored, or semi-transparent. When specifying a shadow for an element, you can specify only one length and color, thus creating a colored copy of an individual character or word. Also, with the help of the shadow, you can make the text more readable if the contrast between the color of the text and the background is small.

Each shadow is applied both to the text itself and to the elements of its decoration (property text-decoration). You can specify several shadows at the same time, specifying them separated by commas. The shadows overlap each other, but do not overlap the text itself. The first shadow is always on top of the rest of the shadows. The property is inherited.

Each shadow is defined by two or three lengths and an optional color. Lengths equal to 0 are allowed.

The property is not inherited.

Rice. 3. Syntax of the text-shadow property

text-shadow
Values:
x-offset	Specifies the horizontal offset of the shadow. A positive value draws a shadow offset to the right of the text, a negative length draws a shadow to the left.
y-offset	Specifies the vertical offset of the shadow. A positive value moves the shadow down, a negative value up.
blur	Sets the radius of the blur. Negative values ​​are not allowed. If the blur value is zero, then the edge of the shadow is sharp. Otherwise, the higher the value, the more the edge of the shadow is blurred.
Colour	Specifies shadows. If there is no color, the color used is taken from the color property.
none	The default value means no text shadow. Removes the shadow of an element from a group of elements with the specified property.
initial	Sets the property value to its default value.
inherit	Inherits the property value from the parent element.

Unlike box-shadow, text shadows are not clipped and can be displayed if the text is partially transparent. Like box-shadow, text shadows do not affect the layout and do not cause scrolling or increasing the size of the scrollable area.

Syntax

Text-shadow: 2px 2px 4px pink; text-shadow: # fc0 1px 0 10px; text-shadow: 5px 5px # 4D4644; text-shadow: blue 2px 5px; text-shadow: 5px 10px; text-shadow: inherit; text-shadow: initial;

2.1. Text shadow examples

Poster shadow

Text shadow

Text-shadow-1 (background: # 77F7DE; color: white; text-shadow: -2px -2px 0 # 4D4644, 2px -2px 0 # 4D4644, -2px 2px 0 # 4D4644, 2px 2px 0 # 4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white; letter-spacing: 0.1em;)

3D shadow

Text shadow

Text-shadow-2 (background: linear-gradient (-45deg, # FEE864, # F5965E); color: # f4f4f4; text-shadow: -1px -1px white, 1px 1px gray, 2px 2px # 7a7a7a, 3px 3px # 757575 , 4px 4px # 707070, 5px 5px # 6b6b6b, 6px 6px # 666666, 7px 7px # 616161, 8px 8px # 5c5c5c, 9px 9px # 575757, 10px 10px # 525252, 11px 11px # 4d4d4d, 18px 18px 30px 0px rgba (0 0, .4), 18px 18px 10px rgba (0, 0, 0, .4);)

Shadow text

Text shadow

Text-shadow-3 (background: # FFE6DB; color: # FFE6DB; letter-spacing: .1em; text-shadow: 3px 0 rgba (250, 111, 142, .5), 6px 0 rgba (250, 111, 142 , .4), 9px 0 rgba (250, 111, 142, .3), 12px 0 rgba (250, 111, 142, .2), 15px 0 rgba (250, 111, 142, .1);)

Every web designer wants to create only worthwhile websites that all Internet users will appreciate.

Of course, it is impossible to satisfy all tastes. Also, as a web designer you should just try to do your best to create a website that your visitors will love! Luckily, the most powerful tools and resources are already available to create awesome websites, and we've put together some useful CSS snippets for you to help you make a cool twist in your projects!

it 15 amazing text effects with CSS3- all are selected and we think they will help add a sparkle of originality to your projects. Some are useful for specific purposes, while others are reusable.

If you love flowers and want a wonderful and full of color text effect, then this offer is the perfect solution for you! This is very suitable for displaying the name of a creative agency or for a portfolio of projects. Of course, it can be used for any other type of project - if you want to stand out then this text effect is a great choice!

The ripple effect is really amazing! It can be used to add a bit of mystery. It would be interesting to use it to highlight a discount or special offer that only works for a very short period of time. What do you think?

This is a very interesting text effect; I think because of the color scheme used it can be applied to emphasize vintage designs. It is a clever use of text shadows and has the potential to grab the attention of users. Don't forget that Vintage will never die!

The following text effect works like a magnet for viewers. You can use this to enhance the shape, to highlight a new product being offered for sale, or simply to grab the eyes of the viewer. This alluring and wise web designer will use it to his / her advantage!

I think the trend among web designers is to create more dynamic online presences. Cool sliding effects and page transitions are the most commonly used opportunities to add more dynamism to the site. However, if you want even more dynamism, this awesome CSS3 text effect might be a good option. I think this is a simple yet effective solution!

The most demanding clients are children, but that shouldn't make you refuse to create websites for them. If you are working for a toddler-related project or a funny one, then you can use this effect for text! In Jokerman, the font has its own special beauty, doesn't it?

CSS3 and 3D modeling have more in common than just the number “3”! With CSS3 allows you to create beautiful 3D effects like one of this snippet. This effect is suitable for a large pool of projects and I think you should give it a try!

Sometimes, playing with fire can be fun! Don't worry, I'm not a pyromaniac, I'm just amazed at this cool text effect! I don't remember seeing this text effect in other website layouts, so here's another reason to use it and create an original website!

In a situation that you value more discrete text effect, this “foggy effect” is my recommendation. It is true that it can negatively affect the usability of your site. On the other hand, if you don’t take risks, you won’t win! Of course it can be redesigned to fit your requirements!

Although this text effect is quite complex, it is implemented using CSS, there is no JavaScript. Personally, I believe that it can be used for music sites or to highlight a specific element from a website.

This is a very discrete effect, but I think it can add a “wow” effect to layouts. Metallic look wonderfully crafted and accentuate emerging / disappearing moments.

I may be subjective because I'm a big fan of the Star Wars movie, but this text effect is really cool. This makes your projects more interesting and no doubt the fans of this movie will fall in love with your site because of this effect.

This text effect dramatically improves user-site interaction and shows once again that CSS3 has a lot of potential and a talented web designer can create beautiful animations with just a few lines of code.

This is the last item on this list, but you shouldn't ignore it. Much more, Cherry on the cake, the fact is that there are no more than 10 CSS3 awesome text effects. I think you should check them all carefully and study how these engaging effects were implemented.

Those who still think that CSS attributes are not enough to create interesting text effects should give heed to this! It combines several effects - animation, 3D perspectives, shadows and text settings. I think the shadow and stroke combination is old-fashioned, but this project is designed to show you what can be achieved with “pure CSS”.

Have you ever had an uncomfortable feeling when your captions did not match the colors of buttons, panels, or just the text did not contrast well with the background of the page? By using CSS shadows this problem can be easily solved by using the text-shadow property to improve the readability and contrast of the text.

In the examples given, we use text shadows in various situations, which will give you the necessary base so that you can further study this issue on your own.

1. Basic setting

Create a new HTML file and add the following code to it Html and CSS:

In the HTML section add the tag

with class text:

Web Code Geeks

For this element, we will add a CSS text shadow. I set initial properties for this element to make it look nice on screen:

Now let's set the text-shadow attribute for the text. But first, let's figure out what values ​​this attribute takes:

Text-shadow: 4px 4px 4px #ccc;

1. 4px - offset along the X axis ( horizontal);
2. 3px - Y-offset ( vertical);
3. 2px - blur value;
4. #ccc - color.

It is set like this:

Text-shadow: horizontal-offset vertical-offset blur color;

de color can be represented by hex code #ccc or RGBA (0,0,0,0.3); ... In CSS, we can apply a CSS inner shadow to our text like this:

.text (
font-size: 5em; / * make the text bigger * /
text-shadow: 4px 3px 2px #ccc;
}

The browser view of this shadowed text will look like this:

EXAMPLE site

Next, we will change the background color of the body element in different ways. We do this because some CSS shadows need a specific background or they won't be visible. To make the text look nicer, we'll set it in uppercase.

2. Print effect

Set the text color to a slightly darker shade than the background. Then apply a small white text shadow with reduced opacity:

Body (
background: # 222;
}
.text (
font-size: 5em;
color: rgba (0,0,0,0.6); /* text color */
text-shadow: 2px 2px 3px rgba (255,255,255,0.1); / * add shadow * /
}

Using the RGBA code, you can set the opacity of the color. Notice that the text color has an opacity of 60% (0.6) and the CSS div shadows 10% (0.1).

EXAMPLE site

3. Retro shadow effect

For a retro shadow, you don't always need to apply blur. Take this retro shadow for example:

Body (
}
.text (
font-size: 5em;
color: white; / * change text color to white * /
text-shadow: 6px 6px 0px rgba (0,0,0,0.2); / * add retro shadow * /
}

EXAMPLE site

4. Double shadow effect

Interestingly, you can add more than one CSS font shadow. This can be done as follows: text-shadow: shadow1, shadow2, shadow3; Let's add two shadows, one with the background color and the other a little darker:

Text (
font-size: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba (0,0,0,0.15); / * gives two shadows * /
}

Our background is white, so we don't need another color for it. In the browser, the effect will look like this:

EXAMPLE site

5. Remote shadow effect

This effect relies on the CSS Multiple Beautiful Shadows feature. Below you can see the effect with four shadows being cast down at varying degrees of intensity:

Body (
background: # fff3cd; / * change the background color * /
}
.text (
font-size: 5em;
color: white;
text-shadow: 0px 3px 0px # b2a98f,
0px 14px 10px rgba (0,0,0,0.15),
0px 24px 2px rgba (0,0,0,0.1),
0px 34px 30px rgba (0,0,0,0.1);
}

EXAMPLE site

6.Mark Dotto's 3D effect

Body (
background: # 3495c0; / * change the background color * /
}
.text (
font-size: 5em;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 # c9c9c9,
0 3px 0 #bbb,
0 4px 0 # b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba (0,0,0, .1),
0 0 5px rgba (0,0,0, .1),
0 1px 3px rgba (0,0,0, .3),
0 3px 5px rgba (0,0,0, .2),
0 5px 10px rgba (0,0,0, .25),
0 10px 10px rgba (0,0,0, .2),
0 20px 20px rgba (0,0,0, .15);
}

Now see how these inner CSS text shadows look in the browser:

EXAMPLE site

7. Realistic effect of cut text by Gordon Hall

Gordon uses some advanced CSS magic to set not only an outer shadow, but also a realistic inner shadow:

Body (
background: #cbcbcb; / * change the background color * /
}
.text (
font-size: 5em;
color: transparent;
background-color: # 666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: rgba (255,255,255,0.5) 0px 3px 3px;
}

And this creates the effect of cut out text.

EXAMPLE site

8. Text glow effect

body (
background: # 992d23; / * change the background color * /
}
.text (
font-size: 5em;
color: white;
text-shadow: 0px 0px 6px rgba (255,255,255,0.7);
}

This shadow creates a glowing effect on the text:

EXAMPLE site

9. Bumpy text effect

body (
background: # 629552; / * change the background color * /
}
.text (
font-size: 5em;
color: rgba (0,0,0,0.6);
text-shadow: 2px 8px 6px rgba (0,0,0,0.2),
0px -5px 35px rgba (255,255,255,0.3);
}

EXAMPLE site

10. Long shadow effect

This effect can be done using

Background-color: rgb (147, 201, 67);
text-shadow: 1px 1px rgb (131, 179, 60), 2px 2px rgb (131, 179, 60), 3px 3px rgb (131, 179, 60), 4px 4px rgb (131, 179, 60), 5px 5px rgb (131, 179, 60), 6px 6px rgb (131, 179, 60), 7px 7px rgb (131, 179, 60), 8px 8px rgb (131, 179, 60), 9px 9px rgb (131, 179, 60), 10px 10px rgb (131, 179, 60), 11px 11px rgb (131, 179, 60), 12px 12px rgb (131, 179, 60), 13px 13px rgb (131, 179, 60), 14px 14px rgb (131, 179, 60), 15px 15px rgb (131, 179, 60), 16px 16px rgb (131, 179, 60), 17px 17px rgb (131, 179, 60), 18px 18px rgb (131, 179, 60 ), 19px 19px rgb (131, 179, 60), 20px 20px rgb (131, 179, 60), 21px 21px rgb (131, 179, 60), 22px 22px rgb (131, 179, 60), 23px 23px rgb ( 131, 179, 60), 24px 24px rgb (131, 179, 60), 25px 25px rgb (131, 179, 60), 26px 26px rgb (131, 179, 60), 27px 27px rgb (131, 179, 60) ;
color: #eaeaea;

EXAMPLE site

Conclusion

As you can see, the text-shadow property is very easy to use and you can use it to create your own creative CSS shadows.

In this tutorial, we'll show you six amazing CSS3 text effects: 3D effect created with text shadow, effects with gradients and image masks, effects with transitions and the background-clip property, and more. No doubt they can all come in handy, as you can achieve really impressive results with CSS3. Some of the above effects work in most browsers that support CSS3, but a few examples work only on the Webkit engine. Therefore, for the ultimate experience, watch the demo in Webkit-enabled browsers such as Chrome, Safari, and Opera.

First, let's add some general styles for all our further experimentation:

#main div (font-size: 120px; font-weight: bold; position: relative;)

Here we set the font size and weight. Now let's get started.

Effect # 1 - 3D Text with CSS3 Text Shadow

It is difficult to imagine all the possibilities that the traditional text shadow property provides. In CSS3, the text shadow property applies a shadow to text. You can set the horizontal size of the shadow, the vertical size of the shadow, the blur distance and the color of the shadow:

Text-shadow: h-shadow v-shadow blur color; / * example: * / text-shadow: 2px 2px 5px # FF7777;

To add more depth to the text, you just need to add some shadows, for example:

# eff1 (color: # 00b506; text-shadow: 0px 0px 0 rgb (-28, 153, -22), 1px 1px 0 rgb (-55, 126, -49), 2px 2px 0 rgb (-83, 98, -77), 3px 3px 0 rgb (-111, 70, -105), 4px 4px 0 rgb (-139, 42, -133), 5px 5px 0 rgb (-166, 15, -160), 6px 6px 0 rgb (-194, -13, -188), 7px 7px 0 rgb (-222, -41, -216), 8px 8px 7px rgba (0, 0, 0, 0. 75 ), 8px 8px 1px rgba (0, 0, 0, 0. 5 ), 0px 0px 7px rgba (0, 0, 0,. 2 ) ; }

Effect # 2 - Gradient CSS3 Text Using -webkit-mask-image for Webkit Engine

This effect uses CSS3 masks, the -webkit-mask-image property. This property is not yet supported by other browsers, but hopefully it will be supported in the future:

# eff2 (color: # 00b506; text-shadow: 1px 1px 1px # 000000 ; -webkit-mask-image: -webkit-gradient (linear, left top, left bottom, from (rgba (0, 0, 0, 1)), color-stop ( 50 % , rgba (0, 0, 0,. 3 )), to (rgba (0, 0, 0, 1))); )

Effect # 3 - rainbow CSS3 text background with -webkit-text-fill-color for Webkit engine

To achieve this effect, we use the background-clip property with a custom text value, which is only supported by Webkit browsers:

# eff3 (background-image: -webkit-linear-gradient (left, # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff, # 0000ff, # 8b00ff); background-image: -moz-linear-gradient (left , # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff, # 0000ff, # 8b00ff); background-image: -ms-linear-gradient (left, # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff , # 0000ff, # 8b00ff); background-image: -o-linear-gradient (left, # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff, # 0000ff, # 8b00ff); background-image: linear-gradient (to right, # ff0000, # ff7f00, # ffff00, # 00ff00, # 00ffff, # 0000ff, # 8b00ff); -webkit-text-fill-color: transparent; -webkit-background-clip: text;)

Effect # 4 - Shining text with CSS3 transitions and -webkit-background-clip for the Webkit engine

In a Webkit browser, a streak of light runs through the text at times. To achieve this effect, the same background-clip property is used with a custom text value:

# eff4 (background: # 00b506 -webkit-gradient (linear, left top, right top, from (# 00b506), to (# 00b506), color-stop (0. 5 , #ffffff)) 0 0 no-repeat; color: rgba (255, 255, 255, 0. 1 ); font-size: 120px; font-weight: bold; position: relative; -webkit-animation: shine 2s infinite; -webkit-background-clip: text; -webkit-background-size: 300px; ) @ -webkit-keyframes shine ( 0 % (background-position: top left;) 100 % (background-position: top right;))

Effect # 5 - Outlined CSS3 Text Using the Webkit Text-Stroke Property

You can easily add an interesting flat text stroke using the -webkit-text-stroke property:

# eff5 (color: # 00b506; -webkit-text-stroke: 1px # 000 ; }

Effect # 6 - 3D Rotate Text Using CSS3 Y-Rotation Transform Property

You can rotate text using transitions and rotation transforms around the Y-axis:

# eff6 (color: # 00b506;) # eff6 p (color: # 8A2BE2; cursor: pointer; display: inline-block; -webkit-transition: .5s; -moz-transition: .5s; -o-transition:. 5s; transition: .5s;) # eff6 p: hover (-webkit-transform: rotateY (-180deg); -moz-transform: rotateY (-180deg); -0 -transform: rotateY (-180deg); transform: rotateY (-180deg); filter: progid: DXImageTransform .Microsoft .BasicImage (rotation = 2))

Conclusion

In this tutorial, we looked at ways to create various text effects using CSS3 properties. We hope you enjoyed this tutorial and will find it useful. Not all properties that were used for this tutorial work in all browsers, but they are all used only to create beautiful effects that do not affect functionality, so they can be applied, for example, using the @ supports only for browsers that support these properties.

Translation - Duty