aboutsummaryrefslogtreecommitdiff
path: root/build/super-mario-blocks-css
diff options
context:
space:
mode:
Diffstat (limited to 'build/super-mario-blocks-css')
-rw-r--r--build/super-mario-blocks-css/index.html31
1 files changed, 2 insertions, 29 deletions
diff --git a/build/super-mario-blocks-css/index.html b/build/super-mario-blocks-css/index.html
index 9215eac..406c8df 100644
--- a/build/super-mario-blocks-css/index.html
+++ b/build/super-mario-blocks-css/index.html
@@ -3,11 +3,12 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Super Mario Blocks in CSS</title>
<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>
+<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}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>
@@ -16,30 +17,20 @@
<main>
<h1 id="super-mario-blocks-in-css">Super Mario Blocks in CSS</h1>
-
<p>2019-02-15</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 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 &#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>&#60;!-- Main parent block --&#62;
&#60;div class="mario-block"&#62;
@@ -57,9 +48,7 @@
&#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>&#60;div class="mario-block"&#62;
&#60;input type="checkbox" id="1" disabled&#62;
&#60;label for="1"&#62;
@@ -101,11 +90,8 @@
&#60;&#47;label&#62;
&#60;&#47;div&#62;
</code></pre>
-
<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;
@@ -122,9 +108,7 @@
z-index: -1;
}
</code></pre>
-
<p>Now to target the <code>label</code> elements found inside the block:</p>
-
<pre><code>&#47;* Style checkbox label accordingly *&#47;
.mario-block label {
background: #F88D2E;
@@ -136,9 +120,7 @@
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;
@@ -162,11 +144,8 @@
right: 4px;
}
</code></pre>
-
<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;
}
@@ -183,11 +162,8 @@
z-index: 1;
}
</code></pre>
-
<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>&#47;* Mario block in `checked` state *&#47;
.mario-block input:checked + label {
background: #885818;
@@ -226,11 +202,8 @@
transform: rotate(-45deg);
}
</code></pre>
-
<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>