1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
|
<!doctype html>
<html lang="en" id="top">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>Super Mario Blocks in CSS</title>
<link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1>Super Mario Blocks in CSS</h1>
<p>2019-02-15</p>
<p>Just because we can, let's make a quick demo on how to build interactive elements based off the original Mario punch blocks.</p>
<p>What our final product will look like:</p>
<p><img src="/public/images/mario-block.png" alt="Mario blocks cretaed with CSS" /></p>
<p><a href="https://codepen.io/bradleytaunt/pen/JjEPOVe">Live CodePen Example</a></p>
<h2>The HTML</h2>
<p>The set of Mario blocks doesn't require a huge amount of effort for it's <code>html</code> structure, we only need:</p>
<ul>
<li>Parent div for each block</li>
<li>Checkbox input</li>
<li>Checkbox label</li>
<li>Inner label divs to represent the block "dots"</li>
</ul>
<p><strong>Sidenote</strong>: This is only how <em>I</em> chose to add the inner dots to the Mario blocks. There are many other ways to create these, so please feel free to implement them however you see fit.</p>
<pre><code><!-- Main parent block -->
<div class="mario-block">
<!-- Checkbox input (disabled by default) -->
<input type="checkbox" id="1" disabled>
<!-- Checkbox label -->
<label for="1">
<!-- Inner dots for blocks -->
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</label>
</div>
</code></pre>
<p>Now we just add as many default blocks we want, along with the interactive punch block (<code>.mario-block--question</code>):</p>
<pre><code><div class="mario-block">
<input type="checkbox" id="1" disabled>
<label for="1">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</label>
</div>
<div class="mario-block">
<input type="checkbox" id="2" disabled>
<label for="2">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</label>
</div>
<div class="mario-block mario-block--question">
<input type="checkbox" id="3">
<label for="3">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="question-mark"></div>
</label>
</div>
<div class="mario-block">
<input type="checkbox" id="4" disabled>
<label for="4">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</label>
</div>
</code></pre>
<h2>The CSS</h2>
<p>First we need to remove the default <code>checkbox</code> input styling and place all new styling on it's corresponding <code>label</code>.</p>
<pre><code>/* Mario block parent div */
.mario-block {
display: inline-block;
height: 80px;
margin-right: -7px; /* Fixes inline-block margin bug */
position: relative;
width: 80px;
}
/* Hide default checkbox input */
.mario-block input {
position: absolute;
visibility: hidden;
z-index: -1;
}
</code></pre>
<p>Now to target the <code>label</code> elements found inside the block:</p>
<pre><code>/* Style checkbox label accordingly */
.mario-block label {
background: #F88D2E;
border: 4px solid #070000;
box-shadow: inset -4px -4px 0 #965117, inset 4px 4px 0 #FAB89B;
display: block;
height: 100%;
position: relative;
width: 100%;
}
</code></pre>
<p>Next we style our included <code>.dots</code> elements to be placed in the four corners of each block:</p>
<pre><code>.mario-block .dot {
background: #070000;
height: 5px;
position: absolute;
width: 5px;
}
.mario-block .dot:nth-child(1) {
left: 4px;
top: 4px;
}
.mario-block .dot:nth-child(2) {
right: 4px;
top: 4px;
}
.mario-block .dot:nth-child(3) {
bottom: 4px;
left: 4px;
}
.mario-block .dot:nth-child(4) {
bottom: 4px;
right: 4px;
}
</code></pre>
<h3>Punch-able block</h3>
<p>Now we need to include the "question mark" SVG and custom CSS for the interactive Mario block. You can <a href="/public/images/mario-block-question-mark.svg">download a copy</a> of the custom <code>svg</code> question mark I created.</p>
<pre><code>.mario-block--question label {
cursor: pointer;
}
.mario-block--question .question-mark {
background-image: url('/public/images/mario-block-question-mark.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 40px;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
</code></pre>
<h3>The last piece</h3>
<p>The last item we need to design is the <code>checked</code> state of the interactive question mark block. The extra inner dark dashes will be added as <code>pseudo</code> elements:</p>
<pre><code>/* Mario block in `checked` state */
.mario-block input:checked + label {
background: #885818;
box-shadow: inset -4px -4px 0 #68400B, inset 4px 4px 0 #FAB89B;
}
/* Hide both the default dots and question mark svg on checked */
.mario-block input:checked + label .dot,
.mario-block input:checked + label .question-mark {
display: none;
}
/* Shared pseudo element styling */
.mario-block input:checked + label:before,
.mario-block input:checked + label:after {
content: '';
height: 20px;
position: absolute;
transform: rotate(45deg);
width: 20px;
}
/* Right dash */
.mario-block input:checked + label:before {
border-right: 4px solid #070000;
right: 18px;
top: 15px;
transform: rotate(45deg);
}
/* Left dash */
.mario-block input:checked + label:after {
border-left: 4px solid #070000;
left: 18px;
top: 15px;
transform: rotate(-45deg);
}
</code></pre>
<p>That's it!</p>
<h2>Taking it further</h2>
<p>As always, you can take this concept and flesh it out even further. I was trying to mimic the "pixel" style of the original Mario games, but you could make the lighting and depth more realistic with some extra subtle gradients or <code>filter</code> properties.</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
