diff options
Diffstat (limited to 'build/mini-interactive-keyboard-with-pure-css')
| -rw-r--r-- | build/mini-interactive-keyboard-with-pure-css/index.html | 24 |
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’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’s magic keyboards (if that wasn’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 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>‘Z’ letter button</p></li> </ul> - <h2 id="the-css">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("https://fonts.googleapis.com/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>/* Custom Command styling */ .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> |