Beautiful css frames with shadow. Inner shadows in CSS. Material design shadow

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 rounding radius is specified for an element via the 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.

brief information

Syntax

Box-shadow: none |<тень> [,<тень>]*

Where<тень>:

inset<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>

Designations

Values

none Cancels adding a shadow. inset The shadow is drawn inside the element.<сдвиг по x>The horizontal offset of the shadow relative to the element. A positive value of this parameter sets the shadow shift to the right, a negative value - to the left.<сдвиг по y>The vertical offset of the shadow relative to the element. A positive value shifts the shadow down, a negative value shifts it up.<размытие>Sets the shadow blur radius. The higher this value, the more the shadow is smoothed out, becoming wider and lighter. If this parameter is not specified, it defaults to 0 and the shadow will be sharp rather than blurry.<растяжение>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.<цвет>Shadow color in any available CSS format, default shadow is black.

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.

Example

The result of the example is shown in Fig. 1.

Rice. 1. Type of shadow

Object model

An object.style.boxShadow

Note

Safari before version 5.1, Chrome before version 10.0, Android before version 4.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 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.

Using the dropshadow filter gives 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.

Specification

Each specification goes through several stages of approval.

• Recommendation - The specification has been approved by the W3C and is recommended as a standard.
• Candidate Recommendation ( Possible recommendation ) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
• Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of a draft that has been discussed and amended for community review.
• Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
• Draft ( Draft specification) - the first draft version of the standard.

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:

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:

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):

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 next example, I propose to consider interesting effect mixing colors, which can be achieved by 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 237px by 232px to the image size so that at this stage training 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-2019 Denis Bolshakov, you can send comments and suggestions on the site to [email protected]

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

box-shadow

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 meanings are similar, but not spread-shadow. Usage example:

Inset in box-shadow

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

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 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 solve, first apply to the header h1 install 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: