aboutsummaryrefslogtreecommitdiff
path: root/build/super-mario-blocks-css/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'build/super-mario-blocks-css/index.html')
-rw-r--r--build/super-mario-blocks-css/index.html197
1 files changed, 113 insertions, 84 deletions
diff --git a/build/super-mario-blocks-css/index.html b/build/super-mario-blocks-css/index.html
index 2f51051..9215eac 100644
--- a/build/super-mario-blocks-css/index.html
+++ b/build/super-mario-blocks-css/index.html
@@ -1,113 +1,131 @@
<!doctype html>
-<html lang="en" id="top">
+<html lang="en">
<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>
+ <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
+ <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
+<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
- <a href="#menu">Menu &darr;</a>
+ <a href="#menu">Menu &darr;</a>
</nav>
<main>
-<h1>Super Mario Blocks in CSS</h1>
+<h1 id="super-mario-blocks-in-css">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>Just because we can, let&#8217;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>
+
+<h2 id="the-html">The HTML</h2>
+
+<p>The set of Mario blocks doesn&#8217;t require a huge amount of effort for it&#8217;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>
+<li>Inner label divs to represent the block &#8220;dots&#8221;</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>&lt;!-- Main parent block --&gt;
-&lt;div class=&quot;mario-block&quot;&gt;
-
- &lt;!-- Checkbox input (disabled by default) --&gt;
- &lt;input type=&quot;checkbox&quot; id=&quot;1&quot; disabled&gt;
-
- &lt;!-- Checkbox label --&gt;
- &lt;label for=&quot;1&quot;&gt;
- &lt;!-- Inner dots for blocks --&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;/label&gt;
-
-&lt;/div&gt;
+
+<pre><code>&#60;!-- Main parent block --&#62;
+&#60;div class="mario-block"&#62;
+
+ &#60;!-- Checkbox input (disabled by default) --&#62;
+ &#60;input type="checkbox" id="1" disabled&#62;
+
+ &#60;!-- Checkbox label --&#62;
+ &#60;label for="1"&#62;
+ &#60;!-- Inner dots for blocks --&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;&#47;label&#62;
+
+&#60;&#47;div&#62;
</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>&lt;div class=&quot;mario-block&quot;&gt;
- &lt;input type=&quot;checkbox&quot; id=&quot;1&quot; disabled&gt;
- &lt;label for=&quot;1&quot;&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;/label&gt;
-&lt;/div&gt;
-
-&lt;div class=&quot;mario-block&quot;&gt;
- &lt;input type=&quot;checkbox&quot; id=&quot;2&quot; disabled&gt;
- &lt;label for=&quot;2&quot;&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;/label&gt;
-&lt;/div&gt;
-
-&lt;div class=&quot;mario-block mario-block--question&quot;&gt;
- &lt;input type=&quot;checkbox&quot; id=&quot;3&quot;&gt;
- &lt;label for=&quot;3&quot;&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;question-mark&quot;&gt;&lt;/div&gt;
- &lt;/label&gt;
-&lt;/div&gt;
-
-&lt;div class=&quot;mario-block&quot;&gt;
- &lt;input type=&quot;checkbox&quot; id=&quot;4&quot; disabled&gt;
- &lt;label for=&quot;4&quot;&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt;
- &lt;/label&gt;
-&lt;/div&gt;
+
+<pre><code>&#60;div class="mario-block"&#62;
+ &#60;input type="checkbox" id="1" disabled&#62;
+ &#60;label for="1"&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;&#47;label&#62;
+&#60;&#47;div&#62;
+
+&#60;div class="mario-block"&#62;
+ &#60;input type="checkbox" id="2" disabled&#62;
+ &#60;label for="2"&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;&#47;label&#62;
+&#60;&#47;div&#62;
+
+&#60;div class="mario-block mario-block--question"&#62;
+ &#60;input type="checkbox" id="3"&#62;
+ &#60;label for="3"&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="question-mark"&#62;&#60;&#47;div&#62;
+ &#60;&#47;label&#62;
+&#60;&#47;div&#62;
+
+&#60;div class="mario-block"&#62;
+ &#60;input type="checkbox" id="4" disabled&#62;
+ &#60;label for="4"&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;div class="dot"&#62;&#60;&#47;div&#62;
+ &#60;&#47;label&#62;
+&#60;&#47;div&#62;
</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 */
+
+<h2 id="the-css">The CSS</h2>
+
+<p>First we need to remove the default <code>checkbox</code> input styling and place all new styling on it&#8217;s corresponding <code>label</code>.</p>
+
+<pre><code>&#47;* Mario block parent div *&#47;
.mario-block {
display: inline-block;
height: 80px;
- margin-right: -7px; /* Fixes inline-block margin bug */
+ margin-right: -7px; &#47;* Fixes inline-block margin bug *&#47;
position: relative;
width: 80px;
}
-/* Hide default checkbox input */
+&#47;* Hide default checkbox input *&#47;
.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 */
+
+<pre><code>&#47;* Style checkbox label accordingly *&#47;
.mario-block label {
background: #F88D2E;
border: 4px solid #070000;
@@ -118,7 +136,9 @@
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;
@@ -142,13 +162,16 @@
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>
+
+<h3 id="punch-able-block">Punch-able block</h3>
+
+<p>Now we need to include the &#8220;question mark&#8221; SVG and custom CSS for the interactive Mario block. You can download a copy 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-image: url(&#39;&#47;public&#47;images&#47;mario-block-question-mark.svg&#39;);
background-position: center;
background-repeat: no-repeat;
background-size: 40px;
@@ -160,31 +183,34 @@
z-index: 1;
}
</code></pre>
-<h3>The last piece</h3>
+
+<h3 id="the-last-piece">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 */
+
+<pre><code>&#47;* Mario block in `checked` state *&#47;
.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 */
+&#47;* Hide both the default dots and question mark svg on checked *&#47;
.mario-block input:checked + label .dot,
.mario-block input:checked + label .question-mark {
display: none;
}
-/* Shared pseudo element styling */
+&#47;* Shared pseudo element styling *&#47;
.mario-block input:checked + label:before,
.mario-block input:checked + label:after {
- content: '';
+ content: &#39;&#39;;
height: 20px;
position: absolute;
transform: rotate(45deg);
width: 20px;
}
-/* Right dash */
+&#47;* Right dash *&#47;
.mario-block input:checked + label:before {
border-right: 4px solid #070000;
right: 18px;
@@ -192,7 +218,7 @@
transform: rotate(45deg);
}
-/* Left dash */
+&#47;* Left dash *&#47;
.mario-block input:checked + label:after {
border-left: 4px solid #070000;
left: 18px;
@@ -200,9 +226,12 @@
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>
+
+<p>That&#8217;s it!</p>
+
+<h2 id="taking-it-further">Taking it further</h2>
+
+<p>As always, you can take this concept and flesh it out even further. I was trying to mimic the &#8220;pixel&#8221; 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">