andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
snippets/overflow-scroll-gradient.md
View File

@ -5,6 +5,15 @@ tags: visual,intermediate
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
- `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements.
- `:after` defines a pseudo element.
- `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white (top to bottom).
- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
- `width: 240px` matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
- `height: 25px` is the height of the fading gradient pseudo-element, which should be kept relatively small.
- `bottom: 0` positions the pseudo-element at the bottom of the parent.
- `pointer-events: none` specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
```html
<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient-scroller">
@ -44,14 +53,3 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
line-height: 1.2;
}
```
#### Explanation
- `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements.
- `:after` defines a pseudo element.
- `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white (top to bottom).
- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
- `width: 240px` matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
- `height: 25px` is the height of the fading gradient pseudo-element, which should be kept relatively small.
- `bottom: 0` positions the pseudo-element at the bottom of the parent.
- `pointer-events: none` specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.