Vlad Merzhevich

At one time, text with a shadow was a certain fashion, and a similar effect could be found on almost any site. IN graphic editor the shadow is added simply, it looks great, here is the text with the shadow and shoved onto web pages regardless of the style of the site and the designer's sense of measure. When most browsers began to support the text-shadow style property, the mod had passed and now text with a shadow is quite rare. However, text-shadow has a number of other implicit uses that few people suspect. With this property, you can make outlined text, "extrude" it, create a glow, blur and much more.

Using text-shadow

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

Figure: 1. Text-shadow parameters

Color can be written at the beginning or at the end of all parameters in any suitable CSS format. So you can make a semi-transparent shadow using the rgba format. Positive offset values \u200b\u200b"cast" the shadow to the right and down, while negative values \u200b\u200bcast the shadow to the left and up. To have a shadow around the text, it is enough to set the offset values \u200b\u200bto zero. The blur radius sets how sharp the shadow will be. The larger the blur radius, the softer the shadow looks.

The 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 make different effects.

Unfortunately, IE before version 10.0 does not support text-shadow, so we will not see any pretties in this browser.

Outline text is characterized by the fact that each letter is surrounded by a line whose color is different from the color of the text (Fig. 2). This effect works best with large format serum fonts, such as headings. For body text, using an outline only impairs readability.

Figure: 2. Outline text

The contour can be created in two ways. In the first method, we set a zero offset for the shadow and a small radius of its blur, literally, 1-2 pixels (example 1). Increasing the blur value turns the path 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 contour is slightly blurred, so for those who want to get a clear line, the second method is intended. It consists in using four sharp shadows of the same color, they are shifted to different angles by one pixel (example 2).

Example 2. Four shadows for a path

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Outline text

The form of such a contour is shown in Fig. 3. It is noticeable that the contour is more expressive.

Figure: 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.

Figure: 4. 3D text

For me personally, this type of text resembles retro-style lettering and, again, it works best for headings, and not for the body text of a web page.

The number of shadows depends on how much you want to "push" the text forward. A larger number increases the "depth" of letters, a smaller number, on the contrary, decreases three-dimensionality. Example 3 uses five shades of the same color.

Example 3. Shadow for adding three-dimensionality

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Ten-chamber refrigerator

For all shadows, set the blur radius to zero and the same color. Shadows differ only in offset values.

Embossing text

To create the effect of embossing text or, in other words, a relief, the text color must match the background color. One part of the letters "protruding" above the surface is as if illuminated, while the other part is in the shadow (Fig. 5).

Figure: 5. Embossed text

