2022-05-28 11:03:36 +02:00
|
|
|
// Credits: https://codepen.io/chriscoyier/pen/YzXBYvL
|
|
|
|
|
.scroll-shadows {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
background:
|
|
|
|
|
/* Shadow Cover TOP */
|
|
|
|
|
linear-gradient(
|
|
|
|
|
white 30%,
|
|
|
|
|
rgba(255, 255, 255, 0)
|
|
|
|
|
) center top,
|
|
|
|
|
|
|
|
|
|
/* Shadow Cover BOTTOM */
|
|
|
|
|
linear-gradient(
|
|
|
|
|
rgba(255, 255, 255, 0),
|
|
|
|
|
white 70%
|
|
|
|
|
) center bottom,
|
|
|
|
|
|
|
|
|
|
/* Shadow TOP */
|
|
|
|
|
radial-gradient(
|
|
|
|
|
farthest-side at 50% 0,
|
|
|
|
|
rgba(0, 0, 0, 0.2),
|
|
|
|
|
rgba(0, 0, 0, 0)
|
|
|
|
|
) center top,
|
|
|
|
|
|
|
|
|
|
/* Shadow BOTTOM */
|
|
|
|
|
radial-gradient(
|
|
|
|
|
farthest-side at 50% 100%,
|
|
|
|
|
rgba(0, 0, 0, 0.2),
|
|
|
|
|
rgba(0, 0, 0, 0)
|
|
|
|
|
) center bottom;
|
|
|
|
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
|
|
|
|
|
background-attachment: local, local, scroll, scroll;
|
2019-08-19 16:43:32 +02:00
|
|
|
}
|
