Making a shadow for the text using CSS. Outlining text using CSS. CSS: border. Element Bounds

Greetings to all readers of the current publication! Today we will show you how to create a text outline using CSS tools. I'll tell you what this moment There are tools to implement outlining around text content, how does it all work in different browsers and of course I will bring specific examples. Now let's get down to business!

Let's turn to familiar tools

For a long time, and to this day, developers use the property text-shadow to create an outline around the characters. But in fact, the named element was originally designed to form shadows around text.

Thanks to the flexible layer management mechanism, using text-shadow you can create completely different effects: pressed or voluminous, transparent or gradient text, and so on. Of course, this property can also be used to implement contours.

The advantage of the current tool is that:

• it is familiar to developers to use;
• displayed correctly without exception;
• easy to use;
• allows you to create various effects for content.

Now let's look at software implementation. In I created a simple first-level header, and in the styles from the main one I specified the text color and shadow parameters.

Mega super duper title

However, in this case the outline is practically invisible. Therefore, get ready for the fact that in this one you will have to create several layers:

text-shadow: 0 0 2px #010010, 0 0 3px #010010, 1px 1px 2px #010010, 2px 2px 2px #010010, 3px 3px 1px #010010;

Despite the existence of this mechanism, another one was created, focused specifically on the implementation of the contour around the symbols.

A new tool to solve the problem

Among the properties of css3 style sheets, a new one has appeared, whose name is -webkit-text-stroke. The named property works only in browsers created on the engine Webkit. This means, unfortunately, it will not be displayed in Firefox and Internet Explorer.

I want to warn you right away that the current tool is in the so-called experimental stage. You won't even find it in the W3C specifications. Although it was previously described under the name text-outline, and then removed from the documentation.

To Work with -webkit-text-stroke quite simple, since it functions just like border. For installation a certain color-color is added to the above name, and -width is added to determine the thickness. However, as with border, you can use a shorthand style description. Those. First specify the thickness of the stroke, and then its color. To better understand the material, let's look at an example.

Mega super duper title

As you can see, in this case the stroke looks neat and is much easier to create.

Thanks to this property You can create not only the usual stroke, but also make it translucent.

However, do not forget that when using text-stroke, you should take care of the correct display of text content in other browsers.

A few words about generators

If you don’t know what code to write to implement a particular design, then use online generators. As an example I can give a link http://protocoder.ru/css/strokeTextGen. By clicking on it, you can generate certain type contour for the text, and also in the constructor below see the resulting css code.

On this note, my publication has come to an end. If you liked the material presented, please please me with your subscription requests, and don’t be greedy and share interesting links with colleagues and friends. Bye bye!

Best regards, Roman Chueshov

(No ratings yet)

Of course, you can create beauty in Photoshop, but what if you need to save the text and not paste it with a beautiful picture?

For example, for better indexing, I wanted to make the title text in tags

. But at the same time maintain beauty. Like this:

So, let's make some text with a shadow using CSS:

Level 3 CSS has the "text-shadow" property to add a shadow to every letter of any text.

