Outlining text with CSS means: two ways to implement the example. Making a shadow for the text using CSS. Outlining text using CSS. The border-radius property. Rounding border corners

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 line), border-left (left border).

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

Think about how you could create a shape like this using CSS:

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 allowed 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.

With help border-style properties The border style can be set not only for all sides of the block. It is possible to set several values ​​for one border-style property; depending on the number of values, the border style will be assigned different number 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 (right border)
• 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 most short note 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;

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 the 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 the offset values ​​to zero. 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

Niche project slows down 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.

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:

1. Level 3 CSS has the "text-shadow" property to add a shadow to each letter of any text.: 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: 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.

The CSS border property is used to create the border of an object, namely the thickness of the border, its color and style. This property is widely used in HTML. You can create various effects to better perceive the content on the page. For example, design a sidebar, website header, menu, etc.

1. CSS border syntax

border : border-width border-style border-color| inherit;

• border-width - border thickness. You can set it in pixels (px) or use the standard values ​​thin, medium, thick (they differ only in width in pixels)
• border-style - style of the displayed border. Can take the following values
  • none or hidden - cancels the border
  • dotted - dotted frame
  • dashed - frame made of dashes
  • solid - simple line(most often used)
  • double - double frame
  • groove - grooved 3D border
  • ridge, inset, outset - various 3D frame effects
  • inherit - the value of the parent element is applied
• border-color - border color. Can be set using specific name colors or in RGB format (see names of html colors for the site)

Note

The values ​​in the CSS border property can be set in any order. The most commonly used sequence is “thickness style color”.

2. Examples with different CSS borders

2.1. Example. Different border design styles border-style

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style:outset

Four different frames

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style:outset

Four different frames

2.2. Example. Change frame color on mouse hover

This example is very simple but interesting. It shows how you can use the :hover pseudo-class and CSS frame border to create simple effects(for example, for a menu).

When you hover your mouse over a block, the frame color will change

This is what it looks like on the page:

2.3. Example. How to make a transparent border frame

The frame can be made transparent. This effect is rare, but can sometimes be very useful for web designers. To set transparency, you need to use the color set in the form RGBA (R, G, B, P), where the last parameter sets the transparency ( real number from 0.0 to 1.0)

This is what it looks like on the page:

3. Border thickness: border-width property

Sets the line thickness. Previously we asked it in unified description border.

CSS border-width syntax

border-width: thin | medium | thick | meaning;

• thin - thin line thickness
• medium - average line thickness
• thick - thick line thickness

Below are some examples. The most unusual thing will be the different thickness of the border on each side.

border-width: thin

border-width: medium

border-width: thick

Different thickness at the borders

This is what it looks like on the page:

border-width: thin

border-width: medium

border-width: thick

Different thickness at the borders

4. How to make a border frame on only one edge (border)

The CSS border property has derived properties for setting one-sided borders on an element:

• border-top - to set the border at the top (top border)
• border-bottom - to set a border at the bottom (bottom border)
• border-right - to set the border on the right (right border)
• border-left - to set the border on the left (left border)

These boundaries can be combined, i.e. Write your own frame for each direction. The syntax is exactly the same as border.

There are also properties

• border-top-color - setting the color of the top border
• border-top-style - setting the style of the top border
• border-top-width - setting the thickness of the top border
• etc. for each direction

In my opinion, it’s easier to write everything in a line than to create extra text in styles. For example, the following properties will be the same

/* Description of two identical styles: */

4.1. Example. Beautiful frame for highlighting quotes

Quote frame example

This is what it looks like on the page:

Quote frame example

Note
You can set a separate border for each side.

5. How to add multiple borders to an html element

Sometimes you need to make several borders. Let's give an example

5.1. First option with multiple borders

This is what it looks like on the page:

There is a second way through shadowing.

5.2. Overlay shadows to create multiple borders

This is what it looks like on the page:

6. Rounding corners at borders (border-radius)

For creating beautiful frames use the CSS border-radius property (only available in CSS3). It can be used to create rounded corners, which creates a completely different look. For example

7. CSS Indented Line

Pressed lines can look impressive on dark background, which is not suitable for every site.

---

This is what it looks like on the page:

To access border from JavaScript, you need to write the following construction:

document.getElementById("elementID").style.border="VALUE"