mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-04-22 15:12:19 +02:00
👍 バルーンを追加
This commit is contained in:
BcRikko
parent
a8ed29a414
commit
590494a983
58
css/nes.css
58
css/nes.css
@ -486,4 +486,62 @@ dl.description > dt.-colon::after {
|
||||
dl.description > dd {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.balloon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
margin-bottom: 26px;
|
||||
box-shadow: 0 -4px #f7f7f7, 0 -8px #333, 4px 0 #f7f7f7, 4px -4px #333, 8px 0 #333, 0 4px #f7f7f7, 0 8px #333, -4px 0 #f7f7f7, -4px 4px #333, -8px 0 #333, -4px -4px #333, 4px 4px #333;
|
||||
}
|
||||
|
||||
.balloon::before, .balloon::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.balloon.-right::before, .balloon.-right::after {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.balloon.-right::before {
|
||||
bottom: -14px;
|
||||
width: 26px;
|
||||
height: 10px;
|
||||
background-color: #f7f7f7;
|
||||
border-right: 4px solid #333;
|
||||
border-left: 4px solid #333;
|
||||
}
|
||||
|
||||
.balloon.-right::after {
|
||||
bottom: -18px;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
margin-left: 8px;
|
||||
background-color: #f7f7f7;
|
||||
box-shadow: -4px 0 #333, 4px 0 #333, 4px 4px #f7f7f7, 0 4px #333, 8px 4px #333, 4px 8px #333, 8px 8px #333;
|
||||
}
|
||||
|
||||
.balloon.-left::before, .balloon.-left::after {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
.balloon.-left::before {
|
||||
bottom: -14px;
|
||||
width: 26px;
|
||||
height: 10px;
|
||||
background-color: #f7f7f7;
|
||||
border-right: 4px solid #333;
|
||||
border-left: 4px solid #333;
|
||||
}
|
||||
|
||||
.balloon.-left::after {
|
||||
bottom: -18px;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
margin-right: 8px;
|
||||
background-color: #f7f7f7;
|
||||
box-shadow: -4px 0 #333, 4px 0 #333, -4px 4px #f7f7f7, 0 4px #333, -8px 4px #333, -4px 8px #333, -8px 8px #333;
|
||||
}
|
||||
/*# sourceMappingURL=nes.css.map */
|
||||
File diff suppressed because one or more lines are too long
4
css/nes.min.css
vendored
4
css/nes.min.css
vendored
File diff suppressed because one or more lines are too long
10
index.html
10
index.html
@ -184,6 +184,16 @@
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<h2 class="title -is-3">Balloons</h2>
|
||||
<div class="balloon -right">
|
||||
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
|
||||
</div>
|
||||
<div class="balloon -left">
|
||||
<p>Hello NES.css</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
||||
@ -6,3 +6,4 @@
|
||||
@import "container.scss";
|
||||
@import "checkbox.scss";
|
||||
@import "description.scss";
|
||||
@import "balloon.scss";
|
||||
|
||||
94
scss/elements/balloon.scss
Normal file
94
scss/elements/balloon.scss
Normal file
@ -0,0 +1,94 @@
|
||||
.balloon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
margin-bottom: 26px;
|
||||
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $background-color,
|
||||
0 -8px $black,
|
||||
4px 0 $background-color,
|
||||
4px -4px $black,
|
||||
8px 0 $black,
|
||||
0 4px $background-color,
|
||||
0 8px $black,
|
||||
-4px 0 $background-color,
|
||||
-4px 4px $black,
|
||||
-8px 0 $black,
|
||||
-4px -4px $black,
|
||||
4px 4px $black;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.-right {
|
||||
&::before,
|
||||
&::after {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -14px;
|
||||
width: 26px;
|
||||
height: 10px;
|
||||
background-color: $background-color;
|
||||
border-right: 4px solid $black;
|
||||
border-left: 4px solid $black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -18px;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
margin-left: 8px;
|
||||
background-color: $background-color;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
-4px 0 $black,
|
||||
4px 0 $black,
|
||||
4px 4px $background-color,
|
||||
0 4px $black,
|
||||
8px 4px $black,
|
||||
4px 8px $black,
|
||||
8px 8px $black;
|
||||
}
|
||||
}
|
||||
|
||||
&.-left {
|
||||
&::before,
|
||||
&::after {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -14px;
|
||||
width: 26px;
|
||||
height: 10px;
|
||||
background-color: $background-color;
|
||||
border-right: 4px solid $black;
|
||||
border-left: 4px solid $black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -18px;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
margin-right: 8px;
|
||||
background-color: $background-color;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
-4px 0 $black,
|
||||
4px 0 $black,
|
||||
-4px 4px $background-color,
|
||||
0 4px $black,
|
||||
-8px 4px $black,
|
||||
-4px 8px $black,
|
||||
-8px 8px $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
style.css
16
style.css
@ -65,17 +65,17 @@ body {
|
||||
/* prettier-ignore */
|
||||
box-shadow:
|
||||
0 -3px #f7f7f7,
|
||||
0 -6px #000,
|
||||
0 -6px #333,
|
||||
3px 0 #f7f7f7,
|
||||
3px -3px #000,
|
||||
6px 0 #000,
|
||||
3px -3px #333,
|
||||
6px 0 #333,
|
||||
0 3px #f7f7f7,
|
||||
0 6px #000,
|
||||
0 6px #333,
|
||||
-3px 0 #f7f7f7,
|
||||
-3px 3px #000,
|
||||
-6px 0 #000,
|
||||
-3px -3px #000,
|
||||
3px 3px #000;
|
||||
-3px 3px #333,
|
||||
-6px 0 #333,
|
||||
-3px -3px #333,
|
||||
3px 3px #333;
|
||||
}
|
||||
|
||||
.github-link .balloon::before,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user