0

My inspiration is this (on the top right of YouTube videos)

So I found this tutorial on how to do that gradient, I also have an image background so instead of using a gradient color like the tutorial and YouTube I want to make a gradient clipping mask of the background.

.help {
  background: /* Top shadow covers */
  linear-gradient(to right, white 30%, rgba(255, 255, 255, 1)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background: /* Shadow covers */
  linear-gradient(to left, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}


/*OTHER STYLES (disregard)*/

body {
  background-image: url("https://static.vecteezy.com/system/resources/previews/002/416/973/large_2x/tv-screen-noise-pixel-glitch-texture-background-illustration-vector.jpg");
}

h1 {
  padding: 15px;
  background: red;
}

h2 {
  margin: -4px;
  background: pink;
}

ul {
  max-height: 200px;
  overflow: auto;
}

li:nth-child(even) {
  color: red
}

li:nth-child(odd) {
  color: blue
}

.help {
  width: 300px;
  height: auto;
  margin: 10px auto;
  overflow: auto;
  white-space: nowrap;
}

.help li {
  display: inline-block;
}

.help li:before {
  content: '• ';
  font-size: .75em;
}

ul {
  background: /* Shadow covers */
  linear-gradient( white 30%, rgba(255, 255, 255, 0)), linear-gradient( rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background: /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}
<h1>HOW DO I MAKE A CLIPPING MASK GRADIANT ON BOTH LEFT AND RIGHT SIDES OF .help?!</h1>

<h2>.help</h2>
<div class="help">
  <ul>
    <b>Uh... SCROLL!</b>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <b>The end! But no shadow here either</b>
  </ul>
</div>


















<!-- EXAMPLE FROM TUTORIAL (disregard) -->
<h2><a href="https://lea.verou.me/2012/04/background-attachment-local/" target="_blank">tutorial</a></h2>
<ul>
  <b>The top! No shadow at the top! SCROLL!</b>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <b>The end! No shadow at the bottom anymore.</b>
</ul>

A CodePen of the above experiment

Kameron
  • 10,240
  • 4
  • 13
  • 26
user3570240
  • 5
  • 4

1 Answers1

0

I solved this using a little JS too

const div = document.querySelector("div");

let isScrolling = false;

function setShadows(event) {
    if (!isScrolling) {
        window.requestAnimationFrame(function () {
            if (event.target.scrollLeft > 0) div.classList.add("off-right");
            else div.classList.remove("off-right");

            if (event.target.scrollLeft < 160) div.classList.add("off-left");
            else div.classList.remove("off-left");

            isScrolling = false;
        });

        isScrolling = true;
    }
}

document.querySelector(".scrollbox").addEventListener("scroll", setShadows);
.container {
    height: 75px;
    margin: 5em;
    overflow-x: auto;
    white-space: nowrap;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item {
    display: inline-block;
    background-color: lightgray;
    margin: 0.25em;
    padding: 0.5em;
}

div {
    position: relative;
}

.shadow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    transition: all 200ms ease-out;
}

.scrollbox {
    height: 100%;
    overflow: auto;
}

.off-right .shadow-right {
    box-shadow: -20px 0 1em -1em blue inset;
}

.off-left .shadow-left {
    box-shadow: 20px 0 1em -1em red inset;
}

/* https://codepen.io/chris22smith/pen/OJMrWgb?editors=0100 */
<div class="container off-left">
    <div class="scrollbox">
        <ul class="list">
            <li class="item">One</li>
            <li class="item">Two</li>
            <li class="item">Three</li>
            <li class="item">Four</li>
            <li class="item">Five</li>
            <li class="item">Six</li>
            <li class="item">Seven</li>
            <li class="item">Eight</li>
            <li class="item">Nine</li>
            <li class="item">Ten</li>
        </ul>
    </div>
    <div class="shadow shadow-right" aria-hidden="true"></div>
    <div class="shadow shadow-left" aria-hidden="true"></div>
</div>

If anyone has any CSS only solutions im curious to see it

user3570240
  • 5
  • 4