forked from LeaVerou/conic-gradient
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (108 loc) · 8.96 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS conic-gradient() polyfill</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>CSS conic-gradient() polyfill</h1>
<p><a href="http://w3.org/TR/css4-images/#conic-gradients">Conic gradients</a> are awesome, but browsers haven’t realized yet. This polyfill lets you experiment with them now. If you like them, <a href="#ask">ask browser vendors to implement them</a>!</p>
</header>
<section id="examples">
<h1>Editable Examples</h1>
<article style="/* Basic example */
background: conic-gradient(#f06, gold);"></article>
<article style="/* Conical gradient cone */
background: conic-gradient(#eee .1turn, black, #eee 326deg);"></article>
<article style="/* Hue wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius: 50%"></article>
<article style="/* Pie chart */
background: conic-gradient(yellowgreen 40%, gold 0 70%, #f06 0);
border-radius: 50%"></article>
<article style="/* Checkerboard */
background: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0);
background-size: 4em 4em;"></article>
<article style="/* Alpha and multiple backgrounds */
background:
conic-gradient(#f06, rgba(0,0,0,.5)),
conic-gradient(silver 25%, #eee 0 50%,
silver 0 75%, #eee 0);
background-size: auto, 1em 1em;"></article>
<article style="/* Starburst with repeating gradients */
background: #0ac
repeating-conic-gradient(hsla(0,0%,100%,.2) 0 15deg, hsla(0,0%,100%,0) 0 30deg);"></article>
</section>
<section id="community">
<h1>Community examples</h1>
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p lang="en" dir="ltr">And an actually practical one: a metallic looking button! <a href="http://t.co/0SLAHN8gKL">http://t.co/0SLAHN8gKL</a> <a href="https://twitter.com/LeaVerou">@LeaVerou</a> <a href="http://t.co/lmv98tp2nK">pic.twitter.com/lmv98tp2nK</a></p>— Ana Tudor (@anatudor) <a href="https://twitter.com/anatudor/status/611732004531478528">June 19, 2015</a></blockquote>
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p lang="en" dir="ltr">New idea: combined with `clip-path` (WebKit-only) <a href="http://t.co/Roz0fOrMEF">http://t.co/Roz0fOrMEF</a> <a href="https://twitter.com/LeaVerou">@LeaVerou</a> <a href="http://t.co/vGe3phS6nR">pic.twitter.com/vGe3phS6nR</a></p>— Ana Tudor (@anatudor) <a href="https://twitter.com/anatudor/status/611743862541959168">June 19, 2015</a></blockquote>
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p lang="en" dir="ltr">A few more examples using the conic-gradient() polyfill <a href="http://t.co/x0sfVmzqPX">http://t.co/x0sfVmzqPX</a> (each one is one element ☺) <a href="https://twitter.com/LeaVerou">@LeaVerou</a> <a href="http://t.co/60MDWDDE6Z">pic.twitter.com/60MDWDDE6Z</a></p>— Ana Tudor (@anatudor) <a href="https://twitter.com/anatudor/status/611712170062139392">June 19, 2015</a></blockquote>
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/LeaVerou">@LeaVerou</a> Radar! <a href="http://t.co/FIfXFBTp4k">http://t.co/FIfXFBTp4k</a> 1 element, created now using the 3 types of gradients: linear, radial, conic☺ <a href="http://t.co/Y4KWGpG2fr">pic.twitter.com/Y4KWGpG2fr</a></p>— Ana Tudor (@anatudor) <a href="https://twitter.com/anatudor/status/611659012212441088">June 18, 2015</a></blockquote>
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p lang="en" dir="ltr">And one more with `clip-path` (WebKit only) <a href="http://t.co/D0cdRncK7C">http://t.co/D0cdRncK7C</a> - one element per shape <a href="https://twitter.com/LeaVerou">@LeaVerou</a> <a href="http://t.co/OpXiIyUDXX">pic.twitter.com/OpXiIyUDXX</a></p>— Ana Tudor (@anatudor) <a href="https://twitter.com/anatudor/status/611762360580239360">June 19, 2015</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<footer>Made a cool demo too? Tweet it with to <a href="http://twitter.com/leaverou">@leaverou</a> and it might be added here!</footer>
</section>
<section id="features">
<h1>Features</h1>
<ul>
<li>Color stop normalization</li>
<li>Both <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> support</li>
<li>Follows background-size (pixels and percentages). By default occupies the entire element, just like a proper CSS gradient.</li>
<li>Supports double position syntax (two positions for the same color stop, as a shortcut for two consecutive color stops with the same color)</li>
</ul>
</section>
<section id="limitations">
<h1>Limitations</h1>
<ul>
<li>No center point support</li>
<li>No calc() support</li>
<li>No midpoint color stops (color stops with no color)</li>
<li>Negative color stop positions not supported</li>
<li>Color interpolation happens without premultiplied alpha.</li>
</ul>
</section>
<section id="usage">
<h1>Usage</h1>
<p>To use directly in your CSS code like you would if it was supported, it requires <a href="http://leaverou.github.io/prefixfree">-prefix-free</a>. Just include both scripts in order:</p>
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="<a href="conic-gradient.js">conic-gradient.js</a>"></script></code></pre>
<p>Alternatively, you can use the API to directly get the SVG element generated and do whatever you want with it:</p>
<pre><code class="language-javascript">var gradient = new ConicGradient({
stops: "gold 40%, #f06 0", // required
repeating: true, // Default: false
size: 400 // Default: Math.max(innerWidth, innerHeight)
});
console.log(gradient.svg); // SVG markup
console.log(gradient.png); // PNG image (fixed dimensions) as a data URL
console.log(gradient.dataURL); // data URL
console.log(gradient.blobURL); // blog URL</code></pre>
<p>Note that the generated image will always resize accordingly, you don’t have to provide a size. The size argument just controls the resolution of the bitmap image generated inside the SVG that will be scaled. Making it smaller will result in faster performance but less crisp gradients.</p>
</section>
<section id="ask">
<h1>How can I get conic gradients implemented?</h1>
<p>The best way to get a feature implemented is asking browser vendors to do it. It’s really that simple. Browser vendors prioritize what to implement based on developer requests, so the more developers asking for a feature, the higher the chances browsers will notice.</p>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Conic gradients are awesome. Please implement them @IEDevChat @mozhacks @ChromiumDev @odevrel @webkit" data-via="LeaVerou">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Conic gradients are awesome. Please implement them @IEDevChat @mozhacks @ChromiumDev @odevrel @webkit" data-via="LeaVerou">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<p>Also, communicate directly with the developers. Vote or comment in the following:</p>
<ul>
<li><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/8471413-implement-conic-gradients-from-css-image-values-le">Microsoft Edge Uservoice thread</a></li>
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1175965">Gecko bug report</a></li>
<li>Chromium bug report (TBD)</li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=146113">WebKit bug report</a></li>
</ul>
<p>But mainly, and regardless of the venue, speak up. <a href="http://lea.verou.me/2015/06/conical-gradients-today/">Make noise.</a> It matters more than you think.</p>
</section>
<a href="https://github.com/leaverou/conic-gradient"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<footer>
Made with ♥ by <a href="http://lea.verou.me">Lea Verou</a> • <a href="http://lea.verou.me/2015/06/conical-gradients-today">Blog post</a>
</footer>
<script src="../prefixfree/prefixfree.min.js"></script>
<script src="../incrementable/incrementable.js"></script>
<script src="conic-gradient.js"></script>
<script src="index.js"></script>
</body>
</html>