diff options
Diffstat (limited to 'build/mini-interactive-keyboard-with-pure-css/index.html')
| -rw-r--r-- | build/mini-interactive-keyboard-with-pure-css/index.html | 82 |
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 ↓</a> + <a href="#menu">Menu ↓</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’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>The HTML</h2> + +<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>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>‘Z’ letter button</p></li> </ul> -<pre><code><!-- 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> +<h2 id="the-css">The CSS</h2> - <!-- "Z" Letter Button --> - <button class="z"> - <span>Z</span> - </button> +<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> -</div> -</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("https://fonts.googleapis.com/css?family=Muli"); +<pre><code>/* Custom typeface */ +@import url("https://fonts.googleapis.com/css?family=Muli"); -/* Basic layout styling */ +/* Basic layout styling */ 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 */ +/* 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: ''; +content: ''; 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: 'Muli', 'Helvetica', sans-serif; } -/* Styling when pressed */ +/* 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; } </code></pre> + <p>All that remains is to add the custom styling for each independent button:</p> -<pre><code>/* Custom Command styling */ + +<pre><code>/* Custom Command styling */ .command svg { height: 60px; right: 15px; @@ -126,7 +130,7 @@ z-index: -1; width: 100%; } -/* Custom "Z" Letter styling */ +/* Custom "Z" Letter styling */ .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> |