In front-end development, box-shadow is often used as a means of “adding special effects” to make a box look three-dimensional. Today we’re going to take a look at some of the basic and unique uses of box-shadow.

Let’s get the definition out of the way

How does MDN describe box-shadow

The box-shadow attribute is used to add a shadow effect to the frame of an element. You can set multiple shadow effects on the same element and separate them with commas. The values you can set for this property include the X-axis offset, Y-axis offset, blur radius, spread radius, and color of the shadow.

/* Projection inward (optional, default outward) X offset Y offset Blur range (optional) Diffusion range (optional) Color (optional) */
box-shadow: [inset] <offset-x> <offset-y> [<blur-radius> = 0] [<spread-radius> = 0] [<color>]
Copy the code

Here, offset-x, offset-y, blur-radius, and spread-radius are all CSS length values. Blur -radius cannot be negative. Box-shadow defaults to None, a non-inherited property.

A point easily overlooked or prone to error

  1. When given two, three, or four CSS length values:
    • If only two values are given, they will be treated as<offset-x><offset-y>To explain.
    • If a third value is given, the third value will be treated as<blur-radius>Explanation.
    • If a fourth value is given, the fourth value will be treated as<spread-radius>To explain.
  2. The position of the inner projection: inside the border (even if it is transparent), above the background, above the inner margin, below the content.
  3. Position of external projection: under background, above margin.
  4. When setting multiple groupsbox-shadowValue, the given value is stacked in the upper layer and the given value is inserted in the lower layer.

usage

Create a projection outward to increase the hanging effect

Card suspension

<div class="card card1"></div>

<style>
.card {
  background: #fff;
  border-radius: 2px;
  height: 300px;
  width: 300px;
  margin: 1rem;
  position: relative;
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0.0.0.0.12), 0 1px 2px rgba(0.0.0.0.24);
  transition: all 0.3 s cubic-bezier(.25.8.25.1);
}
.card-1:hover {
  box-shadow: 0 14px 28px rgba(0.0.0.0.25), 0 10px 10px rgba(0.0.0.0.22);
}
</style>
Copy the code

3 d card

<div class="card"></div>

<style>
.card {
  padding: 30px;
  background: white;
  border-radius: 5px;
  width: 400px;
  height: 200px;
  margin: auto;
  box-shadow: 0 0 5px rgba(0.0.0.1);
  position: relative;
}
.card:after {
  content:"";
  position: absolute;
  width: 100%;
  height: 10px;
  border-radius: 50%;
  left:0;
  bottom: -50px;
  box-shadow: 0 30px 20px rgba(0.0.0.3);    
}
</style>
Copy the code

button

<a class="button"><span>Click Me!</span></a>

<style>
.button {
  display: inline-block;
  color: #eff6ec;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 8px 0 #004d2f.0 10px 15px rgba(0.0.0.35);
  transition: box-shadow 0.2 s ease-in-out;
}
.button span {
  display: inline-block;
  font-size: 2em;
  font-family: arial;
  padding:.625em 1em;
  background: # 008752;
  background-image: linear-gradient(# 008752.# 007849);
  border-top: 1px solid rgba(255.255.255.2);   
  border-bottom: 1px solid rgba(0.0.0.2);
  border-radius: 8px;
  transition: transform 0.2 s ease-in-out; 
}
.button:active {
  box-shadow: 0 8px 0 #004d2f.0 7px 10px rgba(0.0.0.25);
}
.button:active span {
  transform: translateY(4px);
}
</style>
Copy the code

halo

<span class="pulse"></span>

<style>
.pulse {
  margin:100px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204.169.44.0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(204.169.44.0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(204.169.44.0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(204.169.44.0); }}</style>
Copy the code

The external projection can be summarized as follows

  1. In situ projection (without x, Y offset), combined with blur, most of the halo effect, ring effect
  2. Offset projection + blur, most can be constructed three-dimensional effect, suspension effect
  3. Offset projection + no blur (solid color projection), most can create a strong parallax effect

Create a projection inward to increase the collapse effect

The scroll bar

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

<style>
#style-1::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0.0.0.0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0.0.0.3);
	background-color: # 555;
}
.scrollbar {
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
}
.force-overflow {
	min-height: 450px;
}
</style>
Copy the code

Button group, toolbar

<div class="toolbar">
  <div class="btn"></div>
  <div class="btn inset"></div>
  <div class="btn"></div>
</div>

<style>
.toolbar {
  display: flex;
}
.btn {
  width: 60px;
  height: 60px;
  background: #fff;
}
.btn.inset {
  border: 1px solid rgba(0.0.0.2);
  border-bottom: 1px solid rgba(0.0.0.1);
  box-shadow: inset 0 1px 6px rgba(0.0.0.3);
}
</style>
Copy the code

One of the best examples of interior and exterior projection is the popular Neumorphism mimicry: the use of light and shadow to represent spatial relationships on a plane.

Here is the playground, and you can dynamically adjust the parameters to feel the magic of box-shadow combined with background color.

Copy the shapes

The ability to set multiple sets of values is arguably the most interesting use of box-shadow. Since the projected shape is based on the box shape, in other words, setting multiple sets of values means copying the shape, and the result of copying is always a single box (element).

In theory, there is no limit to how many groups you can set, which is why box-shadow is used for drawing, because digital images are essentially colored squares. But a large number of values can be disastrous for a browser, so don’t use box-shadow for Mona Lisa.

Because box-shadow can be copied and stacked, several copies of the same pattern can be combined to create a vivid pattern.

The clouds

<div class="cloud"></div>

<style>
  .cloud {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
      65px -15px 0 -5px #fff.25px -25px #fff.30px 10px #fff.60px 15px 0 -10px #fff.85px 5px 0 -5px #fff.35px -35px #c8c8c8.66px -27px 0 -5px #c8c8c8.91px -10px 0 -8px #c8c8c8;
  }
</style>
Copy the code

The colours of the rainbow

<div class="rainbow"></div><style>  .rainbow {    transform: translate(-50%, -50%) rotate(45deg);    width: 70px;    height: 70px;    border-radius: 100px 0 0 0;    box-shadow:       -2px -2px 0 1px #F44336,      -4px -4px 0 3px#FF9800,      -6px -6px 0 5px#FFEB3B,      -8px -8px 0 7px#8BC34A,      -10px -10px 0 9px#00BCD4,      -12px -12px 0 11px#2196F3,      -14px -14px 0 13px rgb(126.124.126);  }</style>
Copy the code

In the future, there will be more patterns made up of basic graphics, so consider whether you can implement them in box-shadow before deciding to use SVG or other resources.

conclusion

The core ideas of box-shadow usage can be divided into the above three categories. Although the creative idea is very simple, what really needs more writing and feeling is the setting of box-shadow value, just like mastering the color ratio and the weight of ink in the painting process requires accumulated experience.