mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

feat: support font color gradient

Browse Source
This commit is contained in:
ysk2014
2020-10-13 12:04:19 +08:00
parent fc8c95ea74
commit d7f681a60b
7 changed files with 137 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
tests/reftests/text/font-color-gradient.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>Text tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<style>
body {
font-family: Arial;
}
.gradient-text {
font-size: 40px;
font-weight: bolder;
position: relative;
}
.gradient-text-one {
background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-text-two {
background-image: -webkit-linear-gradient(right, red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-text-three {
background-image: radial-gradient(red, yellow, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>font-color-gradient</h1>
<div style="margin-top: 10px;">
<span class="gradient-text gradient-text-one">Hello world</span>
<span>no effects</span>
</div>
<div style="margin-top: 10px;">
<span class="gradient-text gradient-text-two">Hello world</span>
</div>
<div style="margin-top: 10px;">
<span class="gradient-text gradient-text-three">Hello world</span>
</div>
<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas
</div>
</body>
</html>