Breaking News: Grepper is joining You.com. Read the official announcement!

shadow-on-scroll

Embarrassed Earthworm answered on October 16, 2022 Popularity 3/10 Helpfulness 2/10

answer shadow-on-scroll

shadow-on-scroll

Comment

<header class="wsui-shadow-on-scroll">
  <div class="is-toolbar">
    <h3>Header</h3>
  </div>
</header>
/*in css 
/*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;
}
*/

Popularity 3/10 Helpfulness 2/10 Language html

Source: www.cssscript.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Oct 16 2022

Embarrassed Earthworm

0 Answers Avg Quality 2/10

shadow-on-scroll

Contents

More Related Answers

shadow-on-scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.