diff options
| author | MacDue <macdue@dueutil.tech> | 2022-11-01 21:25:36 +0000 |
|---|---|---|
| committer | Linus Groh <mail@linusgroh.de> | 2022-11-01 23:07:05 +0000 |
| commit | d6334dcab15556f7133fa85db7b55b1ecc40da7d (patch) | |
| tree | 821d5dcbf6ac2d81449bfed26c8e0abeb017b3c3 /Base/res | |
| parent | fdcc73d4b17ae886aa5609745fb4be982f1f40dc (diff) | |
| download | serenity-d6334dcab15556f7133fa85db7b55b1ecc40da7d.zip | |
Base: Add some `conic-gradient()` HTML examples
Diffstat (limited to 'Base/res')
| -rw-r--r-- | Base/res/html/misc/gradients.html | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/Base/res/html/misc/gradients.html b/Base/res/html/misc/gradients.html index dda64e15d7..368585b993 100644 --- a/Base/res/html/misc/gradients.html +++ b/Base/res/html/misc/gradients.html @@ -139,6 +139,24 @@ .grad-double-position { background-image: linear-gradient(to right,red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%) } + + .grad-conic-1 { + background-image: conic-gradient(red, orange, yellow, green, blue); + } + + .grad-conic-2 { + background-image: conic-gradient(from 0.25turn at 50% 30%, #f69d3c, 10deg, #3f87a6, 350deg, #ebf8e1); + } + + .grad-conic-3 { + background-image: conic-gradient(from 3.1416rad at 10% 50%, #e66465, #9198e5); + } + + .grad-conic-4 { + background-image: conic-gradient( + red 6deg, orange 6deg 18deg, yellow 18deg 45deg, + green 45deg 110deg, blue 110deg 200deg, purple 200deg); + } </style> </head> <body> @@ -179,6 +197,11 @@ <div class="box grad-repeat-3"></div> <b>Double-position color stops</b><br> <div class="box grad-double-position"></div> + <b>Conic gradients</b><br> + <div class="box grad-conic-1"></div> + <div class="box grad-conic-2"></div> + <div class="box grad-conic-3"></div> + <div class="box grad-conic-4"></div> </body> <script> const boxes = document.querySelectorAll(".box, .rect"); |