tarasis
/
old_tarasis.net
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added trick to color text with a gradient

This commit is contained in:
Robert McGovern 2021-08-11 09:34:00 +02:00
parent d56f9d8d96
commit 1c3f3a154e
3 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -59,6 +59,12 @@
<h2>Vanilla JS Projects</h2>
<p>coming soon</p>
</div>
<div class="playground">
<h2>Playground</h2>
<p>Intended for just little snippets of code that look useful</p>
<a href="./playground.html">The Playground</a>
</div>
</div>
</main>
<footer>

6
playground.css Normal file
View File

@ -0,0 +1,6 @@
.gradient-text {
background-image: linear-gradient(90deg, red, blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

22
playground.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground</title>
<link rel="stylesheet" href="./playground.css">
</head>
<body>
<h1>Tricks</h1>
<h2>Gradient text with CSS</h2>
This one comes from Kevin Powell, on a YouTube video short <a href="https://www.youtube.com/watch?v=IQT4aI_Iup4">"Gradient text with CSS | CSS Tip of the Day"</a>. It applies a colored gradient to text.
Note that the -webkit- is needed to make this trick work in Safari.
<h1 class="gradient-text">Thingy Text thats with a gradient</h1>
<h2>???</h2>
</body>
</html>