There are three ways to create the effect of depth: using lights, shadows, or both.
Let's see how we create box shadows for our containers.
The box-shadow
CSS property creates one or several shadows on an element, and it looks like this:
box-shadow: 10px 10px 13px 5px rgba(0, 0, 0, .5) inset;
The box-shadow
property supports three, four, five, or six values in the same declaration: four length values, one color value, and the keyword inset
.
We use one of the following units when we use the length values: px
, em
, in
, mm
, cm
, vw
, and so on.
The four length values are as follows:
This is the fifth value in the list. It supports all color modes: HEX
, RGB
, RGBa
, HSL
, HSLs
, and color name.
This value is optional. If no color is specified, it's up to the browser to decide which color to use. Some browsers may not even display a shadow at all without a color value.
The color value can go either at the beginning or at the end of the declaration but never between the length values; otherwise, the box-shadow
property won't work.
The sixth value in the list is
inset
. It creates the shadow inside the container, like a background. However, if there is actually a background color or image, the inset
shadow will sit on top of it but under the content without affecting the layout of the child elements of the container.
This value is optional. If this value is not declared, the shadow defaults to displaying the shadow outside the element.
This value can go either at the beginning or at the end of the declaration but never between the length values; otherwise, the box-shadow
property won't work.
CSS:
/*Left 10px, top 10px, blur 13px, spread 5px, RGBa mode, inside the element*/ .element { box-shadow: 10px 10px 13px 5px rgba(0, 0, 0, .5) inset; }
18.188.154.252