Greetings, dear readers. Today I will tell you and show you how you can create a text outline in CSS. We will carry out all manipulations exclusively with the text-shadow property.

Thin, crisp outline

As a text on which we will test all our ideas, I propose to use this:

Here you can see that the block with text has the class text-dec. It is through this that we will access our element in css, applying the necessary properties to it. So, how to make a thin stroke:

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

Let's ask right away 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:

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

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 has been outlined along its entire contour. If you add a 10 pixel blur to each shadow, it will look like this:

Blurred stroke

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

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

It looks like this:

Bold stroke

This is more difficult to implement, since moving the shadows too much can make the text unreadable. And yet a certain effect can be achieved, although for this you will have to add much more shadows than in previous cases. Accordingly, add to html new text fragments with 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 by 1 pixel each time.

Even thicker stroke on all sides

Further - more difficult. I personally didn’t know how to properly implement a stroke on all sides, but then I came across a text-shadow generator on the Internet, which allows you to customize the shadow in visual mode, and then you just need to copy its code. Here is a link to the generator.
With its help I was able to make a shadow like this:

I won’t give the code, it takes up as many as 50 lines. However, look for yourself in the generator.

CSS is not omnipotent yet

On this css features are ending. If you want a nice bold stroke like this one:
Then make it in Photoshop, and the text itself will have to be inserted onto the web page as an image

So far I know such options as how to make a text outline in CSS. Maybe you know some, write in the comments. Next time I'll show you a few more effects you can do with text using the text-shadow property.

3.5 out of 5

Do you think it is possible with a couple of tags and pure CSS 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;

CSS border An element is one or more lines surrounding the element's content and its padding. The border is specified using the shorthand border property. The frame style is set using three properties: style, color And width.

Decorating frames and borders of HTML elements using CSS properties

1. Border-style

By default, borders are always drawn on top of the element's background, with the background extending to the outer edge of the element. The frame style determines its display; without this property, frames will not be visible at all. For an element, you can set a border for all sides simultaneously using the border-style property, or for each side separately using the border-top-style qualifying properties, etc. Not inherited.

border-style (border-top-style, border-right-style, border-bottom-style, border-left-style)
Values:
none	The default value means no frame. Also removes the frame of an element from a group of elements with the value of this property set.
hidden	Equivalent to none .
dotted	dotted
dashed	dashed
solid	solid
double	double
groove	groove
ridge	ridge
inset	inset
outset	outset
{1,4}	Listing four different styles for an element's border at once, just for the border-style property: (border-style: solid dotted none dotted;)
initial
inherit

Syntax

P (border-style: solid;) p (border-top-style: solid;)

2. Frame color border-color

The property sets the color of the frames on all sides at the same time. Using the clarifying properties, you can set a different color for the border of each side of the element. If no color is specified for the frame, it will be the same as the color of the element's text. If the element has no text, the border color will be the same as the parent element's text color. Not inherited.

border-color (border-top-color, border-right-color, border-bottom-color, border-left-color)
Values:
transparent	Installs transparent color for the frame. At the same time, the width of the frame remains. Can be used to change the border color when hovering the mouse over an element to avoid the element being displaced.
color	The color of the frames is set using the values ​​of the property. (border-color: #cacd58;)
{1,4}	Simultaneous transfer of four different colors for element borders, only for the border-color property: (border-color: #cacd58 #5faf8a #b9cea5 #aab238;)
initial	Sets the property value to the default value.
inherit	Inherits the property value from the parent element.

Syntax

P (border-color: #cacd58;)

3. Border-width

The frame width is specified using length units or keywords. If the border-style property is set to none and the element's border is set to some width, then in this case The frame width is set to zero. Not inherited.

Syntax

P (border-width: 2px;)

4. Setting a frame with one property

The border property allows you to combine the following properties: border-width , border-style , border-color , for example:

Div ( width: 100px; height: 100px; border: 2px solid gray; )

In this case, the specified properties will be applied to all borders of the element simultaneously. If any value is not specified, the default value will take its place.

5. Setting a frame for one border of an element

In case it is necessary to set different style boundaries of an element, you can use the shorthand notation for the corresponding boundary.
The properties listed below combine the following properties into a single declaration: border-width , border-style , and border-color . The list of properties is specified in a given order, while one or two values ​​can be skipped, in which case their values ​​will take on the default values.

The style of the top border is set using the border-top property, the bottom - border-bottom , the left - border-left , and the right - border-right .

Syntax

P (border-top: 2px solid grey;)

6. External contour outline

The property specifies an outer border around elements (i.e. outside the normal border). The main purpose of this property is to highlight an element. Unlike the border property, applying this property does not affect the size or position of the element, because the outline is displayed on top of the element's box, which in turn can result in the element's outer padding and adjacent areas overlap.

Also, the outer contour, unlike the element’s frame, surrounds the element on all sides, framing it entirely.

The outer outline is always rectangular and does not follow the border of the block for which border-radius is specified.

The outline property allows you to combine the following properties: outline-color , outline-style , outline-width . If any value is not specified, the default value will take its place.

Div ( width: 100px; height: 100px; outline: #cacd58 solid 2px; )

6.1. outline-style

The appearance of the outer contour line is set similarly to the style of the element's frame. Not inherited.

Syntax

P (outline-style: ridge;)

6.2. Outer outline color outline-color

The color of the outer contour can only be specified when set value outline-style. Not inherited.

Syntax

P ( outline-style: ridge; outline-color: silver; )

6.3. Outer outline thickness outline-width

The thickness of the outer contour line is set similarly to the thickness of the element's frame. Not inherited.

Syntax

P ( outline-style: dotted; outline-width: 5px; )

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 each 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

Stroke text with using CSS It is possible to do this 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.

Greetings to all readers of the current publication! Today we will show you how to create a stroke text css-by means. 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 can be created absolutely 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;
• displays correctly without exception;
• easy to use;
• allows you to create various effects for content.

Now let's look at the 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, the name of which 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. To set a specific color, add -color to the above name, and -width 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. For better understanding 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 a certain type of outline for the text, and also look at the resulting css code in the constructor below.

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

Best regards, Roman Chueshov

Read: 79 times