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/mini-interactive-keyboard-with-pure-css.md | 148 +++++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 posts/mini-interactive-keyboard-with-pure-css.md

(limited to 'posts/mini-interactive-keyboard-with-pure-css.md')

diff --git a/posts/mini-interactive-keyboard-with-pure-css.md b/posts/mini-interactive-keyboard-with-pure-css.md
new file mode 100644
index 0000000..ac60d1b
--- /dev/null
+++ b/posts/mini-interactive-keyboard-with-pure-css.md
@@ -0,0 +1,148 @@
+# Mini Interactive Keyboard with Pure CSS
+
+2020-05-13
+
+Lately, I've become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of [faking 3D elements](https://uglyduck.ca/fake-3d-elements-with-css/), I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.
+
+## See it in action
+
+Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple's magic keyboards (if that wasn't already obvious).
+
+![Undo keyboard with two buttons to click](/public/images/undo-keyboard.png)
+
+[Live CodePen Example](https://codepen.io/bradleytaunt/pen/PadQMP)
+
+So now that we have seen what we plan to build, let's break down the process of creating this stupid, fun project!
+
+## The HTML
+
+The core skeleton of this project is very simple, since the keyboard consists of only 2 interactive buttons on top of a basic base element: 
+
+- Keyboard base
+- Command button
+- 'Z' letter button
+
+
+    <!-- This is keyboard main base -->
+    <div class="base">
+    
+        <!-- Command Button -->
+        <button class="command"> 
+            <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>
+            <span>command</span>
+        </button>
+    
+        <!-- "Z" Letter Button -->
+        <button class="z">
+            <span>Z</span>
+        </button>
+    
+    </div>
+
+
+## The CSS
+
+Here is where all the magic happens. Let's break these elements into their own sections, starting with the **base styling**:
+
+
+    /* Custom typeface */
+    @import url("https://fonts.googleapis.com/css?family=Muli");
+    
+    /* Basic layout styling */
+    body {
+    background: #d2dcff;
+    margin: 80px 0 40px;
+    }
+
+
+We then tackle the basic **keyboard base** element:
+
+
+    .base {
+    background: linear-gradient(180deg, #eee 0%, #d8d8d8 100%);
+    border-radius: 20px;
+    box-shadow: inset 0 3px 5px rgba(255,255,255,0.3), inset 0 1px 3px rgba(255,255,255,0.5), 0 10px 0 #afafaf;
+    display: flex;
+    height: 310px;
+    margin: 0 auto;
+    position: relative;
+    width: 620px;
+    }
+    
+    /* This pseudo element is used for more realistic drop-shadows */
+    .base:after {
+    bottom: 0;
+    box-shadow: 0 10px 80px rgba(0,0,0,0.5);
+    content: '';
+    height: 50px;
+    left: 7.5%;
+    position: absolute;
+    width: 85%;
+    z-index: -1;
+    }
+
+
+Next, we target all shared styles between the **2 keyboard buttons** to avoid repeating ourselves later on:
+
+
+    .command, .z {
+        -webkit-appearance: none;
+        background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+        border: 0;
+        border-radius: 20px;
+        box-shadow: inset 0 1px 3px rgba(255,255,255,0.5), 0 10px 0 #c9c9c9, 0 10px 6px rgba(0,0,0,0.3), 0 12px 8px rgba(0,0,0,0.5);
+        cursor: pointer;
+        display: inline-block;
+        height: 260px;
+        margin: 15px 0 0 20px;
+        outline: 0;
+        position: relative;
+        width: 300px;
+        z-index: 2;
+    }
+    
+    .command span, .z span {
+        font-family: 'Muli', 'Helvetica', sans-serif;
+    }
+    
+    /* Styling when pressed */
+    .command:active, .z:active {
+        box-shadow: inset 0 10px 10px rgba(0,0,0,0.2), inset 0 10px 30px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.6);
+        margin: 25px 0 0 20px;
+    }
+
+
+All that remains is to add the custom styling for each independent button:
+
+
+    /* Custom Command styling */
+    .command svg {
+        height: 60px;
+        right: 15px;
+        position: absolute;
+        stroke: #9f9f9f;
+        top: 15px;
+        width: 60px;
+    }
+    .command span {
+        bottom: 15px;
+        color: #9f9f9f;
+        font-size: 58px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+    }
+    
+    /* Custom "Z" Letter styling */
+    .z {
+        width: 260px;
+    }
+    .z span {
+        color: #9f9f9f;
+        font-size: 150px;
+    }
+
+
+## Taking it further
+
+You could easily improve upon this concept by rendering an entire interactive keyboard, if you so desired. But this is maybe something I would tackle at a later date when I have a little more free time 😉 For now, a simple mini undo keyboard is fun enough to play with.
-- 
cgit v1.2.3-54-g00ecf