The css features allow you to set shadows inside elements. To create an inner shadow in css for blocks, it is enough to set values to the box-shadow rule. It is more difficult to set the inner shadows of the text.
Traditionally, shadows are set for the outer sides of an element. Inner shadows in css are often complementary to outer shadows. In cases where you need to make the effect of a depressed text or play with depth and backlight, add internal shadows.
Syntax for text
The basic syntax for creating outer and inner shadows in css is very similar. Since outer shadows are usually specified, additional steps are required to build inner shadows. But to set internal shadows, you need to understand the principle of external shadows.
For text, external shadows are set using text-shadow. A rule has four meanings:
- text-shadow: 0vw 0vw 3vw rgba (134, 250, 252) - the instruction will set the shadow color and blur radius;
- text-shadow: 1vw 1vw 3vw rgba (134, 250, 252) - will add vertical and horizontal offsets (first picture) and horizontal (second picture) offsets.
Syntax for blocks
External shadows can be specified by the box-shadow rule for blocks. The principle is exactly the same as the shadow for the text: several values set the shift, radius and color.
- box-shadow: 0vw 0vw 3vw rgba (134, 250, 252) - the instruction will set the blur radius and color (first picture); in this case, the same blur radius and color are used as for the example with text;
- box-shadow: 1vw 1vw 3vw rgba (134, 250, 252) - sets the offset (second picture).
The first two values in text- and box-shadow allow you to shift the shadow to the right and down, respectively. If you give them negative values, the shadow moves left and up:
- box-shadow: -1vw 1vw 3vw rgba (134, 250, 252);
- box-shadow: -1vw -1vw 3vw rgba (134, 250, 252).
In addition to the considered values for the blocks, it is possible to set one more - stretching. By default, the stretch value is zero. If you add a positive value, the shadow will stretch, a negative value will compress it:
- box-shadow: 1vw 1vw 3vw 2vw rgba (134, 250, 252).
Shadows inside the block
The internal shadow of a block in css is much easier to create than inside a text. For the inner shadows of a block, just change the rule that applies when external shadows are set. Inset must be added to box-shadow and the shadow will go inside:
- box-shadow: inset 1vw 1vw 3vw rgba (134, 250, 252) - internal shadows appear at the corresponding faces (the picture shows an example of the difference between the rendering of external and internal shadows);
- with negative values, respectively, it turns out box-shadow: inset -1vw 1vw 3vw rgba (134, 250, 252) and box-shadow: inset -1vw -1vw 3vw rgba (134, 250, 252).
Shadows inside the text.
The inner shadow of text in css cannot be set using the text-shadow rule by adding inset. If the traditional shadow is set using four values (horizontal shift, vertical shift, radius, color), then the internal text shadows are set through the block to which the text belongs.
Before you make an inner shadow in css for text, you need to create a wrapper for it, it can be the title tag. Headline prescribe black background. Then the color of the text is set transparent, and the text disappears.
Adding shadows for text with transparent color through the text-shadow rule, we get a luminous text (depending on the value of the blur radius, the text may be clear) - this is a naked shadow, which is usually behind the written text.
text-shadow: 1vw 1vw 2vw rgba(134, 250, 252);
And the key instruction for creating inner text shadows is a background-clip with a text value that cuts the background to the borders of the text. Since the shadow of the text is slightly shifted, the effect of internal shadows is obtained.
background-clip: text;
Shadows inside the picture
You can also set inner shadows for pictures - set the picture for the block as a background, and then put inner shadows on the block. You can do it the other way, wrapping the image in a div, but it is time consuming, there are no advantages for this method.
Setting a large value for blur allows you to achieve strong vignetting of the photo without the use of editors.
Effects
“Effect of depth” - thanks to only inner shadows, you can feel as if the page is superimposed on another page.
"Volume effect" - is often created using only external shadows. Internal shadows can achieve greater realism, for example, with the help of them you can make the effect of uneven incidence of light on the block or fully illuminate it.
Shadow styles are listed with a comma. The light on one side is set by setting the inner shadows on the top and left, the outer shadows on the right and bottom define the shaded side of the element:
- box-shadow: 0.5vw 0.5vw 1vw 0vw rgba (0, 0, 0, 0.5) - sets a light outer shadow with a little blur and a small offset;
- inset 5vw 5vw 15vw 0vw rgba (255, 255, 255, 0.6) - is responsible for the "illumination" of the upper left corner, which extends to the block; in order for the effect to be noticeable, the values of blur and shift should be large in relation to all other shadows;
- inset -1vw -1vw 6vw 0vw rgba (0, 0, 0,0.2) - sets the inner dark shadow from the bottom and to the right.
In order to blur the edges of the entire block, it is enough to set the values of the inner shadows from all sides:
- box-shadow: inset 5vw 5vw 15vw 0vw rgba (255,255,255,0.8) - sets the shadow above and to the left;
- inset -5vw -5vw 15vw 0vw rgba (255,255,255,0.8) - sets the exact same shadow on the right and bottom side of the element.
conclusions
The inner shadows in css are just as functional as the outer ones. Setting inner shadows for objects is not a very common practice. Usually they are used together with outer shadows to achieve the effect of depth or glow.
The combination of shadows allows you to diversify the design. Inner shadows do an excellent job of creating pseudo-volumetric objects.
Code used for illustrations.
In most cases, the following html code was used:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="shadow.css"> </head> <body> <div class="box"> </div> </body> </html>
Body container:
body { padding: 10vw; font-family: Helvetica, Sans-serif; font-size: 8vw; color: darkslategray; }
To illustrate the change in the shadows, the parameters of the box block changed, the width, height, background and text alignment parameters in the block remained unchanged:
.box{ width: 50vw; height: 35vw; background-color: rgba(136, 134, 252, 0.2); text-align: center; line-height: 300px; }