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

Update snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 13:34:04 +03:00
parent d35dab24c3
commit 3077d4c71f
27 changed files with 141 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,13 +25,13 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
position: relative;
}
.overflow-scroll-gradient::after {
.overflow-scroll-gradient:after {
content: '';
position: absolute;
bottom: 0;
width: 250px;
height: 25px;
background: linear-gradient(transparent, white);
background: linear-gradient(transparent, white);
pointer-events: none;
}
@ -47,15 +47,13 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
#### Explanation
1. `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements.
2. `::after` defines a pseudo element.
3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white (top to bottom).
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
5. `width: 240px` matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
6. `height: 25px` is the height of the fading gradient pseudo-element, which should be kept relatively small.
7. `bottom: 0` positions the pseudo-element at the bottom of the parent.
8. `pointer-events: none` specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
- `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.
#### Browser support
- https://caniuse.com/#feat=css-gradients