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.html24
1 files changed, 2 insertions, 22 deletions
diff --git a/build/mini-interactive-keyboard-with-pure-css/index.html b/build/mini-interactive-keyboard-with-pure-css/index.html
index d52d775..28c19c2 100644
--- a/build/mini-interactive-keyboard-with-pure-css/index.html
+++ b/build/mini-interactive-keyboard-with-pure-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>Mini Interactive Keyboard with Pure 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,35 +17,22 @@
<main>
<h1 id="mini-interactive-keyboard-with-pure-css">Mini Interactive Keyboard with Pure CSS</h1>
-
<p>2020-05-13</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&#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><p>Keyboard base</p></li>
<li><p>Command button</p></li>
<li><p>&#8216;Z&#8217; letter button</p></li>
</ul>
-
<h2 id="the-css">The CSS</h2>
-
<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>
-
<pre><code>&#47;* Custom typeface *&#47;
@import url("https:&#47;&#47;fonts.googleapis.com&#47;css?family=Muli");
@@ -54,9 +42,7 @@ 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;
@@ -80,9 +66,7 @@ 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%);
@@ -109,9 +93,7 @@ z-index: -1;
margin: 25px 0 0 20px;
}
</code></pre>
-
<p>All that remains is to add the custom styling for each independent button:</p>
-
<pre><code>&#47;* Custom Command styling *&#47;
.command svg {
height: 60px;
@@ -139,9 +121,7 @@ z-index: -1;
font-size: 150px;
}
</code></pre>
-
<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>