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

9
snippets/gradient-text.md
View File

@ -11,17 +11,18 @@ Gives text a gradient color.
```css
.gradient-text {
background: -webkit-linear-gradient(pink, red);
background: linear-gradient(#70D6FF, #00072D);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 32px;
}
```
#### Explanation
1. `background: -webkit-linear-gradient(...)` gives the text element a gradient background.
2. `webkit-text-fill-color: transparent` fills the text with a transparent color.
3. `webkit-background-clip: text` clips the background with the text, filling the text with the gradient background as the 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.
#### Browser support