aboutsummaryrefslogtreecommitdiff
path: root/build/mini-interactive-keyboard-with-pure-css
diff options
context:
space:
mode:
Diffstat (limited to 'build/mini-interactive-keyboard-with-pure-css')
-rw-r--r--build/mini-interactive-keyboard-with-pure-css/index.html82
1 files changed, 44 insertions, 38 deletions
diff --git a/build/mini-interactive-keyboard-with-pure-css/index.html b/build/mini-interactive-keyboard-with-pure-css/index.html
index f9c83ec..d52d775 100644
--- a/build/mini-interactive-keyboard-with-pure-css/index.html
+++ b/build/mini-interactive-keyboard-with-pure-css/index.html
@@ -1,62 +1,62 @@
<!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>Mini Interactive Keyboard with Pure 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 &darr;</a>
+ <a href="#menu">Menu &darr;</a>
</nav>
<main>
-<h1>Mini Interactive Keyboard with Pure CSS</h1>
+<h1 id="mini-interactive-keyboard-with-pure-css">Mini Interactive Keyboard with Pure CSS</h1>
+
<p>2020-05-13</p>
-<p>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 <a href="https://uglyduck.ca/fake-3d-elements-with-css/">faking 3D elements</a>, I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.</p>
-<h2>See it in action</h2>
-<p>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).</p>
+
+<p>Lately, I&#8217;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 <a href="https://uglyduck.ca/fake-3d-elements-with-css/">faking 3D elements</a>, I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.</p>
+
+<h2 id="see-it-in-action">See it in action</h2>
+
+<p>Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple&#8217;s magic keyboards (if that wasn&#8217;t already obvious).</p>
+
<p><img src="/public/images/undo-keyboard.png" alt="Undo keyboard with two buttons to click" /></p>
+
<p><a href="https://codepen.io/bradleytaunt/pen/PadQMP">Live CodePen Example</a></p>
-<p>So now that we have seen what we plan to build, let's break down the process of creating this stupid, fun project!</p>
-<h2>The HTML</h2>
+
+<p>So now that we have seen what we plan to build, let&#8217;s break down the process of creating this stupid, fun project!</p>
+
+<h2 id="the-html">The HTML</h2>
+
<p>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: </p>
+
<ul>
-<li>Keyboard base</li>
-<li>Command button</li>
-<li>'Z' letter button</li>
+<li><p>Keyboard base</p></li>
+<li><p>Command button</p></li>
+<li><p>&#8216;Z&#8217; letter button</p></li>
</ul>
-<pre><code>&lt;!-- This is keyboard main base --&gt;
-&lt;div class=&quot;base&quot;&gt;
- &lt;!-- Command Button --&gt;
- &lt;button class=&quot;command&quot;&gt;
- &lt;svg viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;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&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
- &lt;span&gt;command&lt;/span&gt;
- &lt;/button&gt;
+<h2 id="the-css">The CSS</h2>
- &lt;!-- &quot;Z&quot; Letter Button --&gt;
- &lt;button class=&quot;z&quot;&gt;
- &lt;span&gt;Z&lt;/span&gt;
- &lt;/button&gt;
+<p>Here is where all the magic happens. Let&#8217;s break these elements into their own sections, starting with the <strong>base styling</strong>:</p>
-&lt;/div&gt;
-</code></pre>
-<h2>The CSS</h2>
-<p>Here is where all the magic happens. Let's break these elements into their own sections, starting with the <strong>base styling</strong>:</p>
-<pre><code>/* Custom typeface */
-@import url(&quot;https://fonts.googleapis.com/css?family=Muli&quot;);
+<pre><code>&#47;* Custom typeface *&#47;
+@import url("https:&#47;&#47;fonts.googleapis.com&#47;css?family=Muli");
-/* Basic layout styling */
+&#47;* Basic layout styling *&#47;
body {
background: #d2dcff;
margin: 80px 0 40px;
}
</code></pre>
+
<p>We then tackle the basic <strong>keyboard base</strong> element:</p>
+
<pre><code>.base {
background: linear-gradient(180deg, #eee 0%, #d8d8d8 100%);
border-radius: 20px;
@@ -68,11 +68,11 @@ position: relative;
width: 620px;
}
-/* This pseudo element is used for more realistic drop-shadows */
+&#47;* This pseudo element is used for more realistic drop-shadows *&#47;
.base:after {
bottom: 0;
box-shadow: 0 10px 80px rgba(0,0,0,0.5);
-content: '';
+content: &#39;&#39;;
height: 50px;
left: 7.5%;
position: absolute;
@@ -80,7 +80,9 @@ width: 85%;
z-index: -1;
}
</code></pre>
+
<p>Next, we target all shared styles between the <strong>2 keyboard buttons</strong> to avoid repeating ourselves later on:</p>
+
<pre><code>.command, .z {
-webkit-appearance: none;
background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
@@ -98,17 +100,19 @@ z-index: -1;
}
.command span, .z span {
- font-family: 'Muli', 'Helvetica', sans-serif;
+ font-family: &#39;Muli&#39;, &#39;Helvetica&#39;, sans-serif;
}
-/* Styling when pressed */
+&#47;* Styling when pressed *&#47;
.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;
}
</code></pre>
+
<p>All that remains is to add the custom styling for each independent button:</p>
-<pre><code>/* Custom Command styling */
+
+<pre><code>&#47;* Custom Command styling *&#47;
.command svg {
height: 60px;
right: 15px;
@@ -126,7 +130,7 @@ z-index: -1;
width: 100%;
}
-/* Custom &quot;Z&quot; Letter styling */
+&#47;* Custom "Z" Letter styling *&#47;
.z {
width: 260px;
}
@@ -135,7 +139,9 @@ z-index: -1;
font-size: 150px;
}
</code></pre>
-<h2>Taking it further</h2>
+
+<h2 id="taking-it-further">Taking it further</h2>
+
<p>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.</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>