Box-shadow is one of the more common properties used to add inner and outer shadows to an element to give it a visual sense of layer/dimension. Simple attributes but rich performance ability, still don’t learn quickly?

Working, beautiful UI little sister mentioned a “light quasi-object style”, CV engineers have not seen such advanced vocabulary, so to UI little sister for advice, in-depth learning some!

First, basic grammar

A box shadow is described by X and Y offsets relative to the element, blur and spread radius, And color. — Box-Shadow MDN

From the description of box-shadow in MDN, it is believed that the usual box-shadow attribute is the offset of the shadow effect on the X&Y axis, followed by the blur radius, the diffusion radius and the shadow color.

The syntax:

General * / / *
box-shadow: x-offset y-offset blur-radius spread-radius color;

/* Set the value of inner shadow diffusion: inset. The default value is external: outset */
box-shadow: x-offset y-offset blur-radius spread-radius [inset] color;
Copy the code

These long values are not easy to remember, and Chrome’s “Shadow Panel Selector” gives you an intuitive feel for them:

Basic usage examples:

Two, light quasi Style

2.1 What is light quasi?

Light quasi object is a new concept put forward by UI designers. Light quasi object is a three-dimensional, conceptual, idealized expression that is easy to identify visual effects. — “Light Quasi Design Analysis & Case Demonstration”

Light quasi object is a “light” word, which is different from complete quasi object. It is a light visual expression approaching the real object.

There is no doubt that the light imitation style conveys more visual information to users. In strong interactive scenes such as games, it has richer visual expression ability, which will greatly improve users’ product use experience.

It’s better to see than to hear. For example, the virtual keyboard in the following image is designed with light simulators, and the combination of light and shadow makes the performance more texture-like:

2.2 How does the Front-end Perform?

Light and shadow is a necessary element to achieve light objects, which will make the elements more texture and more natural. Therefore, it is natural to use box-shadow in CSS as the main attribute to represent the quasi style.

Similar to the virtual keyboard shown above, you can achieve a light, objectlike style of icon navigation.

2.3 Example: a light quasi – object style navigation

The syntax for box-shadow is relatively simple by itself, but it’s better to practice it in order to get started quickly. To this end, simply implement a light analog style of navigation

Here’s a quick look at the two states of a toon

2.3.1 the norm

That’s the status of the icon without any action

Without the shadow attribute, the wechat icon looks like this:

With the shadow attribute:

.container .box .img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  /* Square icon rounded corner radius 20px */
  border-radius: 20px;
  /* The first value is the outer shadow offset by 18px on the X&Y axis, the blur radius is 30px, and the shadow color is black */ with 0.2 opacity
  /* The second value is the outer shadow offset -18px in the X&Y direction, the blur radius is 30px, and the shadow color is white */
  box-shadow: 18px 18px 30px rgba(0.0.0.0.2),
    -18px -18px 30px rgba(255.255.255.1);
  Tricks: use transition to add a slow animation to the process of changing between the two states */
  transition: all 0.2 s ease-in-out;
}
Copy the code

It works like this

Is not an instant with a sense of hierarchy, texture

2.3.2 pressure state

When the icon button is pressed by the mouse, the state is called the press state. In order to fully simulate the physical “press up and down” operation, the combination of the box-shadow property can show the sense of hierarchy and spatial changes to simulate the effect of press up and down

In CSS, an element with a mouse press has a corresponding: Active pseudo-class that is activated. This property can be interpreted as “pressing”.

.container .box .img:active {
  /* The first and second attributes are used in a gradual process based on a normal set of variables */
  /* In the third property, the inner shadow is offset by 18px on the X&Y axis, the blur radius is 30px, and the shadow color is 0.1 opacity black, from top left to bottom right */
  /* In the fourth property, the shadow is offset by -18px on the X&Y axis, the blur radius is 30px, and the shadow color is white from the bottom right to the top left */
  box-shadow: 0 0 0 rgba(0.0.0.0.2),
              0 0 0 rgba(255.255.255.0.8),
              inset 18px 18px 30px rgba(0.0.0.0.1),
              inset -18px -18px 30px rgba(255.255.255.1);
}
Copy the code

The final performance effects are as follows:

Full code and effects are visible: Simulation Style – Codepen

3. Tool recommendation

From the above example, careful readers will see why I used an 18px offset and a 30px blur radius, right? In the actual development process, nice UI little sister will generally give us the design draft, from the design of the attributes will have the corresponding CSS value, basically available.

But what if, as an individual developer, or whatever, you don’t have a nice UI sister to design? Neumorphism is an online web site for box-shadow attribute tuning

Four,

The box-shadow attribute syntax itself isn’t complicated, but it’s surprisingly expressive. Light mock-object is a kind of light and shadow effect on the front element. At present, simple “light and shadow effect” is enough to meet the requirements of the product. If you want to achieve the delicate and silky “light chase effect” like a game, you can try WebGL to achieve it.

From the simple attribute of box-shadow, we can see that modern users are not satisfied with the quality of products and the pursuit of the development of the front-end business. We can also imagine that the performance of the future front-end will be based on the satisfaction of multiple senses. What users see and touch are all “front-end”!

Finally, follow the blogger wechat public number: ITDYBOY, we study together, tea talk front end…