From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001
From: Bradley Taunt <bt@btxx.org>
Date: Thu, 6 Jun 2024 08:05:12 -0400
Subject: Initial commit

---
 posts/super-mario-blocks-css.md | 222 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 222 insertions(+)
 create mode 100644 posts/super-mario-blocks-css.md

(limited to 'posts/super-mario-blocks-css.md')

diff --git a/posts/super-mario-blocks-css.md b/posts/super-mario-blocks-css.md
new file mode 100644
index 0000000..309b719
--- /dev/null
+++ b/posts/super-mario-blocks-css.md
@@ -0,0 +1,222 @@
+# Super Mario Blocks in CSS
+
+2019-02-15
+
+Just because we can, let's make a quick demo on how to build interactive elements based off the original Mario punch blocks.
+
+What our final product will look like:
+
+![Mario blocks cretaed with CSS](/public/images/mario-block.png)
+
+[Live CodePen Example](https://codepen.io/bradleytaunt/pen/JjEPOVe)
+
+## The HTML
+
+The set of Mario blocks doesn't require a huge amount of effort for it's `html` structure, we only need:
+
+- Parent div for each block
+- Checkbox input
+- Checkbox label
+- Inner label divs to represent the block "dots"
+
+**Sidenote**: This is only how *I* 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.
+
+
+    <!-- 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>
+
+
+Now we just add as many default blocks we want, along with the interactive punch block (`.mario-block--question`):
+
+
+    <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>
+
+
+## The CSS
+
+First we need to remove the default `checkbox` input styling and place all new styling on it's corresponding `label`.
+
+
+    /* 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;
+    }
+
+
+Now to target the `label` elements found inside the block:
+
+
+    /* 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%;
+    }
+
+
+Next we style our included `.dots` elements to be placed in the four corners of each block:
+
+
+    .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;
+    }
+
+
+### Punch-able block
+
+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 `svg` question mark I created.
+
+
+    .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;
+    }
+
+
+### The last piece
+
+The last item we need to design is the `checked` state of the interactive question mark block. The extra inner dark dashes will be added as `pseudo` elements:
+
+
+    /* 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);
+    }
+
+
+That's it!
+
+## Taking it further
+
+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 `filter` properties.
-- 
cgit v1.2.3-54-g00ecf