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

Clean up snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-22 14:46:27 +03:00
parent a8818b1998
commit f56f631894
38 changed files with 211 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,11 +50,9 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
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).
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).
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.