Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f0ee330

Browse files
committed
Add the dialog example
1 parent e742fc2 commit f0ee330

File tree

5 files changed

+165
-0
lines changed

5 files changed

+165
-0
lines changed

‎48-css-clay-morphism/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CSS Claymporphism</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<main>
12+
<div class="box">
13+
<p>这是 CSS "泥陶态" 样式</p>
14+
<p>Claymorphism</p>
15+
<button>泥陶态按钮</button>
16+
</div>
17+
</main>
18+
</body>
19+
</html>

‎48-css-clay-morphism/style.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
* {
2+
box-sizing: border-box;
3+
padding: 0;
4+
margin: 0;
5+
font-family: Verdana, "PingFang SC", "Microsoft Yahei", sans-serif;
6+
}
7+
8+
main {
9+
display: grid;
10+
place-items: center;
11+
width: 100vw;
12+
height: 100vh;
13+
max-width: 100%;
14+
background: #DBEEFF;
15+
}
16+
17+
p {
18+
font-weight: 500;
19+
font-size: 16px;
20+
color: #384d6c;
21+
}
22+
23+
.box p:nth-child(2) {
24+
font-weight: 700;
25+
}
26+
27+
.box {
28+
display: grid;
29+
place-items: center;
30+
gap: 32px;
31+
32+
padding: 40px 56px;
33+
34+
/* claymporphism */
35+
background: #deebff;
36+
box-shadow: 12px 12px 18px rgba(155, 196, 255, 0.42),
37+
inset 10px 10px 11px rgba(250, 252, 255, 0.48),
38+
inset -10px -10px 15px rgba(46, 129, 255, 0.22);
39+
border-radius: 52px;
40+
}
41+
42+
button {
43+
padding: 8px 32px;
44+
border: none;
45+
color: white;
46+
font-weight: 900;
47+
48+
/* claymporphism */
49+
background: #cb5eff;
50+
box-shadow: 2px 3px 13px rgba(197, 78, 253, 0.43),
51+
inset -2px -2px 8px rgba(75, 10, 106, 0.43),
52+
inset 2px 2px 6px rgba(251, 242, 255, 0.47);
53+
border-radius: 22px;
54+
}

‎49-html-buit-in-dialog/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>HTML Built-in Dialog Element</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<main>
12+
<!-- <dialog open> -->
13+
<!-- <dialog id="dialog">
14+
<h1>Welcome!</h1>
15+
<p>This is a simple dialog</p>
16+
<form method="dialog">
17+
<button>Close</button>
18+
</form>
19+
</dialog> -->
20+
<dialog id="dialog">
21+
<h1>Register</h1>
22+
<form method="dialog">
23+
<!-- user input will be saved when dialog closes -->
24+
<input type="text" name="username" placeholder="username" />
25+
<input type="password" name="password" placeholder="password" />
26+
<div>
27+
<button value="cancel">Cancel</button>
28+
<button value="ok">OK</button>
29+
</div>
30+
</form>
31+
</dialog>
32+
<button id="showDialog">Show Dialog</button>
33+
</main>
34+
<script src="./index.js"></script>
35+
</body>
36+
</html>

‎49-html-buit-in-dialog/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const dialog = document.getElementById("dialog");
2+
const showDialogBtn = document.getElementById("showDialog");
3+
4+
showDialogBtn.addEventListener("click", () => {
5+
dialog.showModal();
6+
});
7+
8+
dialog.addEventListener("close", () => {
9+
console.log(dialog.returnValue);
10+
});

‎49-html-buit-in-dialog/style.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
body {
2+
box-sizing: border-box;
3+
padding: 0;
4+
margin: 0;
5+
font-family: Verdana, "PingFang SC", "Microsoft Yahei", sans-serif;
6+
}
7+
8+
main {
9+
display: grid;
10+
place-items: center;
11+
height: 100vh;
12+
background-color: hsl(0deg, 0%, 98%);
13+
}
14+
15+
input {
16+
padding: 12px;
17+
font-size: 14px;
18+
outline: none;
19+
}
20+
21+
/* dialog styles */
22+
dialog {
23+
border: none;
24+
border-radius: 8px;
25+
padding: 24px 32px;
26+
box-shadow: 0 0 48px hsl(0deg, 0%, 0%, 0.1);
27+
}
28+
29+
dialog::backdrop {
30+
background-color: hsl(0deg, 0%, 0%, 0.3);
31+
}
32+
33+
form {
34+
display: grid;
35+
gap: 24px;
36+
justify-content: end;
37+
}
38+
39+
button {
40+
border: none;
41+
border-radius: 4px;
42+
color: white;
43+
font-weight: bold;
44+
background: linear-gradient(45deg, hsl(218, 100%, 50%), hsl(187, 100%, 51%));
45+
padding: 12px 24px;
46+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /