Css block glow. Inner Shadows in CSS
Description
Adds a shadow to an element. It is possible to use several shadows, indicating their parameters separated by commas; when applying shadows, the first shadow in the list will be higher, the last one lower. If a fillet radius is specified for an element through border-radius property, then the shadow will also have rounded corners. Adding a shadow increases the width of the element, so it may appear horizontal stripe scrolling in the browser.
Syntax
box-shadow: none |<тень> [,<тень>]*
Where<тень>:
inset<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
Values
none Cancels adding a shadow. inset The shadow is drawn inside the element. Optional parameter. x offset The horizontal offset of the shadow relative to the element. A positive value of this parameter shifts the shadow to the right, a negative value shifts it to the left. Required parameter. y offset The vertical offset of the shadow relative to the element. A positive value shifts the shadow down, a negative value shifts it up. Required parameter. blur Sets the blur radius of the shadow. The higher this value, the more the shadow is smoothed out, becoming wider and lighter. If this parameter is not specified, the default is set to 0, which will make the shadow sharp rather than blurry. stretch A positive value stretches the shadow, a negative value, on the contrary, compresses it. If this parameter is not specified, the default is 0, which will cause the shadow to be the same size as the element. color The color of the shadow in any available CSS format, the default shadow is black. Optional parameter.It is possible to specify several shadows, separating their parameters with a comma. The following order is taken into account: the first shadow in the list is placed at the very top, the last in the list is at the very bottom.
HTML5 CSS3 IE Cr Op Sa Fx
The result of the example is shown in Fig. 1.
Rice. 1. Shadow view in Safari browser
Browsers
Safari up to version 5.1, Chrome up to version 10.0, Android up to version 4.0 and iOS Safari up to version 5.0 support the -webkit-box-shadow property.
Firefox before version 4.0 supports the -moz-box-shadow property.
Internet Explorer prior to version 9.0 does not support the box-shadow property; instead, you can use the non-standard filter property:
Filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Here: offX - horizontal shadow offset; offY — vertical shadow offset; color — shadow color.
Applying the dropshadow filter produces a clear, sharp shadow, so you can use the shadow filter for a blur effect.
Filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);
Here: direction — shadow direction angle from 0 to 360°; color — shadow color; strength — shadow offset in pixels.
The box-shadow CSS property adds one or more shadows to an element. To specify multiple shadows, you must add additional shadow value(s), separated by commas.
Browser support
| 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 |
CSS syntax:
box-shadow: "none| inset h-shadow v-shadow blur-radius spread-radius color | initial | inherit";JavaScript syntax:
Object.style.boxShadow = "10px 5px 5px red"
Property values
| 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. In the presence of keyword(values) inset , 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. |
| Sets the property to its default value. | |
| Indicates that the value is inherited from the parent element. |
CSS version
CSS3Inherited
No.Animable
Yes.Usage example
Same as Update 3, but with modern css rules(= less) so that no special positioning is required on the pseudo-element.
#box ( background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); ) .box-shadow:after ( content:""; position:absolute; width:100%; bottom:1px; z-index:-1; transform:scale(.9); box-shadow: 0px 0px 8px 2px #000000; )
UPDATE 3
#box ( background-color: #3D6AA2; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; ) .box- shadow:after ( content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; )
UPDATE 2
Apparently you can only do this with the optional CSS box tag option, as everyone else just specified. Here's the demo:
Webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;
It would be the best solution. Additional parameter which is added is described as:
The fourth length is the spread distance. Positive values cause the shadow shape to expand in direction along the specified radius. Negative values cause the shadow shape to agree.
UPDATE
What I did was create a "shadow element" that would hide behind the actual element you would like to have in the shadow. I made the width of the "shadow element" exactly less wide than the actual element, 2 times the specified shadow; then I aligned it correctly.
#wrapper ( width: 84px; position: relative; ) #element ( background-color: #3D668F; height: 54px; width: 100%; position: relative; z-index: 10; ) #shadow ( background-color: # 3D668F; height: 8px; width: 80px; margin-left: -40px; position: absolute; bottom: 0px; left: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px #000000; - moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; )
Original answer
Yes, you can do this with the same syntax you provided. The first value controls horizontal positioning, and the second value controls vertical positioning. So just set the first value to 0px and the second to whatever offset you would like to make as follows.
Regular shadows are easy to implement using box-shadow or text-shadow. But what if you need to make internal shadows? This article describes how to make these shadows with just a few lines of code.
Syntax
First, let's look at the two main ways to implement shadows in CSS.
box-shadow
Design box-shadow contains several different meanings:
Horizontal offset And vertical offset— horizontal and vertical displacement, respectively. These values indicate which direction the object will cast its shadow:
Blur radius And spread radius a little more complicated. What's the difference? Let's look at an example with two elements, where the values blur radius differ:
The edge of the shadow is simply blurred. At different meaning spread radius we see the following:
In this case, we see that the shadow is scattered over a large area. If you do not specify a value blur radius And spread radius, then they will be equal to 0.
text-shadow
The syntax is very similar to box-shadow:
The meanings are similar, but not spread-shadow. Usage example:
Inset in box-shadow
To “flip” the shadow inside the object, you need to add inset in CSS:
Once you understand the basic box-shadow syntax, it's very easy to understand how to implement inner shadows. The values are still the same, you can add color (RGB in hex):
Color in RGB format, the alpha value is responsible for the transparency of the shadow:
Images with shadows
Adding an inner shadow to an image is a little more difficult than adding a regular shadow div. To begin with, here is the usual image code:
It is logical to assume that you can add a shadow like this:
Img (
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}
But the shadow is not visible:
There are several ways to solve this problem, each of which has its pros and cons. Let's look at two of them. The first is to wrap the image in a regular div:
Div(
height: 200px;
width: 400px;
}
img(
height: 200px;
width: 400px;
position: relative;
z-index: -2;
}
Everything works, but you have to add a little extra HTML markup and CSS. The second way is to set the image as the background the desired block:
Div(
height: 200px;
width: 400px;
background: url(http://lorempixum.com/400/200/transport/2);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}
This is what can happen when using inner shadows:
Inset to text-shadow
To implement an inner text shadow, simply add to the code inset does not work:
To solve, first apply to the header h1 Set a dark background and a light shadow:
H1 (
background-color: #565656;
color: transparent;
}
Here's what happens:
Adding a secret ingredient background-clip which cuts off anything that extends beyond the text (to a dark background):
H1 (
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip:text;
-moz-background-clip: text;
background-clip: text;
}
It turned out almost exactly what we needed. Now we just darken the text a little (alpha), and that’s it.
Regular shadows are easy to implement using box-shadow or text-shadow. But what if you need to make internal shadows? This article describes how to make these shadows with just a few lines of code.
Syntax
First, let's look at the two main ways to implement shadows in CSS.box-shadow
Design box-shadow contains several different meanings:
Horizontal offset And vertical offset- horizontal and vertical displacement, respectively. These values indicate which direction the object will cast its shadow:
Blur radius And spread radius a little more complicated. What's the difference? Let's look at an example with two elements, where the values blur radius differ:
The edge of the shadow is simply blurred. With different values spread radius we see the following:
In this case, we see that the shadow is scattered over a large area. If you do not specify a value blur radius And spread radius, then they will be equal to 0.
text-shadow
The syntax is very similar to box-shadow:
The meanings are similar, but not spread-shadow. Usage example:
Inset in box-shadow
To “flip” the shadow inside the object, you need to add inset in CSS:
Once you understand the basic box-shadow syntax, it's very easy to understand how to implement inner shadows. The values are still the same, you can add color (RGB in hex):
The color is in RGB format, the alpha value is responsible for the transparency of the shadow:
Images with shadows
Adding an inner shadow to an image is a little more difficult than adding a regular shadow div. To begin with, here is the usual image code: 
It is logical to assume that you can add a shadow like this:
Img ( box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )
But the shadow is not visible:
There are several ways to solve this problem, each of which has its pros and cons. Let's look at two of them. The first is to wrap the image in a regular div:
Div ( height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img ( height: 200px; width: 400px; position: relative; z-index: -2 ; )
Everything works, but we have to add a little extra HTML and CSS markup. The second way is to set the image as the background of the desired block:
Div ( height: 200px; width: 400px; background: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )
This is what can happen when using inner shadows:
Inset to text-shadow
To implement an inner text shadow, simply add to the code inset does not work:
To solve, first apply to the header h1 Set a dark background and a light shadow:
H1 ( background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); )
Here's what happens:
Adding a secret ingredient background-clip which cuts off anything that extends beyond the text (to a dark background):
H1 ( background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ; )
It turned out almost exactly what we needed. Now we just darken the text a little (alpha), and the result is:
