This tutorial introduces several CSS techniques for creating different effects for the outline of elements.

A simple light shadow effect can be achieved by using gray on the stroke. CSS3 has the ability to create a real shadow using the property box-shadow, but the simple way will work in all browsers:

Shadow ( padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )

The dented block effect is also very easy to achieve. Adding CSS3 rounded corners enhances the effect:

Pressed ( color: #fff; padding: 20px; background: #111; border: 1px solid #000; border-right: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px )

This effect is very similar to a double stroke, which is often used for images. The indent and stroke settings are used, resulting in a double border effect. Additional work with the settings and the use of the outline property allows you to achieve the effect of beveled edges.

Img.light ( outline: 1px solid #ddd; border-top: 1px solid #fff; padding: 10px; background: #f0f0f0; ) img.dark ( outline: 1px solid #111; border-top: 1px solid #555; padding: 10px; background: #333;

This effect can be used in menus or lists. It is a simple combination of the top and bottom strokes with different shades of the background color. One thing to remember is that the CSS first-child and last-child selectors are not supported by older browsers. To get around this unpleasant situation, you can use jQuery.

#indented ul( margin: 20px 0; padding: 0; list-style: none; ) #indented ul li ( border-top: 1px solid #333; border-bottom: 1px solid #111; ) #indented ul li:first -child (border-top: none;) #indented ul li:last-child (border-bottom: none;) #indented ul li a ( padding: 10px; display: block; color: #fff; text-decoration: none ; ) #indented ul li a:hover (background: #111;)

Another way to decorate a web page is to make text with shadow in CSS. With proper use of this style, you can successfully highlight a heading, paragraph, or part of the text. You can adjust the shadow color, offset and blur.

You can set a text shadow in CSS using the text-shadow property, which is supported by all browsers except Internet Explorer version 9 and earlier. There are also problems with Opera Mini - this browser only partially supports the property. Below is an example of writing style and property values:

H1 ( text-shadow: 3px 5px 6px #6C9; )

As you can see, we specified as many as four values ​​separated by a space. Let's go through it in order:

• 3px – the first value is responsible for the offset of the shadow along the X axis (right, left). A positive value moves the shadow to the right, and a negative value moves the shadow to the left.
• 5px – the second value is responsible for the offset of the shadow along the Y axis (down, up). A positive value moves the shadow down, and a negative value moves the shadow up.
• 6px – the third value is responsible for the shadow blur radius. This parameter is optional. By default, the blur is 0 pixels, which makes the shadow clear and unblurred.
• #6c9 – the fourth value is responsible for the color of the shadow. This parameter is optional. By default, the shadow color is set to the same color as the text to which the style is applied.

What the shadow looks like in the browser (screenshot):

Screenshot: text with shadow, CSS

Multiple CSS shadows for text

It is also possible to use multiple groups of values ​​for the text-shadow property. This means that you can set multiple shadows for one text. To do this, you need to write groups of values ​​separated by commas.

H1 ( text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

The result of applying this style is visible in the screenshot:

Screenshot: Multiple shadows for CSS text

You can create some really beautiful things with the CSS text-shadow property. You can experiment: set a large number of different shadows, set the color not only in hexadecimal, but also in RGBA format, using the alpha channel to adjust transparency. This is what can happen if you pay enough attention to this property:

Screenshot: 3D text shadow in CSS

Description

Adds a shadow to the text, and also sets its parameters: shadow color, offset relative to the inscription and blur radius. The text-shadow property can work in conjunction with the :first-letter and :first-line pseudo-elements.

Syntax

text-shadow: none | shadow [,shadow]*
where is the shadow:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Values

None Cancels adding a shadow.

color The color of the shadow in any available CSS format. By default, the shadow color matches the text color. Optional parameter.

x-shift The horizontal offset of the shadow relative to the text. A positive value of this parameter shifts the shadow to the right, a negative value shifts it to the left. Required parameter.

radius Sets the radius of the shadow blur. The higher this value, the more the shadow is smoothed out, becoming wider and lighter. If this option is not specified, the default is set to 0. Please note that the antialiasing algorithm typically differs between browsers, so the appearance of the shadow may vary slightly depending on the antialiasing settings you specify.

You can specify several shadow parameters, separating them with a comma. CSS3 takes into account the following order: the first shadow in the list is placed at the very top, the last in the list is placed at the very bottom. In CSS2, the order is reversed: the first shadow is placed at the very bottom, and the last one at the very top.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

text-shadow

Would citrus live in the thickets of the south? Yes, but a fake copy!

The result of the example is shown in Fig. 1.

Rice. 1. Shadow view in Safari browser

Browsers

Typography is my favorite toy when it comes to web design. Of course, with its help you can attract a person’s attention by just slightly changing the style or size of the font. Very simple and very effective; many books have been written on this topic and many copies have been broken in disputes. Today I won’t give advice on typography in general - I don’t have enough qualifications, but how to design the text of your website is always welcome. So today I'll show you a few ways to use the CSS3 property. text-shadow, very simple, but in the right hands it can work wonders.

Basic text-shadow syntax

This property CSS3 Works in all latest browsers, without vendor prefixes such as -moz and -webkit. Even IE can be taught to understand this property; you need to use Modernizr or analogs.

Text-shadow: x-offset y-offset blur color;

That's all the basic syntax. The first value is the horizontal offset, the second is the vertical offset, shadow blur and shadow color. Let's look at an example:

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

We moved the shadow, blurred it by 3 pixels and assigned the color black with a transparency of 30%. Why do I use alpha channel or transparency? This gives you more freedom in your actions; you can make it a little lighter or darker simply by changing the transparency value, without having to worry about choosing a color. It turns out quite quickly, I recommend it.

Depressed letters

body ( background: #222; ) #text h1 ( color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )

The principle of operation here is this: the background is slightly lighter than the letters, a light shadow with a slight transparency. The result is in the picture, try it.

Hard Shadow

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Nowadays retro style is in fashion, and there they use shadow without blur. Well, we're ready for this

Double shadow

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

And here another tricky feature of the property is used text-shadow, selectors can be listed separated by commas, thus creating as many shadows as needed. The first shadow can be assigned a color similar to the background, then the effect will be as in the picture.

Down and away

text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );

The text is voluminous and seems to hang above the background, isn’t it? Here we use 4 shadows with different levels of blur and location. In general, the more shadows are used, the more realistic the effect; take this into account in your projects.

Small 3D text

text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Similar to the previous example, three shadows, but located closer, hence the effect of three-dimensionality and weight of the text.

3D text by Mark Dotto

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

I came across this designer’s work online and couldn’t pass it up. Impressive realism.

Indented text by Gordon Hall

background-color: #666666;

-webkit-background-clip:text; text-shadow-moz-background-clip: text;

background-clip: text;

color: transparent;

text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Another example of impressive work with the property

. But the principle is the same as I said above. Slightly lighter background, light shadow below the letters and dark above. Made simply, but very cool.

Shine text

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

Here, too, everything is simple - we don’t move the shadow, we blur it more strongly and make it white. That's all the shine.

Retro style

text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

I spoke above about the retro style, this is from the same opera. It's so fashionable now, multiple clear shadows. Use at your own discretion

Multiple light sources

text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05); Here is the effect of multiple light sources that give shadows in all directions. Raised text
color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

The depressed text was already there, but now it’s raised. A fairly simple effect, but it looks very nice in headlines, for example. Use it, try it In conclusion I want to say - CSS3 text-shadow property

In the examples given, we use text shadows in various situations, which will give you the necessary basis so that you can further study this issue on your own.

1. Basic setup

Create a new one HTML file and add the following code to it HTML And CSS:

In the HTML section, add a tag

with the text class:

Web Code Geeks

For this element we will be adding a CSS text shadow. I set initial properties for this element so that it looks nice on the screen:

Now let's set the text-shadow attribute to the text. But first, let's figure out what values ​​this attribute takes:

Text-shadow: 4px 4px 4px #ccc;

1. 4px - X offset ( horizontal);
2. 3px - Y axis offset ( vertical);
3. 2px - blur value;
4. #ccc - color.

This is set as follows:

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

de color can be represented by hexadecimal code #ccc or RGBA (0,0,0,0.3); . In CSS, we can apply a CSS inner shadow to our text like this:

.text(
font-size: 5em; /* make the text larger */
text-shadow: 4px 3px 2px #ccc;
}

The browser representation of this shadowed text would look like this:

EXAMPLE website

Next we will change the background color of the body element in different ways. We do this because some CSS shadows require a specific background, otherwise they won't be noticeable. To make the text look more beautiful, we will set it in upper case.

2. Imprint effect

Set the text color to a slightly darker shade than the background. Then apply a small white text shadow with the opacity reduced:

Body (
background: #222;
}
.text(
font-size: 5em;
color: rgba(0,0,0,0.6); /* text color */
text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* adding a shadow */
}

Using the RGBA code you can set the opacity of the color. Notice that the text color has an opacity of 60% (0.6) and the div CSS shadows have an opacity of 10% (0.1).

EXAMPLE website

3. Retro shadow effect

Retro shadows don't always need to be blurred. Take this retro shadow for example:

Body (
}
.text(
font-size: 5em;
color: white; /* change the text color to white */
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); /* adding retro shadow */
}

EXAMPLE website

4. Double shadow effect

Interestingly, you can add more than one CSS font shadow. This can be done like this: text-shadow: shadow1, shadow2, shadow3; Let's add two shadows, one with the background color and the second a little darker:

Text (
font-size: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* gives two shadows */
}

Our background is white, so we don't need another color for it. In the browser the effect will look like this:

EXAMPLE website

5. Remote shadow effect

This effect is based on the function of defining several beautiful CSS shadows. Below you can see the effect with four shadows cast downwards at varying degrees of intensity:

Body (
background: #fff3cd; /* change the background color */
}
.text(
font-size: 5em;
color: white;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
}

EXAMPLE website

6. 3D effect by Mark Dotto

Body (
background: #3495c0; /* change the background color */
}
.text(
font-size: 5em;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

Now see how these CSS inner text shadows look in the browser:

EXAMPLE website

7. Realistic Gordon Hall Cut Text Effect

Gordon uses some advanced CSS magic to give not only an outer shadow, but also a realistic inner shadow:

Body (
background: #cbcbcb; /* change the background color */
}
.text(
font-size: 5em;
color: transparent;
background-color: #666666;
-webkit-background-clip:text;
-moz-background-clip: text;
background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

And this creates the effect of cut text.

EXAMPLE website

8. Text glow effect

body(
background: #992d23; /* change the background color */
}
.text(
font-size: 5em;
color: white;
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

This shadow creates a glowing effect for the text:

EXAMPLE website

9. Raised Text Effect

body(
background: #629552; /* change the background color */
}
.text(
font-size: 5em;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}

EXAMPLE website

10. Long shadow effect

This effect can be done using

Background-color: rgb(147, 201, 67);
text-shadow: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 9px rgb(131, 179, 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(131, 179, 60), 14px 14px rgb (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 18px 18px rgb(131, 179, 60 ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 23px 23px rgb( 131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 27px 27px rgb(131, 179, 60) ;
color: #eaeaea;

EXAMPLE website

Conclusion

As you can see, the text-shadow property is very easy to use and you can use it to create your own creative CSS shadows.