diff options
Diffstat (limited to 'build/super-mario-blocks-css/index.html')
| -rw-r--r-- | build/super-mario-blocks-css/index.html | 31 |
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’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’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"> @@ -57,9 +48,7 @@ </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"> @@ -101,11 +90,8 @@ </label> </div> </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’s corresponding <code>label</code>.</p> - <pre><code>/* Mario block parent div */ .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>/* Style checkbox label accordingly */ .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 “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; } @@ -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>/* Mario block in `checked` state */ .mario-block input:checked + label { background: #885818; @@ -226,11 +202,8 @@ transform: rotate(-45deg); } </code></pre> - <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> |