This is the 28th day of my participation in the August Challenge

Creation is not easy, click a “like” and then watch!

Follow the column to get you into the depths of the CSS world

preface

Xue Y ǐ Zhi Yong

Xue yǐ zhi yong, a Chinese idiom, pinyin is xue yǐ zhi yong, meaning to learn for practical use. From “Running Water to the Source.”

Learning a programming language is not just about learning its syntax, but about applying it to specific situations. Only in this way can we better from entry to mastery.

For CSS, due to the particularity of CSS, its learning can not be limited to the eye, but to the real DOM to better understand the specific value of specific properties.

In the previous article, we learned how to use box-shadow. Today we will use this property to write a small example of an accordion hovering effect.

Before we start, let’s briefly recall the use of box-shadow.

box-shadow:offset-x offset-y blur spread color position;

X-offset Indicates the position on the X-axis. Positive values move the shadow to the right, negative values move the shadow to the left. (Required)

Y-offset Indicates the position on the Y-axis. A positive value moves the shadow to the bottom and a negative value moves the shadow to the top. (Required)

How much blur should there be. The higher the value, the softer the shadow. By default, this value is set to 0px, indicating no blurring. (Optional)

Spread specifies the spread size of the shadow, and the larger the value, the more it increases. (Optional)

Color What color the shadow should have. The default value is text color. (optional)

Inset The position of the shadow. By default, the shadow is outside the box. Set the illustration to move it inside. (Optional)

Use Variables to define colors

Why variables are considered:

1. Because the same color can be used multiple times

2. Because I have learned CSS before, here is to learn to apply.

Here for clarity we define :root: red orange yellow green blue background white

--background:#fff;
--red: #e74c3c;
--orange: #ff9c55;
--yellow:#f1c40f;
--green: #1fc11b;
--blue: #22d2a0;
Copy the code

Here’s a concrete start:

Create a card

Create a div

<div class="card">
  <p< p style = "max-width: 100%; clear: bothp>
</div>
Copy the code

Here I put a border around it.

border: 3px solid var(--red);
Copy the code

Add the shadow

The final result looks like this. It looks like four shadows have been added, but think about it carefully. Is only four enough?

Let’s take a look at just four shadows:

box-shadow: 10px -10px var(--orange), 20px -20px var(yellow), and30px -30px var(--green), 40px -40px var(--blue);
Copy the code

As you can see, there is no white space between the shadows, so we need 8 shadows for the whole inside and outside.

We added a white shadow between each shadow and used the spread property to roll back the shadows by 3px so that it looks like there are four 3px shadows!

 box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--orange),
          20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
          30px -30px 0 -3px var(--background), 30px -30px var(--green),
          40px -40px 0 -3px var(--background), 40px -40px var(--blue);
Copy the code

Add hover effect

Hover when we need to do is what, is not need to take back all shadows. How do I take it back? It’s easy. I’m just going to remove all the shadows. And for the continuity of the animation, we use

The transition: box - 1 s shadow;Copy the code

Then someone will think about it: Just remove the box.

 .card:hover {
  box-shadow:none;
}
Copy the code
    transition: box-shadow 1s, top 1s, left 1s;
Copy the code

Take a look at the image below to see if the shadow is getting lighter as it is recycled. It doesn’t fit the accordion.

So here we’re basically just going to set the offset to 0.

box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--orange),0 0 0 -3px var(--background), 0 0 0 0 var(--yellow),
0 0 0 -3px var(--background), 0 0 0 0 var(--green),
0 0 0 -3px var(--background), 0 0 0 0 var(--blue);
Copy the code

Here we can see that the shadow of the accordion was always there when it was recycled. And it’s going to recycle into the red, and if we want to recycle into the blue, you can think about it, and we’ll give you the answer at the end of the paper.

To recycle

transition: box-shadow 1s, top 1s, left 1s;
position: relative;
top: 0;
left: 0;

Copy the code
.card:hover {
  top: -40px;
  left: 40px;
}
Copy the code

The complete code

Due to the restrictions of participating in more text activities, only pictures can be!!