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
148
149
|
[[!meta title="Mini Interactive Keyboard with Pure CSS"]]
[[!meta date="2020-05-13"]]
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 [faking 3D elements](https://uglyduck.ca/fake-3d-elements-with-css/), I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.
## See it in action
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).
[Live CodePen Example](https://codepen.io/bradleytaunt/pen/PadQMP)
So now that we have seen what we plan to build, let's break down the process of creating this stupid, fun project!
## The HTML
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:
- Keyboard base
- Command button
- 'Z' letter button
---
<!-- 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>
<!-- "Z" Letter Button -->
<button class="z">
<span>Z</span>
</button>
</div>
## The CSS
Here is where all the magic happens. Let's break these elements into their own sections, starting with the **base styling**:
/* Custom typeface */
@import url("https://fonts.googleapis.com/css?family=Muli");
/* Basic layout styling */
body {
background: #d2dcff;
margin: 80px 0 40px;
}
We then tackle the basic **keyboard base** element:
.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;
}
Next, we target all shared styles between the **2 keyboard buttons** to avoid repeating ourselves later on:
.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;
}
All that remains is to add the custom styling for each independent button:
/* 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;
}
## Taking it further
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.
|
