[css] background-attachment of scrolling-shadow

[Shenglian]

scroll is the default value. It scrolls with the main view, but stays fixed inside the local view.

fixed stays fixed no matter what. It's kind of like a physical window: moving around the window changes your perspective, but it doesn't change where things are outside of the window.

local was invented because the default scroll value acts like a fixed background. It scrolls both with the main view and the local view.

@mixin scolling-shadow($direction) {
  @if $direction == horizon {
    background: 
    linear-gradient(white 30%, hsla(0, 0%, 100%, 0)), 
    linear-gradient(hsla(0, 0%, 100%, 0), white 70%) bottom, 
    radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%), 
    radial-gradient(at bottom, rgba(0, 0, 0, .2), transparent 70%) bottom;  

    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  } @else {
    background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;

    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100%, 0 0, 100%;
  }

  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.horizon {
  @include scolling-shadow(horizon)
}

.vertical {
  @include scolling-shadow(vertical)
}

demo