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

12
snippets/gradient-text.md
View File

@ -5,6 +5,11 @@ tags: visual,intermediate
Gives text a gradient color.
- `background: -webkit-linear-gradient(...)` gives the text element a gradient background.
- `webkit-text-fill-color: transparent` fills the text with a transparent color.
- `webkit-background-clip: text` clips the background with the text, filling the text with the gradient background as the color.
- Uses non-standard properties.
```html
<p class="gradient-text">Gradient text</p>
```
@ -17,10 +22,3 @@ Gives text a gradient color.
font-size: 32px;
}
```
#### Explanation
- `background: -webkit-linear-gradient(...)` gives the text element a gradient background.
- `webkit-text-fill-color: transparent` fills the text with a transparent color.
- `webkit-background-clip: text` clips the background with the text, filling the text with the gradient background as the color.
- Uses non-standard properties.