To add a similar effect, we need two shadows - we shift the white shadow to the left up one pixel, and the dark gray one to the right down (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 the embossed text, not the embossed 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 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. 6 shows an example of a glow of different colors.

Figure: 6. Text glow

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 you 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 through the text-shadow parameter.

Figure: 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 blur for the letters.

Example 6. Blurring text

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Unsharp text

Shadow and pseudo-classes

The shadow does not have to be added directly to the text; the text-shadow property works well with the: hover and: first-letter pseudo-classes. Due to this, we obtain interesting effects with text like the outline of the first letter of a paragraph or the glow of a link when you hover over it with the mouse cursor. 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. Market structure, discarding details, stabilizes the marketing and sales department using the experience of previous campaigns. Brand building certainly spontaneously pushes converged PR away, winning back market segment. Investment Synchronizes Role social statusincreasing competition. The brand naturally dictates the placement plan, drawing on the experience of previous campaigns.

The generic border property is used to control the border of an element. This property allows you to set the width, style, and color of an element's border in a single declaration.

These three properties (width, style, and border color) can be set in a single declaration. Here's an example:

You can specify a border style on only one side of an element. To do this, use the properties border-top (top border), border-right (right border), border-bottom (bottom border), border-left (left border).

In this example, each side of the box has a different border thickness, style, and color.

Consider how you can create a shape like this using CSS:

Border values \u200b\u200b- thickness, style and color - can be set separately using special properties.

• border-style - the style of the border.
• border-width - the width of the border.
• border-color - border color.

Let's consider each of the values \u200b\u200bseparately.

The border-style property. Border style.

The border-style property sets the style of the border. In CSS, unlike HTML, the border of an element can be more than just a solid one. Valid values \u200b\u200bfor the border style are:

1. none - no border (default).
2. solid - solid border.
3. double - double border.
4. dashed - dashed border.
5. dotted is a line of dots border.
6. ridge - ridge border.
7. groove - groove border.
8. inset - an indented border.
9. outset - extruded border.

Examples of what they look like.

no border (none)

solid border

double border (double)

dotted border

dashed border (dashed)

groove border

ridge border

inset border

extruded border (outset)

By the way, if you set the border color to black for the ridge frame, you get the following result.

A div with a black border and ridge style.

The border looks like solid, but that's because the ridge style is created by adding a black drop shadow effect, and the black effect on the black border is not visible.

Using the border-style property, the border style can be set for more than just all sides of the block. It is possible to set several values \u200b\u200bfor one border-style property, depending on the number of values, the border style will be assigned to a different number of sides of the block. You can set one, two, three and four values. Let's take a look at examples for each case.

One value (solid) - the border style is set for all sides of the block.

Two values \u200b\u200b(solid double) - the first value sets the style for the top and bottom sides, the second for the side.

Three values \u200b\u200b(solid double dotted) - the first value for the top side, the second for the side, the third for the bottom.

Four values \u200b\u200b(solid double dotted dashed) - each value for one side clockwise starting from the top.

Border-width property. Border thickness.

The border-width property is used to set the border thickness of an element. The border thickness can be specified in any absolute unit of measurement, such as pixels.

As with the border-style property, the property can also be set to one to four values. Let's look at examples for each case.

Example code:

Also for the border-width property there are values \u200b\u200bin the form keywords... There are three of them:

• thin - thin border;
• medium - medium thickness;
• thick - thick border;

Border thickness: thin.

Border thickness: medium.

Border thickness: thick.

The border-color property. Border color.

The border-color tool is used to control the border color. The colors for this property can be set using any method described in the article "Colors in CSS", namely:

• Hexadecimal notation (# ff00aa) of color.
• RGB format - rgb (255,12,110). RGBA format for CSS3.
• HSL formats and HSLA for CSS3.
• Color name, for example black. Full list color names are listed in the CSS color names table.

The border-color property can also have one to four values \u200b\u200band handles them in the same way as the previous properties.

One value (red).

Two values \u200b\u200b(red black).

Three meanings (red black yellow).

Four meanings (red black yellow blue).

Now let's go back to the problem mentioned above and draw a shape:

Here is the code that draws such a shape, only larger in size:

Setting values \u200b\u200bfor sides separately

As mentioned above, you can specify border property values \u200b\u200bfor only one side of a block. For these purposes, there are properties:

• border-top (top border)
• border-right (right border)
• border-bottom (bottom border)
• border-left (left border)

Let me remind you that all properties have three values \u200b\u200b(thickness, style and color) in any order. But there are properties that allow you to set the thickness, color and style for each side separately. The writing of these properties is derived from the above.

Top border options (border-top).

• border-top-color - Sets the color of the element's top border.
• border-top-width - Sets the thickness of the element's top border.
• border-top-style - Sets the style of the top border of an element.

Right border options (border-right).

• border-right-color - Sets the color of the right border of an element.
• border-right-width - Sets the width of the right border of the element.
• border-right-style - Sets the style of the right border of an element.

Bottom parameters (border-bottom).

• border-bottom-color - sets the color of the element's bottom border.
• border-bottom-width - Sets the width of the bottom border of the element.
• border-bottom-style - Sets the style of the bottom border of an element.

Left border options (border-left).

• border-left-color - Sets the color of the element's left border.
• border-left-width - Sets the width of the left border of the element.
• border-left-style - Sets the style of the element's left border.

An example of using these properties:

Border-radius property. Rounding the corners of the border.

The border-radius property is for rounding the corners of an element's borders. This property was introduced in CSS3 and works correctly in all modern browsers except Internet Explorer 8 (and older).

The values \u200b\u200bcan be any number used in CSS.

The border-radius property is 15px.

If the block frame is not specified, then rounding occurs with the background. Here's an example of rounding a box without a border but with a background color:

The border-radius property is 15px.

There are properties for rounding each corner of an element individually. This example uses all of them:

Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

The border-radius property is 15px.

Although this code can be written in one declaration: border-radius: 15px 0 15px 0. The point is that the border-radius property can be set from one to four values. The table below lists the rules that govern such ads.

Having carefully studied this table, you can understand that the shortest record of the required style will be like this: border-radius: 15px 0. Only two values.

A little practice

Drawing a lemon using CSS.

Here is the code for such a block:

Margin: 0 auto; / * Place the block in the center * / width: 200px; height: 200px; background: # F5F240; border: 1px solid # F0D900; border-radius: 10px 150px 30px 150px;

We have already drawn the shape:

Now let's leave a triangle from it:

The triangle code is like this:

Margin: 0 auto; / * Place the block in the center * / padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;

3.5 out of 5

Do you think it is possible to make a scalable triangle with a couple of tags and pure CSS? What about the pentagon? But such a star? I think many people think not. In fact, you can.

So, today we have a post-experiment. We will play with the well-known CSS property - border (and all that relate to it). During the experiment, we will see how to make some simple polygons, a star and consider 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 only? And like this:

Html

CSS

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

CSS

#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 from Eric Meyer;
• Tiles and menus from the chief technologist of Technocracy;

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

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

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

CSS Level 3 has a "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. Smudged 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. Multi-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:

Stroke text with CSS

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

Consider the code below:

Example # 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 is the horizontal offset of the shadow relative to the text, the third is the vertical offset. When you specify the offset of the shadow in all directions around the text by 1 pixel in turn, and a stroke effect is obtained.

Stroke example # 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 # 2

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

Today I will tell you how you can make a text stroke in css. We will carry out all manipulations exclusively with the text-shadow property.

Thin clear strokes

As a text on which we will test all our ideas, I suggest using the following:

Here you can see that the block with the text has the text-dec class. It is on it that we will refer to our element in css, applying the necessary properties to it. So, here's how to do a thin stroke:

Text-dec (font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black)

Let's set immediately big size font so that everything is very clearly visible, and the text color is yellow, for example. The third line in our case implements that very stroke.

The text-shadow property allows you to add a shadow to the text, you can add as many shadows as you like, separated by commas. The property syntax is as follows:

text-shadow: horizontal offset | vertically | blur | Colour

In our case, we first set a small offset down and to the left, and then up and to the right. As a result, the text around its entire contour has received a circle.

If we add a 10 pixel blur to each shadow, it will look like this:

Blurred stroke

Another approach is not to specify an offset at all, but to define a blur - then the text will also be outlined, as it were, but not clearly. Let's add the same exact text to html, but set the style class to another one - text-dec2:

Text-dec2 (font-size: 50px; color: blue; text-shadow: 0 0 7px red;)

Bold stroke

This is more difficult to implement, as shifting the shadows too much can make the text unreadable. Still, a certain effect can be achieved, although this will require adding much more shadows than in previous cases. Accordingly, add new text fragments to the html with the classes text-dec3 and text-dec4. And here are the styles for them:

Text-dec3 (font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black, 2px 2px 0 black, -2px -2px 0 black, 3px 3px 0 black, -3px - 3px 0 black, 4px 4px 0 black, -4px -4px 0 black) .text-dec4 (font-size: 50px; color: yellow; text-shadow: -1px 1px 0 black, 1px -1px 0 black, -2px 2px 0 black, 2px -2px 0 black, -3px 3px 0 black, 3px -3px 0 black, -4px 4px 0 black, 4px -4px 0 black)

As you can see, the text retained readability and at the same time received a decent black outline. The essence of this approach is that we gradually add new shadows, increasing the offset each time by 1 pixel.

Even bolder strokes on all sides

Further - more difficult. I personally did not know how to properly implement a stroke from all sides, but then I came across a text-shadow generator on the Internet, which allows you to visually adjust the shadow, and then you just need to copy its code. Here is a link to the generator.
With its help, I was able to make the following shadow:

CSS is not omnipotent yet

This is where the css capabilities end. If you want a nice bold stroke like this one:
Then do it in Photoshop, and the text itself will have to be inserted into the web page as an image

So far, I know options for how to stroke text in css. Maybe you know what, write in the comments. Next time I'll show you a few more effects that can be done on text thanks to the text-shadow property.