Without darkness there is no light, without shadow there is no form. Even the basic makeup tool for women is called “eye shadow”. If you want to bring beauty to the pages of your site, you need to put the right accents - add CSS shadow where necessary.
The material below will help you learn how to set the shadow for a block or image using CSS code.
CSS shadow. Syntax
Actually box-shadow, where box is the block, and shadow is the shadow itself.
The code is written in braces:
{box-shadow: 11px 22px 33px 44px # 333333;}.
The line tells us that the block is given a standard shadow with a pixel radius. The data is decrypted as follows:
- 11px - the shadow offset 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 - shifting the shadow relative to the block along the Y axis (a positive value (5px) will lead to a shift of the shadow down, negative (-17px) to the top);
- 33px is a blur parameter; the larger the number, the stronger the effect;
- 44px - shadow radius, 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 ;} - such a line is not erroneous (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 is not difficult, but how many eye-pleasing effects you can create! Make your brainchild more unique, unique, because in the design every detail is important, every detail. Here, it seems, nothing special, but with it it is much more interesting and attractive.
Let's look at a few illustrative examples of how the CSS shadow of a block looks like depending on the coding:
- {box-shadow: 25px 25px;} - CSS shadow with an axis offset of 25 pixels.
- {box-shadow: 25px 25px 10px;} - CSS shadow with an axis offset of 25 pixels and blurring of the edges by 10 pixels.
- {box-shadow: 25px 25px 10px 5px;} - CSS shadow with an axis offset of 25 pixels, blurring of the edges by 10 pixels and a specified radius of 5 pixels
- {box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS shadow with an axis offset of 25 pixels, blurring of the edges by 10 pixels, a specified radius of 5 pixels and color.
Shadow effects
To create more beautiful, elegant, original shadows, there are various effects. You can make an inner shadow. To do this, it is enough to indicate "inset" in front of the parameters in the code, then the description of the parameters will go as usual:
{box-shadow: inset 4px 2px 6px # 9e9e9e;}.
It is possible to put several shadows with completely different parameters under the block, in the code they (shadows) are listed with a comma:
{box-shadow: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.
Shadow picture
In addition to blocks on the pages of the site there will certainly be pictures, photographs, backgrounds - all these elements also look much more interesting with shadows. You can pre-arrange pictures in graphic editors and paste them on the page already with shadows. But, firstly, this is not always possible for various reasons, including due to the lack of skills in working with graphics, and secondly, any manipulations with the image add weight to it, and such a picture may well slow down page loading. In this case, you can make the CSS shadow of the picture.
The simplest and syntactically correct solution to this problem is to create a block in which your picture will be the background. Next, you make the necessary shadows for the block and they are displayed on the background 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 inner shadow without offset along the axes, with blur and radius, determined the color, height and width of the block, and assigned a picture as the background. As a result, we got a picture with an inner shadow.
Agree, creating shadows using CSS-code is quite simple, at the same time fascinating, and most importantly - a useful lesson.