Use pure CSS to achieve rolling shadow effect

Time:2021-11-30

To get straight to the point, there is a very common situation for some scrollable elements. Usually, when scrolling, a shadow will be added to the side perpendicular to the scrolling to indicate that an element has been scrolled out of the visual area, similar to this:

You can see that a shadow will appear during scrolling:

For the problem that the columns on both sides are stationary and adsorbed on the boundary in the process of rolling, CSS is usually usedposition: stickyCan be solved.

However, for the shadows that only appear during the rolling process (if the contents in the rolling container are not pasted, the shadows appear, and the shadows disappear), the previous practice has always been completed with the help of JS.

So, is there a solution that pure CSS can implement? Hey, hey, yeah. There is a very clever cover up. Let’s unveil it step by step.

magicalbackground-attachment

To use pure CSS to realize the above rolling shadows, the core element to be used isbackground-attachment

In an earlier article–CSS to achieve parallax effect, detailed introductionbackground-attachment, with the help ofbackground-attachment: fixedIt can simply realize the scrolling parallax of the website or the water texture effect of clicking on similar pictures, such as:

Of course, our protagonist today is notbackground-attachment: fixed, butbackground-attachment: srcoll

background-attachment: srcoll

First, let’s introducebackground-attachment, if specifiedbackground-image, thenbackground-attachmentDetermines whether the background is fixed in the viewport or scrolls with the block containing it.

In short, it determines how the background pattern moves in a scrollable container. Through two simple demos, understandbackground-attachment: srcollandbackground-attachment: local

background-attachment: local, which is consistent with the usage in our daily use. The background pattern of the scrollable container rolls with the container:

background-attachment: scroll, this is today’s protagonist. It shows that the background is fixed relative to the element itself, rather than rolling with its content:

If you haven’t figured out the difference between them, you can poke the demo below to feel it for yourself:

CodePen Demo — bg-attachment Demo

srcollAndlocalUse at the same time to realize the blindfold method

Here, many students may still be ignorant. What are we going to do? What does this have to do with rolling shadows in this article?

Don’t worry. The difficulty of rolling shadows is that there is no shadow when there is no rolling at the beginning. Only when you start rolling, the shadow will appear.

So here, we usebackground-attachment: srcollandbackground-attachment: localFor the two attributes, at the beginning of scrolling, two layers of background are superimposed to hide the shadow background. When scrolling, the superimposed part is removed and only the shadow part is left out.

Huh? what do you mean. Let’s add two gradient effects to the scroll container and apply them respectivelybackground-attachment: srcollandbackground-attachment: local, and then add it up, like this:

<!--  Scrollable container -- >
<ul>
    <li>...</li>
    ...
    <li>...</li>
</ul>
//Scenario 1:
.g-one {
    background: linear-gradient(#fff, #f00);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local;
}
 
//Scenario 2:
.g-two {
    background: radial-gradient(at 50% 0, #000, #0f0 70%);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
 
//Scenario 3:
.g-combine {
    background:
        linear-gradient(#fff, #f00),
        radial-gradient(at 50% 0%, #000, #0f0 70%);
    background-size: 100% 10px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

The actual effect is that one background rolls with the container and the other is fixed with the container. The background that rolls with the container acts as the initial mask layer:

OK, you can see the big picture. When scrolling, the last picture is superimposed. In fact, we need to show the effects of different colors (shadows) when scrolling. Let’s adjust the color of the two gradients, the mask layer(background-attachment: local)For white, and then put the fixed shadow layer(background-attachment: scroll), use radial gradient simulation to give us the shadow color we want.

The CSS code is like this:


.g-final {
    background:
        linear-gradient(#fff, transparent 100%),
        linear-gradient(rgba(0, 0, 0, .5), transparent 100%);
    background-size: 100% 30px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

utilizelinear-gradient(rgba(0, 0, 0, .5), transparent 100%)The linear gradient simulates a gray shadow:

OK, it’s done. All the above demos can be viewed here:

CodePen Demo — Pure CSS Scroll shadow

As shown at the beginning of the article, this technique can also be directly applied totableInside:

CodePen Demo — Pure CSS Table scroll shadow

Some problems cascade order

Of course, in the above process, there has always been a problem because of the use backgroundbackgroundIn fact, the final effect of the simulated shadow is the shadow (above the background), but the actual effect is not very different. If you can tolerate this, this scheme is completely available.

compatibility

Well, of course, another problem isbackground-attachmentCompatibility issues. Let’s seeCAN I USE

The notes below can I use show that most compatibility problems are actually caused bybackground-attachment: fixed, it has little effect on the effect of this paper.

last

The skills of this article are not original. I saw this article for the first time:Explore the practical value of CSS attribute * – gradient, whether it can be used in practice is further explored.

This is the end of this article on using pure CSS to realize rolling shadow effect. For more relevant CSS to realize rolling shadow, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!