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

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.

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.

To control the border of an element, use the generic border property. This property allows you to set the thickness, style, and color of an element's border in a single declaration.

These three properties (border thickness, border style, and 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 block has a different border thickness, style, and color.

Think about how to CSS help you can create a shape like this:

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

• border-style - border style.
• border-width - border width.
• border-color - border color.

Let's consider each of the values ​​separately.

border-style property Border style.

The border-style property sets the style of the border. In CSS, in HTML differences, the border of an element can be not only solid. The following values ​​are accepted for the border style:

1. none - no border (default).
2. solid - solid border.
3. double - double border.
4. dashed - dotted border.
5. dotted - a border made of a series of dots.
6. ridge - "ridge" border.
7. groove - "groove" border.
8. inset - depressed border.
9. outset - extruded border.

Examples of what they look like.

no border (none)

solid border

double border

border of a series of dots (dotted)

dashed border

groove border

ridge border

indented border (inset)

extruded border (outset)

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

A div block with a black border and ridge style.

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

Using the border-style property, the border style can be set not only for all sides of the block. It is possible to set multiple values ​​for 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 or four values. Let's look at examples for each case.

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

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

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

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

The border-width property. Border thickness.

To set the width of an element's border, use the border-width property. The border thickness can be specified in any absolute units of measurement, for example in pixels.

Like 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 ​​in the form keywords. There are three in total:

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

Border thickness: thin.

Border thickness: medium.

Border thickness: thick.

The border-color property. Border color.

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

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

The border-color property can also have one to four values ​​and treats them similarly to the previous properties.

One value (red).

Two values ​​(red black).

Three values ​​(red black yellow).

Four values ​​(red black yellow blue).

Now let's return to the problem stated above and draw a figure:

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

Setting values ​​for sides separately

It was mentioned above that you can specify border property values ​​for only one side of a block. There are properties for these purposes:

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

Let me remind you that for all properties three values ​​​​are specified (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 element's top border.

Right border options (border-right).

• border-right-color - sets the color of the element's right border.
• border-right-width - sets the thickness of the element's right border.
• border-right-style - sets the style of the element's right border.

Bottom border options (border-bottom).

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

Left border options (border-left).

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

An example of using these properties:

The border-radius property. Rounding border corners.

The border-radius property is intended to round the corners of an element's borders. This property appeared in CSS3 and works correctly in all modern browsers, with the exception of Internet Explorer 8 (and older versions).

The values ​​can be any numbers used in CSS.

Border-radius property: 15px.

If the block frame is not specified, then the fillet occurs with the background. Here is an example of a rounded block without a border, but with a background color:

Border-radius property: 15px.

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

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

Border-radius property: 15px.

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

Having carefully studied this table, you can understand that the shortest entry for the desired style will be like this: border-radius : 15px 0 . There are only two meanings.

A little practice

Drawing a lemon using CSS.

Here is the code for such a block:

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

We have already drawn the figure:

Now let's leave a triangle from it:

The triangle code is:

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

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

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 border of an element from a group of elements with a set value of this property.
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

Line view outer contour 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; )