1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!doctype html>
<html lang="en">
<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;}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>
<a href="#menu">Menu ↓</a>
</nav>
<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");
/* 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;
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;
}
</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%);
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;
}
</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;
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;
}
</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>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://barf.btxx.org">barf</a>. <br>
Feeds: <a href="/atom.xml">Atom</a> & <a href="/rss.xml">RSS</a><br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
