3 ways to use box-shadow in CSS

Shadows help to make the visual component of the site interesting and aesthetic. In this post, we’ll take a look at the box-shadow CSS property and how it can be styled.

What is the box-shadow property?

Property box-shadow allows you to add a shadow around an element on a web page. The shadow tells the user whether the element – button, picture – is interactive. Thanks to the shadows, outside the screens of gadgets, we get an idea of ​​the size and depth of the object, and the property box-shadow adds realism to the design of the site.

This is how it usually is box-shadow prescribe:

box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)

The first four values ​​are:

  1. x-offset, defines the horizontal position of the shadow;

  2. y-offset, defines the vertical position of the shadow;

  3. blur radius, which affects the sharpness of the shadow. The higher the value, the less saturated the shadows, and vice versa;

  4. the fourth value determines the spread of the shadow.

All values ​​except blur radius can be negative. If you make a shadow, as described above, it will be at the bottom of the element. But if the values ​​are changed to negative, then the shadow will be on top:

box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5)

If you set the spread to 0 px, the shadow will be the same size as the element. A positive value will make the shadow larger, a negative value will make it smaller.

How to make shadows realistic

The next value in the property is the color. Using colors rgba() with an alpha channel to indicate opacity: this is important for realistic styling, because shadows in well-lit places are not pure black and not too dense. You can observe how the shadows behave in relation to light sources and to the surfaces on which they lie. The darkest shadows fall on the planes that are closest to the object, and further they are blurred. Therefore, the shadow should not look like a black stroke.

Why the dropshadow() filter is not needed

This is a filter that adds a shadow around the image. His work is very different from box-shadow. Here is what the difference looks like in code:

box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);

filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));

box-shadow basics

To practice, create a simple HTML container:

<body>
    <div class=box>
    </div>
</body>

Then CSS:

div{
  height: 150px;
  width: 150px;
  background: #fff;
  border-radius: 20px;
 }
.box{
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); 
}

Here’s what happens:

How to use box-shadow with :hover pseudo-class and transform property

On the box-shadow pseudo class can affect :hover. It adds a shadow to components that didn’t have one, or changes an existing shadow. Here’s what it looks like with the property transform:

.box:hover{
  box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
}

Property transform creates the illusion that the block is rising on the page. Function translate() resizes the window.

Add a keyword insetto place the shadow inside the border of the block or element. So the block will appear to be immersed in the page.

.box2{
  box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.box2:hover{
  transform: translateY(5px);
  box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

You can change the values ​​as much as you like. Here’s what the shadows look like in the examples:

Function alternative translate() will scale(). If a translate() changes the position of the shadow along the x and y axes, scale() increases the block size along the same axes. In the second field add the value scale() in :hover. The block size will increase by 1.1 times.

.box2:hover {
  transform: scale(1.1);
  box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}

Creating layered shadows

Shadows are superimposed on each other if their values ​​are separated by commas. This method helps to create shadows that blend seamlessly into the page. We will see:

box-shadow: 0px 1px 2px rgba(0,0,0,0.1), 
            0px 2px 4px rgba(0,0,0,0.1), 
            0px 4px 8px rgba(0,0,0,0.1), 
            0px 8px 16px rgba(0,0,0,0.1);

The distribution value is not specified – in this case it is not necessary, but no one forbids experiments.

If you set the offset and blur radius to 0 and add a single shadow spread value, a border will be added to the box.

box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5), 
            0px 2px 4px rgba(0,0,0,0.1),
            0px 4px 8px rgba(0,0,0,0.1),
            0px 8px 16px rgba(0,0,0,0.1);

Technically, this border is a shadow, since the box in the parent element takes no space. Here is the result of applying the two methods, notice the smooth and subtle shadow on the left frame:

The property can be used with any element. Works well with cards, input fields, pictures, buttons.

Create neon shadows

In reality, the shadows are usually gray or black, of varying degrees of transparency. To change the color of the shadow, you need to change the light source. On the web, they use instead box-shadow. Let’s try with an example:

.box{
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.7); 
}
.box2{
  box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
}

