diff options
author | MacDue <macdue@dueutil.tech> | 2022-08-16 17:17:37 +0100 |
---|---|---|
committer | Andreas Kling <kling@serenityos.org> | 2022-08-18 15:58:05 +0200 |
commit | d26203ff90cec02f2a46576fc106f0879f8a6b97 (patch) | |
tree | c65d1e14f5e9f0c220d7b2a27ab5280801dbd611 | |
parent | e294b7929a48c1da784139cb7d1570e1c0f17349 (diff) | |
download | serenity-d26203ff90cec02f2a46576fc106f0879f8a6b97.zip |
Base: Add some `repeating-linear-gradient()` examples
-rw-r--r-- | Base/res/html/misc/gradients.html | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/Base/res/html/misc/gradients.html b/Base/res/html/misc/gradients.html index 994eb59578..54fc1af1b0 100644 --- a/Base/res/html/misc/gradients.html +++ b/Base/res/html/misc/gradients.html @@ -118,6 +118,23 @@ 75%, dodgerblue 0) } + + .grad-repeat-0 { + background-image: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px); + } + + .grad-repeat-1 { + background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%); + } + + .grad-repeat-2 { + background-image: repeating-linear-gradient(transparent, #4d9f0c 40px), + repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px); + } + + .grad-repeat-3 { + background-image: -webkit-repeating-linear-gradient(left, red 10%, blue 30%); + } </style> </head> <body> @@ -151,6 +168,11 @@ <div class="rect grad-15"></div> <b>A webkit gradient</b><br> <div class="box grad-webkit"></div> + <b>Repeating gradients</b><br> + <div class="box grad-repeat-0"></div> + <div class="box grad-repeat-1"></div> + <div class="box grad-repeat-2"></div> + <div class="box grad-repeat-3"></div> </body> <script> const boxes = document.querySelectorAll(".box, .rect"); |