Examples of using CSS text shadow. CSS: Multiple Techniques for Different Element Stroke Effects Decoration Line Color: Text-decoration-color Property
The CSS text-shadow property is responsible for setting the shadow of the text. Very similar to the box-shadow property.
CSS text-shadow syntax
text-shadow : X Y R color ;
- X - shift of the shadow relative to the text along the X axis (most often set in px pixels);
- Y - shift of the shadow relative to the text along the Y axis (most often set in px pixels);
- R - shadow radius (most often specified in px pixels);
- color - color (can be specified in any format, see html color names)
The text-shadow syntax allows multiple shadows to be specified, separated by commas. For example
text-shadow : X1 Y1 R1 color1 , X2 Y2 R2 color2 , ...;
The shadow priority (which is higher, which is lower) depends on the specific CSS version. In CSS3, the first shadow in the list is placed at the very top, the last in the list is placed at the very bottom. In CSS2 it's the opposite.
Examples: how to make a shadow for text in html
Example No. 1. Simple shadow for text in html
Below is the simplest example with a text shadow. Here we have applied both offsets (X and Y) and also made a blur radius.
Текст с тенью
Текст с тенью
Пример №2. Фиксированная или жесткая тень у текста в html
Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.
Фиксированная или жесткая теньФиксированная или жесткая тень с фоном
На странице преобразуется в следующее
Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном
Пример №3. Двойная тень у текста в html
Двойная тень
На странице преобразуется в следующее
Двойная тень
Пример №4. Вдавленные буквы у текста в html
Вдавленные буквы - вариант 1Вдавленные буквы - вариант 2
На странице преобразуется в следующее
Вдавленные буквы - вариант 1
Вдавленные буквы - вариант 2
Пример №5. Вдавленные буквы у текста в html
Небольшой 3D текст
На странице преобразуется в следующее
Небольшой 3D текст
Для обращения к margin из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.margin ="VALUE "
Влад Мержевич
Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.
Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
Outline text
The contour made by this method is shown in Fig. 1. The outline turns out to be slightly blurred, so for those who want to get a clear line, the second method is intended. It consists of using four sharp shadows of the same color, they are shifted to different angles by one pixel (example 2).
Example 2. Four shadows for the outline
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Outline text
The appearance of such a contour is shown in Fig. 3. It is noticeable that the contour is more expressive.
Rice. 3. Contour with four shadows
To add the 3D text effect shown in Fig. 4, several shadows are applied simultaneously, which are shifted relative to each other by one pixel horizontally and vertically.
Rice. 4. 3D text
Personally, this type of text reminds me of retro style lettering and, again, it is best suited for headings, rather than the body of a web page.
The number of shadows depends on how much you want to “pull” the text forward. A larger number increases the “depth” of the letters, a smaller number, on the contrary, reduces the three-dimensionality. Example 3 uses five shadows of the same color.
Example 3: Shadow to add three-dimensionality
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Ten chamber refrigerator
For all shadows we set the blur radius to zero and the same color. The shadows differ only in their offset values.
Text embossing
To create the effect of text embossing or, in other words, relief, the color of the text must match the background color. One part of the letters “protruding” above the surface seems to be illuminated, while the other part is in the shadow (Fig. 5).
Rice. 5. Embossed text
To add a similar effect, we need two shadows - we move the white shadow up to the left by one pixel, and the dark gray one down to the right (example 4).
Example 4: Embossed text
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Embossed text
The relief looks best on a gray background, so the effect is not suitable for every color scheme of the site. By the way, it’s easy to get pressed rather than extruded text; just swap the shadow colors.
Text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;
Glow
The glow around the text is the same shadow, only it is bright and contrasting. Thus, to create a glow effect, just change the shadow color and set the desired blur radius. Since the glow around the text should be uniform, the shadow offset should be set to zero. In Fig. Figure 6 shows an example of glowing in different colors.
Rice. 6. Glow text
Example 5. Glow
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Bright side
Dark Side
Blur
The shadow itself is blurred, so if we leave only the shadow and hide the text itself, we will get blurry letters (Fig. 7), and the degree of blur can be easily adjusted using the text-shadow parameter.
Rice. 7. Text with blur
To hide the original text, just set the color to transparent (example 6). The shadow color then acts as the text color, and the blur radius sets the degree of blurring of the letters.
Example 6: Blur text
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Blurred text
Shadow and pseudo-classes
The shadow doesn't have to be added directly to the text; the text-shadow property plays nicely with the :hover and :first-letter pseudo-classes. Due to this, interesting effects are obtained with text, such as the contoured first letter of a paragraph or the glow of a link when hovering the mouse cursor over it. Example 7 shows such techniques.
Example 7: Using Pseudo-Classes
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
A niche project slows down the traditional channel, regardless of costs. The market structure, discarding the details, stabilizes the marketing and sales department, using the experience of previous campaigns. Brand building, of course, spontaneously pushes away convergent PR, winning a market segment. Investment synchronizes role social status, increasing competition. The brand naturally determines the placement plan, using the experience of previous campaigns.
This tutorial introduces several CSS techniques for creating different effects for the outline of elements.
A simple light shadow effect can be achieved by using gray on the stroke. CSS3 has the ability to create a real shadow using the property box-shadow, but the simple way will work in all browsers:
Shadow ( padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )
The dented block effect is also very easy to achieve. Adding CSS3 rounded corners enhances the effect:
Pressed ( color: #fff; padding: 20px; background: #111; border: 1px solid #000; border-right: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px )
This effect is very similar to a double stroke, which is often used for images. The indent and stroke settings are used, resulting in a double border effect. Additional work with the settings and the use of the outline property allows you to achieve the effect of beveled edges.
Img.light ( outline: 1px solid #ddd; border-top: 1px solid #fff; padding: 10px; background: #f0f0f0; ) img.dark ( outline: 1px solid #111; border-top: 1px solid #555; padding: 10px; background: #333;
This effect can be used in menus or lists. It is a simple combination of the top and bottom strokes with different shades of the background color. One thing to keep in mind is that the CSS first-child and last-child selectors are not supported by older browsers. To get around this unpleasant situation, you can use jQuery.
#indented ul( margin: 20px 0; padding: 0; list-style: none; ) #indented ul li ( border-top: 1px solid #333; border-bottom: 1px solid #111; ) #indented ul li:first -child (border-top: none;) #indented ul li:last-child (border-bottom: none;) #indented ul li a ( padding: 10px; display: block; color: #fff; text-decoration: none ; ) #indented ul li a:hover (background: #111;)
The module contains CSS features related to text styling, such as underlining, text shadows, and East Asian text accents.
Text styling properties
1. Line design: underline, stroke and strikethrough
Underlines, strokes, and strikeout lines are displayed only for non-replaced line-level blocks (display: inline) and are displayed throughout all text, including spaces between characters and words, except for indentation at the beginning and end of a line.
Browsers may break the underline and stroke where the line intersects the glyph, appearing some distance on either side of the glyph's outline. When the browser breaks the underline or stroke at glyph boundaries, the shape of the line on that boundary must match the shape of the glyph. However, the specification does not prescribe a specific method for "following the shape" of a glyph, leaving this up to the browser.
Rice. 1. Breaking the underline 1.1. Decoration line type: 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 specifies the style of 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 text decoration line color set for an 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 quick summary of the properties of a decoration line: 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 value text-decoration: none solid currentColor; . The property is not inherited. However, the style of all text lines must be the same for one element.
1.5. Position of the design line: 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 specified in the 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 element's text content. 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 edge of the text. However, this value is interpreted as under . |
| right | In vertical typography modes, the underline is aligned to the right edge 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: 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 a shadow to text. Text shadow is an interesting tool that allows you to create amazing effects. Shadows can be single or multi-layered, blurred, colored or translucent. When specifying a shadow for an element, you can specify only one length and color, thereby creating a colored copy of a single character or word. Also, using a shadow can make text more readable if the contrast between the color of the text and the background is low.
Each shadow is applied both to the text itself and to its design elements (text-decoration property). 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 located on top of the other shadows. The property is inherited.
Each shadow is defined by two or three lengths and an optional color. Allowed lengths are 0 .
The property is not inherited.
Rice. 3. Text-shadow property syntax | text-shadow | |
|---|---|
| Values: | |
| x-offset | Sets 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 | Sets the vertical offset of the shadow. A positive value moves the shadow down, a negative value moves the shadow up. |
| blur | Sets the blur radius. 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 blurred the edge of the shadow is. |
| color | Sets 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 the default value. |
| inherit | Inherits the property value from the parent element. |
Unlike box-shadow , text shadows are not clipped and may appear if the text is partially transparent. Like box-shadow , text shadows do not affect the layout and do not cause the scrollable area to scroll or increase in size.
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 rgba(0, 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);
Retro shadow
Text shadow
Text-shadow-4 ( color: #FB631E; letter-spacing: .1em; text-shadow: 4px 4px white, 6px 6px #D7CC88; )
Layered shadow
Text shadow
Text-shadow-5 ( background: #f1f1f1; color: #fcc105; letter-spacing: .1em; text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )
Typography is my favorite toy when it comes to web design. Of course, with its help you can attract a person’s attention by just slightly changing the style or size of the font. Very simple and very effective; many books have been written on this topic and many copies have been broken in disputes. Today I won’t give advice on typography in general - I don’t have enough qualifications, but how to design the text of your website is always welcome. So today I'll show you a few ways to use the CSS3 property. text-shadow, very simple, but in the right hands it can work wonders.
Basic text-shadow syntax
This property CSS3 Works in all latest browsers, without vendor prefixes such as -moz and -webkit. Even IE can be taught to understand this property; you need to use Modernizr or analogs.
Text-shadow: x-offset y-offset blur color;
That's all the basic syntax. The first value is the horizontal offset, the second is the vertical offset, shadow blur and shadow color. Let's look at an example:
Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
We moved the shadow, blurred it by 3 pixels and assigned the color black with a transparency of 30%. Why do I use alpha channel or transparency? This gives you more freedom in your actions; you can make it a little lighter or darker simply by changing the transparency value, without having to worry about choosing a color. It turns out quite quickly, I recommend it.
Depressed letters
body ( background: #222; ) #text h1 ( color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )
The principle of operation here is this: the background is slightly lighter than the letters, a light shadow with a slight transparency. The result is in the picture, try it.
Hard shadow
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
Nowadays retro style is in fashion, and there they use shadow without blur. Well, we're ready for this
Double shadow
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
And here another tricky feature of the property is used text-shadow, selectors can be listed separated by commas, thus creating as many shadows as needed. The first shadow can be assigned a color similar to the background, then the effect will be as in the picture.
Down and away
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 );
The text is voluminous and seems to hang above the background, isn’t it? Here we use 4 shadows with different levels of blur and location. In general, the more shadows are used, the more realistic the effect; take this into account in your projects.
Small 3D text
text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Similar to the previous example, three shadows, but located closer, hence the effect of three-dimensionality and weight of the text.
3D text by Mark Dotto
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);
I came across this designer’s work online and couldn’t pass it up. Impressive realism.
Indented text by Gordon Hall
background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Another example of impressive work with the property text-shadow. But the principle is the same as I said above. Slightly lighter background, light shadow below the letters and dark above. Made simply, but very cool.
Shine text
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
Here, too, everything is simple - we don’t move the shadow, we blur it more strongly and make it white. That's all the shine.
Retro style
text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
I spoke above about the retro style, this is from the same opera. It's so fashionable now, multiple clear shadows. Use at your own discretion
Multiple light sources
text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Here is the effect of multiple light sources that give shadows in all directions.
Raised text
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);
The depressed text was already there, but now it’s raised. A fairly simple effect, but it looks very nice in headlines, for example. Use it, try it
In conclusion I want to say - CSS3 text-shadow property very simple, as you can already see. But its proper use, and with a little imagination, can work wonders.
Experiment, have a nice day