It turned out:

If the shadows are layered on top of each other, the glow can be made brighter:

box-shadow: 0px 1px 2px 0px rgba(0,255,255,0.7),
            1px 2px 4px 0px rgba(0,255,255,0.7),
            2px 4px 8px 0px rgba(0,255,255,0.7),
            2px 4px 16px 0px rgba(0,255,255,0.7);

Best of all, such shadows look if you make them contrasting colors on a dark background. Brightness can be changed with transparency.

Create neomorphic shadows

A visually interesting effect that mimics real life objects, so 3D at minimum. The first two effects we’ll practice creating involve flat components that float above the page, casting shadows on the background. It seems that before us is a relief image.

box-shadow: -10px -10px 15px rgba(255,255,255,0.5),
            10px 10px 15px rgba(70,70,70,0.12);

The relief can also be directed in depth:

box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), 
           inset 10px 10px 15px rgba(70, 70, 70, 0.12);

Here is the result. The white shadow shows the direction of the “light source” and works like a highlight. Similar to the real world:

Let’s try to make a switch that the user can “click”.

Let’s start with a checkbox.

<body>
    <input type="checkbox" />
</body>

Add CSS:

input[type="checkbox"] {
  height: 200px;
  width: 200px;
  top: 50%;
  left: 50%;
  -webkit-appearance: none;
  box-shadow: 
    -10px -10px 15px rgba(255, 255, 255, 0.5),
    10px 10px 15px rgba(70, 70, 70, 0.12);
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%; /*Makes the circle*/
  border: 20px solid #ececec;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

Adding an icon. In the example, the icon from Font Awesome.

input[type="checkbox"]::after {
  font-family: FontAwesome;
  content: "\f011"; /*ON/OFF icon Unicode*/
  color: #7a7a7a;
  font-size: 70px;
}

Set the properties that are displayed when the button is clicked. Add box-shadow inside the circle to create two nested layers.

input[type="checkbox"]:checked{
  box-shadow: 
  -10px -10px 15px rgba(255, 255, 255, 0.5),
  10px 10px 15px rgba(70, 70, 70, 0.12),
  inset -10px -10px 15px rgba(255, 255, 255, 0.5),
  inset 10px 10px 15px rgba(70, 70, 70, 0.12);
}

Set icon color after click.

input[type="checkbox"]:checked::after{
  color: #15e38a;
}

Outcome:

Browser box-shadow support

Unfortunately, Not all browsers, especially in earlier versions, support box-shadow. So you need to use the extension webkit.

-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);/*For webkit browsers*/

-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);/*For Firefox*/

box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

For example, for correct display in Chrome from version 4 to version 9, you need a prefix -webkit-. Mozilla Firefox in versions 2 and 3 the property is not supported and is partially supported in versions 3.5 and 3.6 (with the prefix -moz-). Safari partially supports the property in versions 3.1 and 4 with the prefix -webkit-. Opera supports all versions except 10.1 And Microsoft Edge is doing well.

If the browser doesn’t support shadows, they simply don’t show up and don’t affect the layout.

Hints

Shadows are great, but if you use them incorrectly, you can mess up the whole project. Here are some tips to keep in mind when styling shadows:

  • Less is better. When shadows are applied, the browser does more work. For modern devices, this is not a problem, but if you are doing a project for an audience with potentially old devices or poor Internet, do not overdo it.

  • We need logic. No need to make the shadows unsystematic. This assumes you have lights that affect objects on the page. Therefore, there will be logic in the location of the shadows.

  • Without animation. If you animate the box-shadow, performance will drop. And animated shadows are too much.

  • Use the shading tools. If you are too lazy to write a lot of lines of code, but you want multilayer shadows, try shadows.brumm.af. It adds up to 10 layers of box-shadow to the object and saves time by not manually entering multiple values.

Similar Posts

Leave a Reply