Text-shadow property
Recently I saw a post about the z-index property. Once such a binge has gone, I will insert my five kopecks and tell you about the text-shadow property. It so happened that recently I began to regularly come across sites that use this property. I’ll say right away that under IE of any version (and IE8 too!), Reading the article does not make sense, since the donkey, unfortunately, has not learned to support the property described in 1998.
Note: Since Habr does not allow using own styles in articles, you can watch live examples on my page .
So, CSS has a text-shadow property to add a shadow to each letter of text. At the moment of modern browser only IE does not support this style. The property itself was presented in CSS2, but was practically not supported by browsers. Gradually, the situation began to change for the better. At the moment, the browser support table looks like this.
')
As you can see, the latest versions of modern browsers support text-shadow . Even mobile versions of browsers already understand this property, albeit with some limitations.
The text-shadow property is good because it allows you to create interesting effects with text without having to use images. So the text is available to search engines, easy for the page, etc.
The simplest example of using this style is as follows.
In this example, we add a red shadow to the level 2 header, which is dropped slightly to the right and downward relative to the text itself. In the example, parameters for indentation and shadow color were used. There is also the ability to make the shadow blurred. To do this, one more optional parameter is added after the indents (note that the color of the shadow must be indicated either last or first). You can use negative values to change the direction of the shadow (left and up). By the way, browsers on the WebKit engine support color in rgba format, which allows the use of translucency.
Based on this property, you can achieve interesting effects on the site page. For example, using a shadow makes the text more readable if the contrast between the characters and the background is small. Compare the two options of white text on a pale blue background.
If you look at the example, you will see that the first line is almost impossible to see, and the text with a shadow on the second line is well read.
The text-shadow property has one interesting feature - you can create more than one shadow. At first glance, this seems unusual, but users working with graphics are familiar with the technique of creating volumetric letters (depressed or convex) with the help of several shadows.
Let's create on the gray background two different text options.
Convex text
Embossed text
However, you need to be careful in using these effects, since not all browsers support multiple shadows. For example, Opera supports up to six shadows, and Firefox only one (only the first, and ignores the rest).
Using several shadows, you can achieve another effect - the creation of contours for letters.
If you create a shadow without offset and blur it, you get the effect of neon glow.
You can also use the text-shadow property in JavaScript scripts. I'm not sure that scripts can be used on Habré, so examples can be viewed on my page .
Given the fact that IE does not support the text-shadow property, many will find it unworthy of attention. But on the other hand, IE users will not get an error when displaying the page. They will see plain, flat text, and when they are told that under a different browser the page looks cooler, then maybe it will make them think about changing the browser, and M $ developers will make them think.
Finally, here are some links for more information.
An interesting example that demonstrates the text-shadow property using a script.
Text-shadow property (several examples, including an example of fiery text).
CSS Text-Shadow in Safari, Opera, Firefox and more - some interesting examples.
Text-Shadow Exposed: Make cool and clear text effects with text-shadow - some more examples
Some examples in Russian
Note: Since Habr does not allow using own styles in articles, you can watch live examples on my page .
So, CSS has a text-shadow property to add a shadow to each letter of text. At the moment of modern browser only IE does not support this style. The property itself was presented in CSS2, but was practically not supported by browsers. Gradually, the situation began to change for the better. At the moment, the browser support table looks like this.
| Safari 3.1 (Mac / Win) | yes but without multiple shadows |
| Safari 4 (Mac / Win) | yes full support |
| Opera 9.5 (Mac / Win / Lin) | yes full support |
| Firefox 2/3 (Mac / Win / Lin) | not |
| Firefox 3.1 / 3.5 (Mac / Win / Lin) | yes full support |
| Google Chrome 1 (Win) | not |
| Google Chrome 2 (Win) | yes full support |
| IE 7/8 (Win) | not |
| Konqueror (Lin / Mac / Win) | yes full support |
| Safari on iPhone | yes but without multiple shadows |
| Nokia Symbian-Smartphones (Series 60) | Yes |
| Opera Mini 4.1 | yes but no blur |
')
As you can see, the latest versions of modern browsers support text-shadow . Even mobile versions of browsers already understand this property, albeit with some limitations.
The text-shadow property is good because it allows you to create interesting effects with text without having to use images. So the text is available to search engines, easy for the page, etc.
The simplest example of using this style is as follows.
h2.shadow
{
text-shadow: 2px 2px 1px red;
}
In this example, we add a red shadow to the level 2 header, which is dropped slightly to the right and downward relative to the text itself. In the example, parameters for indentation and shadow color were used. There is also the ability to make the shadow blurred. To do this, one more optional parameter is added after the indents (note that the color of the shadow must be indicated either last or first). You can use negative values to change the direction of the shadow (left and up). By the way, browsers on the WebKit engine support color in rgba format, which allows the use of translucency.
h2.blurshadow
{
text-shadow: 0.1em 0.1em 0.2em red;
}
Header with blurred shadow
Based on this property, you can achieve interesting effects on the site page. For example, using a shadow makes the text more readable if the contrast between the characters and the background is small. Compare the two options of white text on a pale blue background.
lightback {background-color: # F0F8FF}
.whitetext {color: white}
.whitetext-shadow {color: white; text-shadow: black 0.1em 0.1em 0.2em}
If you look at the example, you will see that the first line is almost impossible to see, and the text with a shadow on the second line is well read.
Multilayer shadows
The text-shadow property has one interesting feature - you can create more than one shadow. At first glance, this seems unusual, but users working with graphics are familiar with the technique of creating volumetric letters (depressed or convex) with the help of several shadows.
Let's create on the gray background two different text options.
.ThreeD
{
background: #CCC;
}
.a
{
color: # D1D1D1;
text-shadow: -1px -1px white, 1px 1px # 333;
font-size: 24pt;
}
.b
{
color: # D1D1D1;
text-shadow: 1px 1px white, -1px -1px # 333;
font-size: 24pt;
}
Convex text
Embossed text
However, you need to be careful in using these effects, since not all browsers support multiple shadows. For example, Opera supports up to six shadows, and Firefox only one (only the first, and ignores the rest).
Contours
Using several shadows, you can achieve another effect - the creation of contours for letters.
p.contur
{
background: #CCF;
padding: 1em;
}
.conturtext
{
font-size: 24pt;
color: #BBE;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Neon glow
If you create a shadow without offset and blur it, you get the effect of neon glow.
.neon
{
text-shadow: 0 0 0.2em # 87F, 0 0 0.2em # 87F, 0 0 0.2em # 87F
}
Using JavaScript Scripts
You can also use the text-shadow property in JavaScript scripts. I'm not sure that scripts can be used on Habré, so examples can be viewed on my page .
Summing up
Given the fact that IE does not support the text-shadow property, many will find it unworthy of attention. But on the other hand, IE users will not get an error when displaying the page. They will see plain, flat text, and when they are told that under a different browser the page looks cooler, then maybe it will make them think about changing the browser, and M $ developers will make them think.
Additional Information
Finally, here are some links for more information.
An interesting example that demonstrates the text-shadow property using a script.
Text-shadow property (several examples, including an example of fiery text).
CSS Text-Shadow in Safari, Opera, Firefox and more - some interesting examples.
Text-Shadow Exposed: Make cool and clear text effects with text-shadow - some more examples
Some examples in Russian
Source: https://habr.com/ru/post/70259/
All Articles