The order of recording is fundamentally important. The first value is always the offset along the X axis, the second - along the Y axis.
If an offset is not needed along one of the axes, set it to zero:
Class(box-shadow: 0 8px;) – shift the shadow only along the Y axis
Result
Class(box-shadow: 8px 8px;) – shift along both axes
Result
Negative value for box-shadow axes
The shadow will move in the opposite direction:
Class(box-shadow: -8px 8px;) – shift the shadow with a negative value along the X axis
Result
Shadow Blur Radius
Third property parameter box-shadow. If not specified, the value is 0 and the shadow size is equal to the size of the element it is applied to.
Class(box-shadow: 0 48px 0;) – the shadow duplicates the dimensions of the element to which it is applied
Result
When the value is greater than zero, the edges lose definition, the shadow becomes larger and visually lighter. Blur is applied from all sides:
Class(box-shadow: 0 0 8px;) – no offset, only blur
Result
Class(box-shadow: 0 8px 8px;) – Y-axis offset and blur
Result
A negative value is considered an error and the shadow will not be displayed at all.
Shadow stretch radius
Fourth property parameter box-shadow. Changes the size of the shadow relative to the element. Stretches in all directions:
Class(box-shadow: 0 0 0 8px;) – no displacement or blur, only stretching
Result
IN in this case the shadow is 16 pixels larger than the element in width and height: 8px left + 8px right and 8px top + 8px bottom.
Negative shadow stretch value in CSS
The shadow does not stretch, but narrows on all sides by the specified value:
Class(box-shadow: 0 16px 0 -8px;) – decrease the shadow with a negative value
Result
Shadow color
By default, the shadow color duplicates the font color: as in the examples above.
The shadow color is specified in any available CSS format:
- #ff0009
- rgb(255, 0, 9)
- hsl(358, 100%, 50%);
Give the element a blue shadow:
Class(box-shadow: 0 8px #3a8fe7;)
Result
Inner shadow
Parameter inset displays a shadow inside the block.
Unlike the options listed above, there is no strict writing order. Both options will give the same result:
Box-shadow: 0 8px #3a8fe7 inset; box-shadow: inset 0 8px #3a8fe7;
Result
The second option is easier to understand when reading the code.
Several shadows
Multiple shadows are specified separated by commas. Display order from top to bottom:
Class( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )
Result
If you swap places, the blue shadow will not be visible:
Class( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )
Result
The inner and outer shadow are set at the same time:
Class( box-shadow: 0 16px #3ae7af, inset 0 8px #3a8fe7; )
Result
Rounded shadow
If an element is given the property border-radius, the shadow will have rounded corners.
Class( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )
Result
By setting the stretch of the shadow, we increase its rounding. For example, border-radius is 8px and shadow stretch is 4.
8+4=12px is the rounding radius of the shadow.
Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )
Result
The same principle applies to shrinking the shadow when the value is negative.
8+(-4)=4px - we get a shadow rounding that is twice as small.
If the shadow compression is greater than border-radius, we will get a shadow with right angles. For example, compression is 16px.
8+(-16)=(-8), but fillet cannot have a negative value and zero will be applied.
Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )
Result
CSS property box-shadow Supported by all popular browsers except Opera Mini.
Today we will learn how to make CSS shadows without images. After completing this tutorial, you will no longer need a CSS shadow generator.
What is the main advantage of shadows created with CSS help 3, this is in ease of implementation and reducing the number of requests to the server (since we no longer use images). To make a CSS shadow we need a div tag and a CSS box-shadow property. You won't need any additional markup because we'll create :after and :before pseudo elements that we'll place behind the main object (a div with the class block).
Take a look at the HTML code for which we will create a CSS3 shadow:
Content
Next, you can see ready-made examples and the code required to implement them. In order to minimize the text on the page, we will omit CSS properties with browser prefixes. Full code You can see it by clicking on the “Example” link corresponding to the example.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px ; width:50%; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after ( right :10px; left:auto; transform:rotate(3deg); )
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after ( content:""; position:absolute ; z-index:-2; bottom:12px; left:10px; width:50%; height:55%; max-width:200px; box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); transform:skew(-8deg) rotate(-3deg); ) .block:after ( right:10px; left:auto; transform:skew(8deg) rotate(3deg); )
Using a shadow you can give a block perspective. See example.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( left:80px; bottom:5px ; width:50%; height:35%; max-width:200px; box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); transform:skew(50deg); transform-origin:0 100% ; ) .block:after ( display:none; )
CSS shadow for the raised block. See example.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; )
Example CSS3 shadow for a vertically folded block. See example.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; left:0; right:50%; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; left:0; right:0; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )
Example CSS3 shadow for a horizontally folded block. See example.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:50%; bottom: 0px; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; )
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:0px; bottom:0px ; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; )
CSS3 shadow for rotated block. See example.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:none; transform:rotate(-3deg); ) .block > :first-child:before ( content:""; position:absolute; z-index:-1; top:0px; bottom:0; left:0; right:0px; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50% ; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after ( right:10px; left: auto; transform:rotate(3deg); ) Hello, dear readers. Today we will do with you beautiful shadow for blocks using CSS. I think this will be very useful to you, especially if you make templates. And blocks with shadows look very attractive and modern.
Browser support
Basically all modern browsers support shadow effects:
- Internet Explorer 9.0 and higher;
- Firefox 3.5 and higher;
- Chrome 1 and higher;
- Safari 3 and above;
- Opera 10.5 and higher.
I would also like to mention one important point: for some browsers we will use certain prefixes. Used for Firefox -moz-, for Chrome and Safari you need to use the prefix -webkit.
Well, now let's move on to the most interesting part. Let's look at all the shadows separately, there will be 8 effects.
Shadow effect 1
In this example, the shadow of the block is at the bottom.
HTML
Effect 1
CSS
text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*========= ========================= * Effect 1 * ==================== ===========================*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; )Shadow effect 2
In this example, the shadow from the block goes to the left and right, but there is none in the middle. It turns out to be a very interesting effect.
HTML
Effect 2
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================================== * Effect 2 * == ============================================================*/ .effect2 ( position: relative; ) .effect2:before, .effect2:after ( z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max -width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform : rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); ) . effect2:after ( -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) ; right: 10px; left: auto; )Shadow effect 3
Here the shadow from the block is only on the left.
HTML
Effect 3
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================================== * Effect 3 * == ============================================================*/ .effect3 ( position: relative; ) .effect3:before ( z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg ); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); )Shadow effect 4
Shadow on the right.
HTML
Effect 4
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================================== * Effect 4 * == ============================================================*/ .effect4 ( position: relative; ) .effect4:after ( z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max- width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); )Shadow effect 5
In this case, the shadow on both sides has moved downwards more strongly.
HTML
Effect 5
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================================== * Effect 5 * == ============================================================*/ .effect5 ( position: relative; ) .effect5:before, .effect5:after ( z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max -width:300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform : rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); ) . effect5:after ( -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg) ; right: 10px; left: auto; )Shadow effect 6
Here is the effect of curved shadows at the bottom of the block.
HTML
Effect 6
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================================== * Effect 6 * == ============================================================*/ .effect6 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect6:before, .effect6:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50% ; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect6:after ( right:10px; left:auto; -webkit-transform :skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )Shadow effect 7
The same effect is just a shadow below and above the block.
HTML
Effect 7
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================================== * Effect 7 * == ============================================================*/ .effect7 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect7:before, .effect7:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )Shadow effect 8
The effect of curved shadows on the sides of the block.
HTML
Effect 8
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== =========================================================== * Effect 8 * == ============================================================*/ .effect8 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect8:before, .effect8:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )That's all, dear friends. If you don’t understand anything, be sure to ask in the comments. See you soon.
With the advent of the standard CSS 3 introduced the box-shadow property, which has become widely used among web developers, as it makes it easy to add one or more shadows to an element's box to give the desired visual effect.
In the previous article, we looked at the border-radius property; using it, you can get a shadow with rounded corners. By analogy with a text shadow (text-shadow), you can create multiple shadows, they are applied according to z-axis front to back (with the first given shadow on top).
Let's take a closer look at the syntax of this modern property:
Let us consider in order the possible values of this property:
| Meaning | Description |
|---|---|
| none | The shadow is not displayed. This is the default value. |
| inset | Optional value. If this value is not specified (the default), the shadow will be on the outside of the element and will create the effect of the element being bulged. If the keyword (value) inset is present, the shadow will fall inside the element and create a dented effect. In other words, it is a change from an outer shadow to an inner one. |
| h-shadow | Required value. Sets the location of the horizontal shadow. Negative values are allowed. |
| v-shadow | Required value. Sets the location of the vertical shadow. Negative values are allowed. |
| blur-radius | Optional value. Sets the blur radius. The higher the value, the greater the blur, making the shadow larger and lighter. If the value is not specified, the value will be 0 (sharp - distinct shadows). Negative values are not allowed. |
| spread-radius | Optional value. Shadow size (shadow stretch radius). With positive values the shadow will expand, and with negative values it will shrink. If no value is specified, the value will be 0 (the shadow corresponds to the size of the element). |
| color | Optional value. Defines the color of the shadow (HEX, RGB, RGBA, HSL, HSLA, "Predefined colors"). The default value is black. |
The main points you need to understand to create shadows for elements are:
I would like to draw your attention to the fact that the box-shadow property is currently supported by all modern browsers:
| Property | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
If you want to expand support for some browsers, including mobile iOS 3.2 - 4.3 And Android 2.1 - 3, then it is recommended to use manufacturer prefixes and use the following syntax (in the examples in the article, the syntax will only be used for modern browsers):
-webkit-box-shadow : value ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 and Android 2.1 - 3 */-moz-box-shadow : value ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* table above */Let's move on to practice and start with simple example, in which we add one shadow to the elements:
The result of our example:
Using Multiple Shadows
In the following example, I propose to consider the interesting color mixing effect that can be achieved when using multiple shadows:
- Two blocks of fixed width and height (15em and 10em), added padding on all sides (2em) and set the blocks to be block-line to be able to line them up.
- For first block with class .test we indicated four shadows with different horizontal and vertical shadow values so that the element has different shadows on all sides. The blur radius for all shadows was set to the same. The color of each shadow is different and is specified using predefined colors.
- For second block with class .test2 we indicated four shadows with different horizontal and vertical shadow values. The blur radius for all shadows was set to the same, while the shadow stretch was set to negative, which led to a decrease in the shadow itself. The color of each shadow is different and is specified using the RGBA system.
The result of our example:
Using shadows for images
The final example of this article will focus on using shadows for images. I would like to immediately draw your attention to the fact that directly indicate the shadow for HTML element It won’t work, but we have the opportunity to specify an image as the background for the element we are interested in, and then assign the shadow we need to this element.
We will look at working with background images in detail in the textbook article "", and now, to put an end to the study of using shadows, we will touch on it superficially and use the image as a background to an element in the following example:
- Two blocks of fixed width and height (237px and 232px), added margins for all sides (2em) and set the blocks to be block-line to be able to line them up. We set the block size of 237px by 232px to the size of the image, so that at this stage of training we did not have to scale the image to fit the element and affect those CSS properties that are planned to be studied at a later stage (in the textbook article " ").
- For first block with class .test We specified a zero value for the horizontal and vertical shadow, but at the same time we specified a blur radius of 50px and expanded it by setting a stretch radius of 10px. The shadow color was indicated with a predefined color (violet). In addition, we indicated in the advertisement keyword inset , which causes the shadow to fall inside the element. In other words, we have created an inner shadow of the element.
- For second block with class .test2 We specified a zero value for the horizontal and vertical shadow, but at the same time we specified a blur radius of 50px and expanded it by setting a stretch radius of 10px. The shadow color is specified in RGBA mode.
The result of our example:
Rice. 98 Example of using shadows for images in CSS (box-shadow property)
Questions and tasks on the topic
Before moving on to the next topic, complete the practice assignment:
If you have difficulty completing the practice task, you can always open the example in a separate window and inspect the page to understand what CSS code was used.
2016-2020 Denis Bolshakov, you can send comments and suggestions on the site to [email protected]
A shadow under a block element on a page is usually used to create a three-dimensional effect, to draw attention to the element, or as part of a design. A small shadow under the elements also gives the page volume and depth.
To add a shadow, use the box-shadow property, which has six values, only two of which are required. In Fig. Figure 1 shows the box-shadow property with all possible values, numbered to identify them.
Rice. 1. Box-shadow property values
- the inset keyword sets the shadow inside the element;
- shift the shadow horizontally (5px - right, -5px - left);
- vertical shift (5px - down, -5px - up);
- shadow blur radius (0 - sharp shadow);
- shadow stretch (5px - stretch, -5px - shrink);
- shadow color.
It is necessary to specify only the horizontal and vertical shift; all other parameters will be taken by default. In this case, the shadow will be sharp without blur or black.
By combining different parameters and their values, you can get a wide variety of types of shadows. In table 1 shows the code and the result it leads to.
| Code | Result | Description |
|---|---|---|
| box-shadow: 5px 5px; | Sharp shadow on the right and below. | |
| box-shadow: -5px -5px; | Sharp shadow on the left and above. | |
| box-shadow: 0 0 5px; | Blurred shadow around an element. | |
| box-shadow: 0 0 5px 2px; | Expand the shadow by 2 pixels. | |
| box-shadow: 0 0 5px 2px red; | Red glow around the element. | |
| box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); | Translucent shadow. | |
| box-shadow: inset 0 0 6px; | Shadow inside. |
As can be seen from the table, the shadow shift does not have to be specified in pixels, although this is convenient. The shadow color can be specified in any available format, so for obtaining a translucent shadow it is suitable RGBA format, such a shadow will look good against any background. Example 1 shows how to do this.
Example 1: Shadow on a background picture
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Do not go against enemy banners when they are in perfect order; do not attack the enemy’s camp when it is impregnable; this is change management.
Sun Tzu, trans. Nikolai Konrad
The result of this example is shown in Fig. 2. The shadow follows the rounding of the corners of the block.
Rice. 2. Appearance of shadow on the background picture
When adding a "wide" shadow, be aware that it may extend beyond the visible borders of the browser window and thus result in a horizontal scrollbar appearing.
Shadows can also be added to pseudo-elements; this is sometimes required for complex layouts. In Fig. Figure 3 shows a header block with a shadow added to it. To avoid any lines at the junction, you have to use the ::after pseudo-element and add a shadow to it.
Rice. 3. Block with shadow
Example 2 shows the creation of such a block.
Example 2. Block with shadow
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Heading
An element can have more than one shadow, but several at once; their parameters are listed separated by commas in the value of the box-shadow property. Example 3 shows how to add a double shadow to all images.
Example 2. Block with shadow
HTML5 CSS3 IE 9+ Cr Op Sa Fx
The result of this example is shown in Fig. 4.
Rice. 4. Double Shadow Image
The first shadow is displayed to the left of the image with a blur radius of 20px, its size reduced by the fourth parameter (-20px). The parameters of the second shadow are indicated after the decimal point; the shadow is displayed to the right of the picture and is also reduced for symmetry.