1. Simplest form: h3 (text-shadow: 0.1em 0.1em #333)
2. Blurry text shadows: h3.b (text-shadow: 0.1em 0.1em 0.2em black)
3. Readable white text: h3.a (color: white; text-shadow: black 0.1em 0.1em 0.2em)
4. Layered Shadows: h3 (text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006)
5. Drawing letters and outlines: h3 (text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black)
6. Neon Glow: h3.a (text-shadow: 0 0 0.2em #8F7) h3.b (text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F)

Another interesting example:

Outlining text with CSS

It is possible to outline text using CSS without resorting to scripts. This effect can be created using the text-shadow property. Although IE does not accept this property in any of its versions, in others popular browsers The recipe described will work great.

Consider the code below:

Example No. 1

H1(text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px;)

The first parameter of the text-shadow property sets the color of the shadow, the second the horizontal offset of the shadow relative to the text, the third the vertical offset. When you specify a shadow offset in all directions around the text by 1 pixel in turn, you get the stroke effect.

Stroke example No. 1

To make the stroke more saturated, you can use the fourth parameter text-shadow, which is responsible for the blur radius of the shadow:

Example No. 2

H1(text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px;)

Stroke example No. 2

If you notice, the "red 0 0 3px" property is repeated several times. This is where the saturation effect lies. To achieve a clearer appearance of the stroke, the property can be added with other parameters a large number of once. The only downside is that it can greatly slow down the browser on weaker computers.

Vlad Merzhevich

At one time there was a certain fashion for text with shadows and a similar effect could be found on almost any website. IN graphic editor The shadow is added simply, it looks great, here is the text with a shadow and shoved onto the web page, regardless of the style of the site and the designer’s sense of proportion. When most browsers began to support the text-shadow style property, the fashion had already passed and now text with a shadow is quite rare. However, text-shadow has a number of other implicit uses that few people suspect. Using this property, you can create outline text, “extrude” it, create a glow, blur, and much more.

Using text-shadow

Four parameters are written as values: shadow color, horizontal and vertical displacement, and shadow blur radius (Fig. 1).

Rice. 1. Text-shadow parameters

Color can be written at the beginning or end of all parameters in any suitable CSS format. So you can make a translucent shadow through rgba format. Positive offset values ​​cast the shadow to the right and down, while negative offset values ​​cast the shadow to the left and up, respectively. To have a shadow around the text, just set zero values offsets. The blur radius sets how sharp the shadow will be. How larger radius blur, the softer the shadow looks.

A big advantage of text-shadow is the ability to add several different shadows at once, listing their parameters separated by commas. This feature basically allows you to create different effects.

Unfortunately, IE before version 10.0 does not support text-shadow , so we won’t see any beauty in this browser.

Outline text is characterized by the fact that each letter is surrounded by a line, the color of which differs from the color of the text (Fig. 2). This effect looks best with sans serif font. big size, for example, headings. For body text, using an outline only impairs readability.

Rice. 2. Outline text

A contour can be created using two methods. In the first method, we set a zero shadow offset and a small blur radius, literally 1-2 pixels (example 1). Increasing the blur value turns the outline into a glow around the text, which is a different effect.

Example 1: Outline text

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. Large quantity increases the “depth” of the letters, less, 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 gray background, so the effect is not suitable for everyone color scheme 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, it is enough to change the color of the shadow 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 original text it is enough to set the color as 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 we get interesting effects with text like the outline of the first letter of a paragraph or the glow of a link when you hover 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. Trademark

naturally determines the placement plan, using the experience of previous campaigns.

3.5 out of 5 Do you think it is possible with a couple of tags and make a scalable triangle? What about the pentagon? But such a star? I think many people think not. Actually it is possible.

So, today we have a post-experiment. We will play with everyone known CSS property- border (and all that relate to it). During the experiment we will look at how to make some simple polygons, a star and look at one case where these techniques can be used in practice. Go!

Simple geometric shapes

So let's start with simple examples. Do you know how to draw a triangle? using HTML and CSS? And like this:

HTML

CSS

.trapezoid ( vertical-align: text-bottom; )

Trapezoid,
.polygon ( display: -moz-inline-block; )

Polygon,
.trapezoid ( margin:0; padding: 0; background: none; )

Polygon ( width: 10em; height: 10em; border: none; display: inline-block; text-align: center; )
.trapezoid (
display: inline-block; width: 1px; height: 0; margin: 0 auto;
border-left: 5em solid transparent; border-right: 5em solid transparent;
}

Polygon .aa ( border-bottom: 10em solid; border-top: none; )

Polygon.r2 ( height: 0em; )

Polygon.r3 ( height: 8.66em; )
.polygon.r3 .trapezoid ( border-width: 8.66em 5em; )

div.eg ( width: 10em; background: #FFF; margin: 0 0; padding: 1em; )
div.eg .polygon ( display: block; margin: 0 auto; )

R3 ( color: red; font-size: 0.5em; )

Star

HTML

Star

CSS

#star(
width: 15em;
height: 14.27em;
position: relative;
}

#star span,
#star(
display: block;
}

#top(
width: 0;
height: 0;
margin: auto;
border-right: 4.64em solid transparent;
border-left: 4.64em solid transparent;
border-bottom: 14.27em solid;
}

#center(
width: 5.7em;
border-right: 4.65em solid transparent;
border-left: 4.65em solid transparent;
border-top: 3.36em solid;
height: 0;
position: absolute;
top: 5.46em;
left: 0;
z-index: 100;
text-align: center;
}

#bottom(
position: absolute;
bottom: 0;
left: 2.852em;
border-right: 4.635em solid transparent;
border-left: 4.635em solid transparent;
border-bottom: 3.4em solid #fff;
width: 0;
height: 0;
}

#center span(
margin-top: -2em;
color: #000;
font-weight:bold;
}

a#star:hover #center span(
color: #fff;
background-color: transparent;
}

a#star(
color: #f90;
background-color: transparent;
}
a#star:hover(
color: #fc3;
background-color: transparent;
}

Some more examples

• Christmas tree and unusual layout by Eric Meyer;
• Tiles and menus from the chief technologist of Technocracy;