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

Update formatting

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2022-01-30 19:54:55 +02:00
parent 616d9461d9
commit 8f97fb7175
6 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
snippets/mouse-cursor-gradient-tracking.md
View File

@ -9,7 +9,7 @@ A hover effect where the gradient follows the mouse cursor.
- Declare two CSS variables, `--x` and `--y`, used to track the position of the mouse on the button.
- Declare a CSS variable, `--size`, used to modify the gradient's dimensions.
- Use `background: radial-gradient(circle closest-side, pink, transparent);` to create the gradient at the correct position.
- Use `background: radial-gradient(circle closest-side, pink, transparent)` to create the gradient at the correct position.
- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'mousemove'` event.
- Use `Element.getBoundingClientRect()` and `CSSStyleDeclaration.setProperty()` to update the values of the `--x` and `--y` CSS variables.