Author: | afeiship |
---|---|
Views Total: | 6,727 views |
Official Page: | Go to website |
Last Update: | August 14, 2022 |
License: | MIT |
Preview:

Description:
A pure CSS implementation of the drop-shadow effect, which appears below a header navigation bar when we start to scroll the page.
How to use it:
1. Code the HTML for the header navigation.
<header class="wsui-shadow-on-scroll"> <div class="is-toolbar"> <h3>Header</h3> </div> </header>
2. Make the header navigation sticky and apply a drop-shadow effect to it when scrolling down the page.
/*wsui-shadow-on-scroll Start*/ .wsui-shadow-on-scroll { height: 80px; position: sticky; top: -16px; z-index: 1; -webkit-backface-visibility: hidden; /* PSEUDO ELEMENTS to create drop-shadow */ /* SHADOW */ /* COVER */ } .wsui-shadow-on-scroll::before, .wsui-shadow-on-scroll::after { content: ""; display: block; height: 16px; /* make pseudo elements sticky as well */ position: sticky; } .wsui-shadow-on-scroll::before { top: 48px; /* shadow is at bottom of element, so at 48 + 16 = 64px */ box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } .wsui-shadow-on-scroll::after { /* linear gradient from background color to transparent acts as a transition effect so the shadow appears gradually */ background: linear-gradient(white 10%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.4) 70%, transparent); top: 0; /* cover should fall over shadow */ z-index: 2; } .wsui-shadow-on-scroll .is-toolbar { height: 64px; position: sticky; top: 0px; /* compensate for shadow with negative margin */ margin-top: -16px; /* content should fall over shadow and cover */ z-index: 3; } /*wsui-shadow-on-scroll End*/ .test-wsui-shadow-on-scroll { border: 1px solid red; }
Changelog:
08/14/2022
- fix: use css var