Text-shadow in CSS

Good day, dear readers. Today we want to tell you about what is text-shadow and why it is such an important property of CSS. Also, we will look at the characteristics and examples of this element. This property is very useful for text formatting of your online resource or a simple web page.

So, text-shadow allows us to create a shadow for the given text. Let's look at the basic parameters that can be set for this property.

The shift of the shadow by the X axis - if this parameter is set to a positive value, the shadow will be located in the right of the text, if the negative - on the left.

The shift of the shadow by the Y axis - with a positive value, shadow will be created at the bottom of the text, and with a negative - the shadow will be set at the top of the text.

Blur radius - the value of the shadow's blur. The default is 0. The greater the value of the blur, the more the shadow gets lighter and wider.

Color - select a shadow color for our text in any of available formats (#ffffff or color name).

All these parameters are mandatory, you can add other options only if you need them.

Unfortunately, not all browsers began to support this feature at once. The first was the Safari browser. Opera and Konqueror made it working later.

Let us give some examples of the text-shadow usage. The first example will look as follows. To write it will use ordinary text editor, in this case it will be Notepad++. We should write the code and save it in the HTML format. text-shadow

.textshadow { text-shadow: 1px 1px 3px black, 0 0 1em blue; color: yellow; font-size: 5em; }

Hello everybody!

The result will be as shown in the example.

Hello everybody!

This text formatting is made by using text-shadow, which is set in the <style> </style> tags. It uses .textshadow class with the following parameters:

text-shadow - shadow black-shifted by X and Y in 1px, with the blurring of a 3px, and blue blur of 1em;

color - the text of yellow color;

font-size - the text of 5em size.

Let's see another example of creating a shadow. Just use a text editor and write the code that changes properties of the shadows. text-shadow

.textshadow { text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006; color: yellow; font-size: 5em; }

Hello everybody!

As a result, we see a very interesting effect with three colored shadows. So, let's discuss the text-shadow parameter in this example.

The first shadow is red and shifted 0.2em by X and 0.5em by Y, with the blurring of a 0.1em.

The second shadow of green color has a blur of 0.1em, and shadow shift by X is negative. In this case the shift is not right but left with 0.3em by Y and down by 0.1em.

The third shadow will be blue and shifted to the right and up.

Hello everybody!

The following example will create only one shadow. Let's write this code in our editor. text-shadow

.textshadow { text-shadow: 0.4em -0.2em 0.1em black; color: yellow; font-size: 5em; }

Hello everybody!

Hello everybody!

In your browser, we will see the text Hello everybody! only with one black shadow and with shift to right and up. This type of shadow is often used when creating web pages.

Well, the last example is similar to the previous one, but we do not use and choose other colors. text-shadow

.textshadow { text-shadow: -0.4em -0.5em red; color: green; font-size: 5em; }

Hello everybody!

In result, we will see the so-called double green text with a red shadow shifted to the left and up. It will look as you can see it in the picture.

Hello everybody!

To summarize, the text-shadow text style attribute is often used for formatting and configuring style headers of web pages or to highlight other parts of the text. In this article, we have reviewed its main parameters, types and examples of usage. Also, we saw how well it works directly in browsers, have learned how to change color, direction, and blur. Our recommendation is to not forget about this kind of formatting when creating style for your site.

Best regards, DYAMAR Engineering.


All rights reserved. You may not copy or distribute, electronically or otherwise, any part of this article for any purpose without prior written permission from the DYAMAR Engineering.