diff options
| author | MacDue <macdue@dueutil.tech> | 2022-07-17 19:54:34 +0100 |
|---|---|---|
| committer | Linus Groh <mail@linusgroh.de> | 2022-07-18 10:10:22 +0100 |
| commit | 4978f388c2bae4f34ff2cf0eb6da231732e24f7b (patch) | |
| tree | f4b6a5ba2a61771c6333e12809acc6623c4a5ca4 | |
| parent | 0c521381a3b7ce436747bb917077f2ad2528e4c7 (diff) | |
| download | serenity-4978f388c2bae4f34ff2cf0eb6da231732e24f7b.zip | |
Base: Add some more fun gradient demos
Adds tests for:
- Multi-stop gradient at arbitrary angles (CPU brr)
- Default/calculated color stops
- to <corner>
- Pre-multiplied alpha mixing
| -rw-r--r-- | Base/res/html/misc/gradients.html | 114 |
1 files changed, 104 insertions, 10 deletions
diff --git a/Base/res/html/misc/gradients.html b/Base/res/html/misc/gradients.html index e6a9806348..66cbe7dc3f 100644 --- a/Base/res/html/misc/gradients.html +++ b/Base/res/html/misc/gradients.html @@ -4,11 +4,19 @@ <meta charset="UTF-8"> <title>Gradients</title> <style> + div { + border: 1px solid black; + margin: 20px; + } + .box { width: 200px; height: 200px; - margin: 20px; - border: 1px solid black; + } + + .rect { + width: 400px; + height: 225px; } .grad-0 { @@ -40,30 +48,116 @@ .grad-6 { background-image: linear-gradient(to top, blue 30%, 30%, orange 20%, 10%, red); } + + .grad-7 { + width: 400px; + height: 225px; + background-image: linear-gradient(to right, red 0%, black 20%, yellow 60%, cyan 100%); + } + + .grad-8 { + background-image: linear-gradient( + to right, + red, + #f06d06, + rgb(255, 255, 0), + green + ); + } + + .grad-9 { + background: linear-gradient(135deg, #333 25%, transparent 25%) -50px 0, + linear-gradient(225deg, #333 25%, transparent 25%) -50px 0, + linear-gradient(315deg, #333 25%, transparent 25%), + linear-gradient(45deg, #333 25%, transparent 25%); + } + + .grad-10 { + background-image: linear-gradient(90deg, red, transparent, blue); + } + + .grad-11 { + background-image: linear-gradient(to top right, indigo, white, deeppink); + } + + .grad-12 { + background-image: linear-gradient(to top left, indigo, white, deeppink); + } + + .grad-13 { + background-image: linear-gradient(to bottom left, indigo, white, deeppink); + } + + .grad-14 { + background-image: linear-gradient(to bottom right, indigo, white, deeppink); + } </style> </head> <body> <h1>Gradients!</h1> + <b>Simple gradients:</b><br/> <div class="box grad-0"></div> <div class="box grad-1"></div> <div class="box grad-2"></div> <div class="box grad-3"></div> <div class="box grad-4"></div> + <b>Funky color hints:</b><br> <div class="box grad-5"></div> <div class="box grad-6"></div> + <b>Multiple color stops + arbitrary angles (click to spin!):</b><br> + <div id="gradient-spin" class="rect grad-7"></div> + <b>Default color stops:</b><br> + <div class="box grad-8"></div> + <div class="box grad-9"></div> + <b>Pre-multiplied alpha mixing test:</b><br> + <div class="box grad-10"></div> + <b>To corner:</b><br> + <div class="rect grad-11"></div> + <div class="rect grad-12"></div> + <div class="rect grad-13"></div> + <div class="rect grad-14"></div> </body> <script> - const boxes = document.querySelectorAll(".box"); + const boxes = document.querySelectorAll(".box, .rect"); const backgroundMap = {}; for (const rule of document.styleSheets[0].cssRules) { backgroundMap[rule.selectorText] = rule.style.backgroundImage; } - boxes.forEach(box => { - const grad = box.classList[1]; - console.log(grad) - const el = document.createElement('code'); - el.innerText = backgroundMap['.'+grad]; - box.parentNode.insertBefore(el, box) - }) + + // Extract backgroundImage CSS and place above each box + updateLabels = () => { + boxes.forEach(box => { + const grad = box.classList[1]; + const cssText = backgroundMap['.'+grad]; + let el = document.getElementById(grad); + let newEl = document.createElement('code'); + let text = document.createTextNode(box.style.backgroundImage || cssText); + newEl.appendChild(text); + newEl.id = grad; + if (!el) + box.parentNode.insertBefore(newEl, box) + else + box.parentNode.replaceChild(newEl, el); + }) + } + + // Spinning gradient demo/test + let angle = 0; + let spinIntervalId = -1; + const gradientSpin = document.getElementById("gradient-spin"); + gradientSpin.onclick = () => { + if (spinIntervalId <= -1) { + spinIntervalId = setInterval(() => { + gradientSpin.style.backgroundImage = `linear-gradient(${angle}deg, red 0%, black 20%, yellow 60%, cyan 100%)`; + angle += 1; + updateLabels(); + }, 100) + } else { + clearInterval(spinIntervalId); + spinIntervalId = -1; + } + } + + updateLabels(); </script> </html> |