CSS Shadow: how to draw

Without darkness, there is no light, there is no form without a shadow. Even the main makeup tool for women is called "shadow." If you want to add beauty to the pages of your site, you need to put the right accents - add a CSS-shadow where necessary.

The material below will help you learn how to set the shadow for a block or picture using CSS.

CSS-shadow. Syntax

Actually box-shadow, where box is a block, and shadow is the shadow itself.

The code is written in curly brackets:

{Box-shadow: 11px 22px 33px 44px # 333333;}.

The string tells us that the block has a standard shadow with a pixel radius. The data are deciphered as follows:

• 11px - Shadow shift relative to the block along the X axis (positive value (20px) Will cause the shadow to shift to the right, negative (-37px) to the left);
• 22px - with displacement of the shadow relative to the block along the Y axis (positive value (5px) will cause the shadow to shift down, negative (-17px) - up);
• 33px is a blur option, the larger the number, the stronger the effect;
• 44px is the radius of the shadow, is also directly proportional;
• # 333333 - the color in which the shadow is painted.

The last three parameters are optional and may simply not be indicated in the line, ie {box-shadow: 10px 13px ;} - this line is not wrong (the color of the shadow will be identical to the color of the text in the block).

Thus, creating a shadow on the pages of your site does not represent complexity, but how many eye-pleasing effects you can create! Make your child more unique, unique, because every little thing, every detail is important in the design. Here, it seems, nothing special, but it is much more interesting and attractive.

Let's look at some illustrative examples of how the CSS-shadow of the block looks like, depending on the code:

1. {Box-shadow: 25px 25px;} - CSS-shadow with an offset of 25 pixels.
2. {Box-shadow: 25px 25px 10px;} - CSS-shadow with 25-pixel offset and 10-pixel blurring.
3. {Box-shadow: 25px 25px 10px 5px;} - CSS-shadow with an offset of 25 pixels, blurring the edges by 10 pixels and a specified radius of 5 pixels
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-shadow with an offset of 25 pixels, blurring the edges by 10 pixels, a radius of 5 pixels and a color.

Shadow effects

To create more beautiful, elegant, original shadows there are different effects. You can make an inner shadow. To do this, it is enough to specify "inset" before the parameters before the parameters, then the description of the parameters will go as usual:

{Box-shadow: inset 4px 2px 6px # 9e9e9e;}.

It is possible to put several shadows under the block with absolutely different parameters, in the code they (shadows) are listed by comma:

{Box-shadow: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

Shadow pictures

In addition to the blocks on the pages of the site will certainly be pictures, photos, backgrounds - all these elements also look much more interesting with shadows. You can make pictures in advance in graphic editors and insert them on the page already with the shadows. But, firstly, this is not always possible for various reasons, including lack of graphic skills, and secondly, any manipulation of the image adds to it "weight", and such a picture may well impede the loading of the pages. In this case, you can make a CSS-shadow image.

The simplest and most syntactically correct solution to this problem is to create a block, the background in which is your picture. Next, you make the necessary shadows for the block and they are displayed on the background of the picture:

• .block1 {box-shadow: inset 0 0 11px 9px # 9e9e9e; Width: 480px; Height: 360px; Background: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

In this example, we created an internal shadow without any displacement along the axes, with blurring and radius, we determined the color, height and width of the block, and the background was assigned a picture. As a result, we got a picture with an inner shadow.

Agree, to create shadows with the help of CSS-code is quite simple, at the same time fascinating, and most importantly - a useful lesson.