-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
140 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| <!DOCTYPE html><!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>A color wheel with an array of colors</title> | ||
| <link rel="icon" href="/img/fav.png" sizes="any"> | ||
| <meta name="description" content="A simple conic-gradient() trick to create a color wheel"> | ||
| <meta name="author" content="Temani Afif"> | ||
| <meta name="robots" content="index, follow"> | ||
| <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"> | ||
| <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"> | ||
| <link rel=canonical href="https://css-tip.com/color-wheel/" > | ||
| <meta name="view-transition" content="same-origin" > | ||
| <link href="https://github.com/Afif13/" rel="me"> | ||
| <link href="https://twitter.com/ChallengesCss" rel="me"> | ||
| <meta property="og:locale" content="en_US" > | ||
| <meta property="og:title" content="A color wheel with an array of colors"> | ||
| <meta property="og:type" content="website"> | ||
| <meta property="og:url" content="https://css-tip.com/color-wheel/"> | ||
| <meta property="og:description" content="A simple conic-gradient() trick to create a color wheel"> | ||
| <meta property="og:image" content="/og-images/HOKR6ZC4C6.png" > | ||
| <meta property="og:image:width" content="1200" > | ||
| <meta property="og:image:height" content="675" > | ||
| <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="CSS Tip: Learn CSS the easy one"> | ||
| <link rel="alternate" href="/feed/feed.json" type="application/json" title="CSS Tip: Learn CSS the easy one"> | ||
| <meta name="generator" content="Eleventy v2.0.1"> | ||
|
|
||
| <style>code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[class*=language-diff-]{--eleventy-code-padding:1.25em;padding-left:var(--eleventy-code-padding);padding-right:var(--eleventy-code-padding)}.token.deleted{background-color:#8e2e2e;color:inherit}.token.inserted{background-color:#44824a;color:inherit}.token.prefix.deleted,.token.prefix.inserted,.token.prefix.unchanged{-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;padding-top:2px;padding-bottom:2px}.token.prefix.deleted,.token.prefix.inserted{width:var(--eleventy-code-padding);background-color:rgba(0,0,0,.2)}.token.deleted:not(.prefix),.token.inserted:not(.prefix){display:block;margin-left:calc(-1 * var(--eleventy-code-padding));margin-right:calc(-1 * var(--eleventy-code-padding));text-decoration:none;color:inherit}:root{--font-family:-apple-system,system-ui,sans-serif;--font-family-monospace:Consolas,Menlo,Monaco,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Courier New,Courier,monospace;--color-gray-20:#e0e0e0;--color-gray-50:#C0C0C0;--color-gray-90:#333;--background-color:#fff;--text-color:var(--color-gray-90);--text-color-link:#033254;--text-color-link-active:#5f2b48;--text-color-link-visited:#17050F;--syntax-tab-size:2}@media (prefers-color-scheme:dark){:root{--color-gray-20:#e0e0e0;--color-gray-50:#C0C0C0;--color-gray-90:#dad8d8;--text-color-link:#6fa2cc;--text-color-link-active:#6969f7;--text-color-link-visited:#a6a6f8;--background-color:#15202b}}*{box-sizing:border-box}body,html{padding:0;margin:0 auto;font-family:var(--font-family);color:var(--text-color)}html{--s:50px;--c:#fff;--c1:#f3f3f3;--_s:calc(2*var(--s)) calc(2*var(--s));--_g:35.36% 35.36% at;--_c:#0000 66%,var(--c1) 68% 70%,#0000 72%;background:radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s),radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s),repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s),radial-gradient(var(--c) 66%,var(--c1) 68% 70%,var(--c) 72%) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);background-attachment:fixed;overflow-y:scroll;overflow-x:hidden}@media (prefers-color-scheme:dark){html{--c:#15202b;--c1:#25272e}}body{max-width:40em;min-height:100vh;display:flex;flex-direction:column}footer{margin-top:auto;text-align:center;padding:0 1rem}footer a{display:inline-block}h1{text-align:center;margin:.25em 0 1em;font-size:2.5rem;text-wrap:balance;text-transform:capitalize}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}p{line-height:1.5}li{line-height:1.5}a[href]{color:var(--text-color-link)}a[href]:active,a[href]:hover{color:var(--text-color-link-active)}main{padding:1rem}main img{max-width:100%;height:auto;margin:1.5rem auto;display:block}header{border-image:linear-gradient(to top,var(--color-gray-20) 1px,#0000 0) fill 0//0 100vw}footer{border-image:linear-gradient(to bottom,var(--color-gray-20) 1px,#0000 0) fill 0//0 100vw}.links-nextprev{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:1em;position:sticky;bottom:1em;font-size:1.25em}.links-nextprev>*{transform:translate(var(--t))}.links-nextprev .prev{margin-right:auto;--t:calc(-100% - 2em)}.links-nextprev .next{margin-left:auto;--t:calc( 100% + 2em)}.links-nextprev a:not(:hover){text-decoration:none}.links-nextprev a{position:relative}.links-nextprev .prev a:before{content:"";position:absolute;inset:0 100% 0 auto;width:1em;margin-right:.3em;background:currentColor;clip-path:polygon(100% 0,0 50%,100% 100%)}.links-nextprev .next a:after{content:"";position:absolute;inset:0 auto 0 100%;width:1em;margin-left:.3em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}@supports (animation-timeline:scroll(root)){.links-nextprev>*{animation:t 1s linear;animation-timeline:scroll(root)}@keyframes t{0%,93%{transform:translate(var(--t))}to{transform:translate(0)}}}@media (max-width:900px){.links-nextprev{position:static}.links-nextprev>*{--t:0!important}}table{margin:1em 0}table td,table th{padding-right:1em}code,pre{font-family:var(--font-family-monospace)}pre:not([class*=language-]){margin:.5em 0;line-height:1.375;-moz-tab-size:var(--syntax-tab-size);-o-tab-size:var(--syntax-tab-size);tab-size:var(--syntax-tab-size);-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal}pre[class*=language-]{margin:1.5em 0}header{display:flex;gap:1em .5em;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:1em}.home-link{font-size:2em;font-weight:700;margin-right:2em;text-decoration:none;color:var(--text-color)!important}.nav{display:flex;padding:0;margin:0;list-style:none;gap:1.5em}.nav-item a[href]:not(:hover){text-decoration:none}.nav a[href][aria-current=page]{text-decoration:underline}.postlist{list-style:none;padding:0;padding-left:1.5rem}.postlist>*{display:flex;flex-direction:column;align-items:start;margin-bottom:1em;position:relative}.postlist>:before{pointer-events:none;content:"❋";line-height:100%;position:absolute;right:calc(100% + .5em);top:.7em}.postlist time,.postlist>:before{font-size:.8125em;color:var(--color-gray-90)}.postlist time{word-spacing:-0.5px}.postlist a{font-size:1.1875em;font-weight:700;padding-right:.5em;text-underline-position:from-font;text-transform:capitalize}h1+time{display:block;text-align:center;margin:-1.5em 0 2em}.header-anchor{text-decoration:none;font-style:normal;font-size:1em;margin-left:.1em}a[href].header-anchor,a[href].header-anchor:visited{color:transparent}a[href].header-anchor:focus,a[href].header-anchor:hover{text-decoration:underline}:hover>a[href].header-anchor,a[href].header-anchor:focus{color:#aaa}h2+.header-anchor{font-size:1.5em}input[type=search]{display:block;width:calc(100% - 24px);margin:0 auto 2em;padding:.8em;border-radius:5px;border:1px solid #0005;font-size:1em}.hide{display:none!important}html{view-transition-name:main;background-color:var(--c1)}@media not (prefers-reduced-motion){::view-transition-new(main),::view-transition-old(main){animation:x .6s ease-out both;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) calc(50% - 20px) calc(200% + 40px)/80px calc(50% + 21px) repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) calc(50% + 20px) calc(-100% - 40px)/80px calc(50% + 21px) repeat-x,linear-gradient(#000 0 0);-webkit-mask-composite:destination-out}::view-transition-new(main){animation:y .6s .6s ease-in both}@keyframes x{80%,to{-webkit-mask-position:calc(50% - 20px) 100%,calc(50% + 20px) 0%}}@keyframes y{0%,20%{-webkit-mask-position:calc(50% - 20px) 100%,calc(50% + 20px) 0%}}}</style> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-KSNXZ63602"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag(){dataLayer.push(arguments);} | ||
| gtag('js', new Date()); | ||
| gtag('config', 'G-KSNXZ63602'); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <a href="#skip" class="visually-hidden">Skip to main content</a> | ||
| <header> | ||
| <a href="/" class="home-link">CSS Tip</a> | ||
| <nav> | ||
| <h2 class="visually-hidden">Top level navigation menu</h2> | ||
| <ul class="nav"> | ||
| <li class="nav-item"><a href="/">Home</a></li> | ||
| <li class="nav-item"><a href="/archive/">Archive</a></li> | ||
| <li class="nav-item"><a href="/about/">About</a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| <main id="skip"> | ||
| <h1>A color wheel with an array of colors</h1> | ||
|
|
||
| <time datetime="2023-07-18">July 18, 2023</time> | ||
|
|
||
| <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script> | ||
| <div class="adaptive" data-ea-publisher="css-challengescom" id="css-tip" data-ea-type="text" style="min-height: 100px;"></div> | ||
|
|
||
| <p>Create a perfect color wheel with multiple colors using <code>conic-gradient()</code></p> | ||
| <ul> | ||
| <li>One variable to define all the colors</li> | ||
| <li>No color duplication</li> | ||
| <li>Smooth transition between all the colors</li> | ||
| </ul> | ||
| <p><picture><source type="image/avif" srcset="/img/Piw2vIbsEl-405.avif 405w"><source type="image/webp" srcset="/img/Piw2vIbsEl-405.webp 405w"><img alt="A color wheel using conic-gradient" loading="lazy" decoding="async" src="/img/Piw2vIbsEl-405.png" width="405" height="495"></picture></p> | ||
| <pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.box</span> <span class="token punctuation">{</span><br> <span class="token comment">/* your colors without duplication */</span><br> <span class="token property">--colors</span><span class="token punctuation">:</span> green<span class="token punctuation">,</span>yellow<span class="token punctuation">,</span>red<span class="token punctuation">,</span>blue<span class="token punctuation">,</span>pink<span class="token punctuation">;</span><br><br> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">conic-gradient</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--colors<span class="token punctuation">)</span> 0<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--colors<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre> | ||
| <p class="codepen" data-height="450" data-default-tab="result" data-slug-hash="NWEMdvw" data-preview="true" data-user="t_afif" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> | ||
| <span>See the Pen <a href="https://codepen.io/t_afif/pen/NWEMdvw" target="_blank" rel="noopener"> | ||
| Color wheel with colors array</a> by Temani Afif (<a href="https://codepen.io/t_afif" target="_blank" rel="noopener">@t_afif</a>) | ||
| on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</span> | ||
| </p> | ||
| <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> | ||
|
|
||
| <ul class="links-nextprev"><li class="prev"><a href="/zoom-hover-effect/" title="Zoom effect on hover">Previous CSS Tip</a></li> | ||
| </ul> | ||
|
|
||
| </main> | ||
| <footer> | ||
| <p>Created by <a href="https://twitter.com/ChallengesCss" target="_blank" rel="noopener">Temani Afif</a> | <a href="https://support.temani-afif.com/" target="_blank" rel="noopener">Support This Project</a> | <a href="/feed/feed.xml" target="_blank">RSS Feed</a></p> | ||
| </footer> | ||
| </body> | ||
| </html> |
Oops, something went wrong.