Home
https://barionleg.github.io/Atom-d3e/index.html
linear gradient css
body {
width: 100vw;
height: 100vh;
}
body {
background: linear-gradient(
to right,
white 0% 1%,
red 8% 14%,
black 16% 20%,
orange 22% 28%,
black 30% 34%,
yellow 36% 42%,
green 44%, 50%,
black 52% 56%,
Cyan 58% 66%,
black 68% 72%,
blue 74% 80%,
black 82% 86%,
Indigo 88% 94%,
white 96% 97%
);
}
to play with in: https://developer.mozilla.org/fr/docs/Web/CSS/gradient/linear-gradient
--
|
|
|
|
| <style>
| :root {
| --text-primary: #1b1b1b;
| --background-primary: #fff;
| }
| </style>
| <style>
| /* Legacy css to support existing live samples */
| body {
| padding: 0;
| margin: 0;
| }
|
| svg:not(:root) {
| display: block;
| }
|
| .playable-code {
| background-color: #f4f7f8;
| border: none;
| border-left: 6px solid #558abb;
| border-width: medium medium medium 6px;
| color: #4d4e53;
| height: 100px;
| width: 90%;
| padding: 10px 10px 0;
| }
|
| .playable-canvas {
| border: 1px solid #4d4e53;
| border-radius: 2px;
| }
|
| .playable-buttons {
| text-align: right;
| width: 90%;
| padding: 5px 10px 5px 26px;
| }
| </style>
|
|
| <style id="css-output">
| body {
| width: 100vw;
| height: 100vh;
| }
| body {
| background: linear-gradient(
| to right,
| white 0% 1%,
| red 8% 14%,
| black 16% 20%,
| orange 22% 28%,
| black 30% 34%,
| yellow 36% 42%,
| green 44%, 50%,
| black 52% 56%,
| Cyan 58% 66%,
| black 68% 72%,
| blue 74% 80%,
| black 82% 86%,
| Indigo 88% 94%,
| white 96% 97%
| );
| }
|
| </style>
| <script>
| const consoleProxy = new Proxy(console, {
| get(target, prop) {
| if (typeof target[prop] === "function") {
| return (...args) => {
| try {
| window.parent.postMessage(
| { typ: "console", prop, args },
| "*"
| );
| } catch {
| try {
| window.parent.postMessage(
| {
| typ: "console",
| prop,
| args: args.map((x) => {
| try {
| window.structuredClone(x);
| return x;
| } catch {
| return { _MDNPlaySerializedObject: x.toString() };
| }
| }),
| },
| "*"
| );
| } catch {
| window.parent.postMessage(
| {
| typ: "console",
| prop: "warn",
| args: [
| "[Playground] Unsupported console message (see browser console)",
| ],
| },
| "*"
| );
| }
| }
| target[prop](...args);
| };
| }
| return target[prop];
| },
| });
|
| window.console = consoleProxy;
| window.addEventListener("error", (e) => console.log(e.error));
| </script>
|
|
|
|
|
| <script type="">
| ;
| </script>
| <script>
| try {
| window.parent.postMessage({ typ: "ready" }, "*");
| } catch (e) {
| console.error("[Playground] Failed to post ready message", e);
| }
| </script>
|
|
|
