diff options
| author | MacDue <macdue@dueutil.tech> | 2022-06-20 12:33:09 +0100 |
|---|---|---|
| committer | Linus Groh <mail@linusgroh.de> | 2022-06-23 19:13:24 +0100 |
| commit | f807fe6f6ced06036e9e8f6707ce725d36d8830c (patch) | |
| tree | a95ba6a6aa97b099cc38e8e412658fc787a69aee /Base/res/html | |
| parent | 4ffbe9284ebf5a7ba1bcdc5dc273b198399843dd (diff) | |
| download | serenity-f807fe6f6ced06036e9e8f6707ce725d36d8830c.zip | |
Base: Add box-shadow + border-radius HTML examples
This now also shows the same box-shadows on the right on top of a
background to test the clipping underneath the content.
Diffstat (limited to 'Base/res/html')
| -rw-r--r-- | Base/res/html/misc/box-shadow.html | 113 | ||||
| -rw-r--r-- | Base/res/html/misc/car.png | bin | 0 -> 53767 bytes |
2 files changed, 74 insertions, 39 deletions
diff --git a/Base/res/html/misc/box-shadow.html b/Base/res/html/misc/box-shadow.html index d469ce3bcb..79cdf44a99 100644 --- a/Base/res/html/misc/box-shadow.html +++ b/Base/res/html/misc/box-shadow.html @@ -1,45 +1,80 @@ <!DOCTYPE html> <html> + <head> + <title>Box-Shadow</title> + <style> + .box { + border: 1px solid black; + height: 100px; + width: 100px; + margin: 50px; + } -<head> - <title>Box-Shadow</title> - <style> + #no-bg { + width: 50%; + float: left; + } - .box { - border: 1px solid black; - height: 100px; - width: 100px; - margin: 50px; - } - </style> -</head> + #with-bg { + width: 50%; + float: right; + background-image: url("car.png"); + color: rgb(255, 255, 255); + } -<body> -<h1>Box-shadow Tests</h1> - -<div class="box" style="box-shadow: 20px 10px magenta"> - <p>box-shadow: 20px 10px magenta</p> -</div> - -<div class="box" style="box-shadow: magenta -40px -20px"> - <p>box-shadow: magenta -40px -20px</p> -</div> - -<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)"> - <p>box-shadow: 20px 10px rgba(255,0,255,0.5)</p> -</div> - -<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)"> - <p>box-shadow: -40px -20px rgba(255,0,255,0.5)</p> -</div> - -<div class="box" style="box-shadow: 20px 10px 5px magenta"> - <p>box-shadow: 20px 10px 5px magenta</p> -</div> - -<div class="box" style="box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px"> - <p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p> -</div> - -</body> + .cmy { + box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px; + } + </style> + </head> + <body> + <div id="mask"></div> + <h1>Box-shadow Tests</h1> + <div id="no-bg"> + <h2>Border radius 50%</h2> + <div class="box cmy" style="border-radius: 50%;"> + <p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p> + </div> + <h2>Border radius: Egg</h2> + <div class="box cmy" style="border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;"> + <p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p> + </div> + <br> + <h2>Border radius 20px</h2> + <div class="box cmy" style="border-radius: 20px;"> + <p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p> + </div> + <br> + <div class="box" style="box-shadow: magenta -40px -20px; border-radius: 30%;"> + <p>box-shadow: magenta -40px -20px</p> + </div> + <br> + <h2>No border radius</h2> + <div class="box cmy"> + <p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p> + </div> + <br> + <div class="box" style="box-shadow: 20px 10px 5px magenta"> + <p>box-shadow: 20px 10px 5px magenta</p> + </div> + <div class="box" style="box-shadow: 20px 10px magenta"> + <p>box-shadow: 20px 10px magenta</p> + </div> + <div class="box" style="box-shadow: magenta -40px -20px"> + <p>box-shadow: magenta -40px -20px</p> + </div> + <div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)"> + <p>box-shadow: 20px 10px rgba(255,0,255,0.5)</p> + </div> + <div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)"> + <p>box-shadow: -40px -20px rgba(255,0,255,0.5)</p> + </div> + </div> + <div id="with-bg"></div> + <script> + const noBg = document.getElementById("no-bg"); + const withBg = document.getElementById("with-bg"); + withBg.append(...[...noBg.childNodes].map(node => node.cloneNode(true))); + </script> + </body> </html> diff --git a/Base/res/html/misc/car.png b/Base/res/html/misc/car.png Binary files differnew file mode 100644 index 0000000000..08678e2dea --- /dev/null +++ b/Base/res/html/misc/car.png |
