diff options
Diffstat (limited to 'build/super-mario-blocks-css/index.html')
| -rw-r--r-- | build/super-mario-blocks-css/index.html | 197 |
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 ↓</a> + <a href="#menu">Menu ↓</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’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’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> +<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> + +<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> + +<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 */ + +<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’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 */ + margin-right: -7px; /* Fixes inline-block margin bug */ position: relative; width: 80px; } -/* Hide default checkbox input */ +/* 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 */ + +<pre><code>/* Style checkbox label accordingly */ .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 “question mark” 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('/public/images/mario-block-question-mark.svg'); 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>/* 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 */ +/* 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 */ +/* Shared pseudo element styling */ .mario-block input:checked + label:before, .mario-block input:checked + label:after { - content: ''; + content: ''; height: 20px; position: absolute; transform: rotate(45deg); width: 20px; } -/* Right dash */ +/* Right dash */ .mario-block input:checked + label:before { border-right: 4px solid #070000; right: 18px; @@ -192,7 +218,7 @@ transform: rotate(45deg); } -/* Left dash */ +/* Left dash */ .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’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 “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"> |