-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
43 lines (35 loc) · 1.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Convert image gradient to CSS3</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="container">
<header>
<h1>G2CSS</h1>
<h2>Convert gradient images to CSS gradients in the browser.</h2>
</header>
<h3 class="use">To use: simply drag & drop an image onto the page. Currently supports Chrome and Firefox 4 (gradient sample doesn't work in FF).</h3>
<article id="img1">
<section class="img">
<h3>Original Image</h3>
<img class="imgsrc" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAGQCAMAAACgZgEeAAABAlBMVEW5ubloaGhnZ2dpaWlqampsbGxra2tubm5vb29ycnJ8fHxxcXFzc3NwcHB2dnZ4eHh0dHRtbW1mZmaNjY13d3eLi4t7e3uPj496enqAgICDg4OMjIx5eXmIiIiJiYmHh4d9fX2BgYGGhoaFhYV+fn51dXV/f3+CgoKOjo6EhISKioq3t7e2tratra2zs7Opqam1tbW0tLSysrKwsLCurq6cnJyvr6+QkJCrq6ulpaWbm5umpqagoKC4uLixsbGVlZWZmZmjo6O7u7usrKynp6eRkZGampqWlpakpKSfn5+ioqK6urqYmJiqqqqenp6oqKiTk5OSkpKUlJShoaGdnZ2Xl5ewCHn6AAABAklEQVR4XrTGtQ1DQRQAQfdjZmZm7r8VZ5t9rd7pPNGUVgj1jLz9lykytIwMrSC1DaS2iVBrSG0Loc4Qahuh9hBqB6FWEeoa3gFCvcJbR6h3eDfwjuEdItQDvEt4T/C+4Z3Ae4T3Bu8HBe3CO4J3B+8C3gu8XxR0D+8c3he8DxT0Ce8W3j68v1bjGgcCGAiA2DEzM/P/H3jddNFoo7jyGt4PEp3Du4d3Ce8PiZ7gPcJ7hvcG7x3eLxLdwfuG9wrvFt4XvA94L/D2EOoK3g28B3jHCHUB7wihPuGdINQBQu0i1D5CHSLUDkJtI7dThNpEblvIbQMFWkeBVlG2NZTtDJH+AfkkbqkkiQtQAAAAAElFTkSuQmCC"/>
</section>
<section class="img">
<h3>CSS Gradient</h3>
<div class="cssgradient"></div>
</section>
<pre class="css"></pre>
</article>
<canvas id="grad"></canvas>
<footer>
<p>For more information visit <a href="https://github.com/driverdan/g2css">https://github.com/driverdan/g2css</a>.</p>
<p>Based on <a href="https://github.com/bluesmoon/pngtocss">pngtocss</a> and <a href="http://zoompf.com/grad2css.html">ImageG2CSS</a>.</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>