Many things and phenomena of the material world are perceived unconsciously, and the effect of their perception is the result of applying knowledge of the past. All things have shadows, this is natural. To one degree or another, design has always reflected reality to the extent that a computer monitor allowed it.
The evolution of modern display devices has achieved amazing results, and the desire to depict the shadows of objects has not only become available in the form in which it is present in real life, but also in its new computer reflection.
Item shadow
Only that on which a ray of light falls is visible, because it is precisely the result of the reflection of the ray that is accessible to perception by the eye. The ray is "indifferent" to perception from a specific point in space, and when it illuminates an object, it is reflected from it, and when it hits the surrounding objects, it creates a bizarre play of light and shadows.
The Shadow CSS property cannot convey the reality of reality, but the shadow effect can be obtained both in its natural meaning (in a certain sense) and in the new computer version (not everything has a shadow, but it can be “thought out”).
A shadow can be assigned to those elements that, by their very nature, never have it at all. The virtual world brought real dynamics and new physical laws of objects and phenomena into the world, although perhaps they are already there, they are simply not yet discovered in a real way.
Shadow CSS Properties
Using CSS to specify the desired shadow is very simple. The box-shadow syntax is included in the general description of an element and has a small number of parameters.
Shadow options in Shadow CSS are set as follows. X and Y offsets, blur, stretch, and color. The first two numbers determine the shadow offset relative to the element, the third - the blur radius, the fourth - the size of the shadow relative to the element.
Numbers can be negative, the color is set according to general rules. S hadow CSS syntax is supported by all browsers, but in each case it makes sense to check if the selected shadow option is adequately displayed.
When using the border shadow property, CSS takes into account the selected radius of the curve and makes appropriate changes to the resulting shadow.
Shadow design
Among the online CSS tools, Shadow Generator is prominent. Shadows do not apply to what you can simply program by specifying several parameters. The design of the element is related to the overall design. It is very convenient to use various generators to determine the desired values. This saves time and makes it possible to use the experience of other developers.
CSSmatic offers a good tool - the result is presented interactively, and the result can be obtained immediately in the code and inserted into your project. Here you can not only determine the shadow and its parameters, but also the actual color and structure of the desired element.
A tool from Mozilla, Developer, makes it possible to obtain in interactive mode not only the code and shadow of an element, but also to design its pseudo-elements (: before and: after).
Naturally, the features of S hadow CSS do not give a shadow from the image inside the element, but using the background-color property in the transparent value, you can easily impose the desired outline on its shadow and get the desired effect.