Skip to content

Commit f807fe6

Browse files
MacDuelinusg
MacDue
authored and
linusg
committed
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.
1 parent 4ffbe92 commit f807fe6

File tree

2 files changed

+74
-39
lines changed

2 files changed

+74
-39
lines changed

‎Base/res/html/misc/box-shadow.html‎

Lines changed: 74 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,80 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<title>Box-Shadow</title>
5+
<style>
6+
.box {
7+
border: 1px solid black;
8+
height: 100px;
9+
width: 100px;
10+
margin: 50px;
11+
}
312

4-
<head>
5-
<title>Box-Shadow</title>
6-
<style>
13+
#no-bg {
14+
width: 50%;
15+
float: left;
16+
}
717

8-
.box {
9-
border: 1px solid black;
10-
height: 100px;
11-
width: 100px;
12-
margin: 50px;
13-
}
14-
</style>
15-
</head>
18+
#with-bg {
19+
width: 50%;
20+
float: right;
21+
background-image: url("car.png");
22+
color: rgb(255, 255, 255);
23+
}
1624

17-
<body>
18-
<h1>Box-shadow Tests</h1>
19-
20-
<div class="box" style="box-shadow: 20px 10px magenta">
21-
<p>box-shadow: 20px 10px magenta</p>
22-
</div>
23-
24-
<div class="box" style="box-shadow: magenta -40px -20px">
25-
<p>box-shadow: magenta -40px -20px</p>
26-
</div>
27-
28-
<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)">
29-
<p>box-shadow: 20px 10px rgba(255,0,255,0.5)</p>
30-
</div>
31-
32-
<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)">
33-
<p>box-shadow: -40px -20px rgba(255,0,255,0.5)</p>
34-
</div>
35-
36-
<div class="box" style="box-shadow: 20px 10px 5px magenta">
37-
<p>box-shadow: 20px 10px 5px magenta</p>
38-
</div>
39-
40-
<div class="box" style="box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px">
41-
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
42-
</div>
43-
44-
</body>
25+
.cmy {
26+
box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div id="mask"></div>
32+
<h1>Box-shadow Tests</h1>
33+
<div id="no-bg">
34+
<h2>Border radius 50%</h2>
35+
<div class="box cmy" style="border-radius: 50%;">
36+
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
37+
</div>
38+
<h2>Border radius: Egg</h2>
39+
<div class="box cmy" style="border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;">
40+
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
41+
</div>
42+
<br>
43+
<h2>Border radius 20px</h2>
44+
<div class="box cmy" style="border-radius: 20px;">
45+
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
46+
</div>
47+
<br>
48+
<div class="box" style="box-shadow: magenta -40px -20px; border-radius: 30%;">
49+
<p>box-shadow: magenta -40px -20px</p>
50+
</div>
51+
<br>
52+
<h2>No border radius</h2>
53+
<div class="box cmy">
54+
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
55+
</div>
56+
<br>
57+
<div class="box" style="box-shadow: 20px 10px 5px magenta">
58+
<p>box-shadow: 20px 10px 5px magenta</p>
59+
</div>
60+
<div class="box" style="box-shadow: 20px 10px magenta">
61+
<p>box-shadow: 20px 10px magenta</p>
62+
</div>
63+
<div class="box" style="box-shadow: magenta -40px -20px">
64+
<p>box-shadow: magenta -40px -20px</p>
65+
</div>
66+
<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)">
67+
<p>box-shadow: 20px 10px rgba(255,0,255,0.5)</p>
68+
</div>
69+
<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)">
70+
<p>box-shadow: -40px -20px rgba(255,0,255,0.5)</p>
71+
</div>
72+
</div>
73+
<div id="with-bg"></div>
74+
<script>
75+
const noBg = document.getElementById("no-bg");
76+
const withBg = document.getElementById("with-bg");
77+
withBg.append(...[...noBg.childNodes].map(node => node.cloneNode(true)));
78+
</script>
79+
</body>
4580
</html>

‎Base/res/html/misc/car.png‎

52.5 KB
Loading

0 commit comments

Comments
 (0)