Virtual Apple Keyboard
Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Virtual Apple Keyboard using HTML, CSS and JavaScript. You can use this effect on your website/portfolio to showcase any skills/features. This will be a step-by-step guide. Let's get started 🚀.
Let's go step by step:
Step 1: HTML Code
<div class="keyboard" ontouchstart="">
<div class="row"><button type="button" class="btn0"><span class="xs">esc</span>
</button><button type="button" class="btn0"><span class="xs noxscale"><span class="emoji"></span></span><span class="lr xxxs">F1</span>
</button><button type="button" class="btn0"><span class="xs noxscale"><span class="emoji"></span></span><span class="lr xxxs">F2</span>
</button><button type="button" class="btn0"><span class="xs noxscale"><span class="cascade"></span><span class="block"></span></span><span class="lr xxxs">F3</span>
</button><button type="button" class="btn0"><span class="xxxs noxscale"><span class="apps"></span></span><span class="lr xxxs">F4</span>
</button><button type="button" class="btn0"><span class="lr xxxs">F5</span>
</button><button type="button" class="btn0"><span class="lr xxxs">F6</span>
</button><button type="button" class="btn0"><span class="sm"><span class="left"></span><span class="left"></span></span><span class="lr xxxs">F7</span>
</button><button type="button" class="btn0"><span class="sm"><span class="right"></span><span class="pause"></span></span><span class="lr xxxs">F8</span>
</button><button type="button" class="btn0"><span class="sm"><span class="right"></span><span class="right"></span></span><span class="lr xxxs">F9</span>
</button><button type="button" class="btn0"><span class="xs noxscale"><span class="emoji"></span></span><span class="lr xxxs">F10</span>
</button><button type="button" class="btn0"><span class="xs noxscale"><span class="emoji"></span></span><span class="lr xxxs">F11</span>
</button><button type="button" class="btn0"><span class="xs noxscale"><span class="emoji"></span></span><span class="lr xxxs">F12</span>
</button><button type="button" class="btn0"><span class="xs noxscale">⏏</span>
</button>
</div>
<div class="row"><button type="button" class="btn1"><span class="lr xxxs">F13</span>
</button><button type="button" class="btn1"><span class="lr xxxs">F14</span>
</button><button type="button" class="btn1"><span class="lr xxxs">F15</span>
</button>
</div>
<div class="row"><button type="button" class="btn1"><span class="lr xxxs">F16</span>
</button><button type="button" class="btn1"><span class="lr xxxs">F17</span>
</button><button type="button" class="btn1"><span class="lr xxxs">F18</span>
</button><button type="button" class="btn1"><span class="lr xxxs">F19</span>
</button>
</div>
<div class="row"><button type="button" class="btn2"><span class="sm">~<br/>`</span>
</button><button type="button" class="btn2"><span class="sm">!<br/>1</span>
</button><button type="button" class="btn2"><span class="sm">@<br/>2</span>
</button><button type="button" class="btn2"><span class="sm">#<br/>3</span>
</button><button type="button" class="btn2"><span class="sm">$<br/>4</span>
</button><button type="button" class="btn2"><span class="sm">%<br/>5</span>
</button><button type="button" class="btn2"><span class="sm">^<br/>6</span>
</button><button type="button" class="btn2"><span class="sm">&<br/>7</span>
</button><button type="button" class="btn2"><span class="sm">*<br/>8</span>
</button><button type="button" class="btn2"><span class="sm">(<br/>9</span>
</button><button type="button" class="btn2"><span class="sm">)<br/>0</span>
</button><button type="button" class="btn2"><span class="sm">_<br/>-</span>
</button><button type="button" class="btn2"><span class="sm">+<br/>=</span>
</button><button type="button" class="btn3"><span class="lr xs">delete</span>
</button>
</div>
<div class="row"><button type="button" class="btn2"><span class="xs">fn</span>
</button><button type="button" class="btn2"><span class="xs">home</span>
</button><button type="button" class="btn2"><span class="xs">page up</span>
</button>
</div>
<div class="row"><button type="button" class="btn2"><span class="xs">clear</span>
</button><button type="button" class="btn2"><span>=</span>
</button><button type="button" class="btn2"><span>/</span>
</button><button type="button" class="btn2"><span>*</span>
</button>
</div>
<div class="row"><button type="button" class="btn3"><span class="ll xs">tab</span>
</button><button type="button" class="btn2"><span>Q</span>
</button><button type="button" class="btn2"><span>W</span>
</button><button type="button" class="btn2"><span>E</span>
</button><button type="button" class="btn2"><span>R</span>
</button><button type="button" class="btn2"><span>T</span>
</button><button type="button" class="btn2"><span>Y</span>
</button><button type="button" class="btn2"><span>U</span>
</button><button type="button" class="btn2"><span>I</span>
</button><button type="button" class="btn2"><span>O</span>
</button><button type="button" class="btn2"><span>P</span>
</button><button type="button" class="btn2"><span class="sm">{<br/>[</span>
</button><button type="button" class="btn2"><span class="sm">}<br/>]</span>
</button><button type="button" class="btn2"><span class="sm">|<br/>\</span>
</button>
</div>
<div class="row"><button type="button" class="btn2"><span class="xs noxpad">delete⌦</span>
</button><button type="button" class="btn2"><span class="xs">end</span>
</button><button type="button" class="btn2"><span class="xs">page down</span>
</button>
</div>
<div class="row"><button type="button" class="btn2"><span>7</span>
</button><button type="button" class="btn2"><span>8</span>
</button><button type="button" class="btn2"><span>9</span>
</button><button type="button" class="btn2"><span>-</span>
</button>
</div>
<div class="row"><button type="button" id="caps-lock" class="btn4"><span class="ul xs">•</span><span class="ll xs">caps lock</span>
</button><button type="button" class="btn2"><span>A</span>
</button><button type="button" class="btn2"><span>S</span>
</button><button type="button" class="btn2"><span>D</span>
</button><button type="button" class="btn2"><span>F</span><span class="bump"></span>
</button><button type="button" class="btn2"><span>G</span>
</button><button type="button" class="btn2"><span>H</span>
</button><button type="button" class="btn2"><span>J</span><span class="bump"></span>
</button><button type="button" class="btn2"><span>K</span>
</button><button type="button" class="btn2"><span>L</span>
</button><button type="button" class="btn2"><span class="sm">:<br/>;</span>
</button><button type="button" class="btn2"><span class="sm">"<br/>'</span>
</button><button type="button" class="btn4"><span class="lr xs">return</span>
</button>
</div>
<div class="row"></div>
<div class="row"><button type="button" class="btn2"><span>4</span>
</button><button type="button" class="btn2"><span>5</span><span class="bump"></span>
</button><button type="button" class="btn2"><span>6</span>
</button><button type="button" class="btn2"><span>+</span>
</button>
</div>
<div class="row"><button type="button" class="btn5"><span class="ll xs">shift</span>
</button><button type="button" class="btn2"><span>Z</span>
</button><button type="button" class="btn2"><span>X</span>
</button><button type="button" class="btn2"><span>C</span>
</button><button type="button" class="btn2"><span>V</span>
</button><button type="button" class="btn2"><span>B</span>
</button><button type="button" class="btn2"><span>N</span>
</button><button type="button" class="btn2"><span>M</span>
</button><button type="button" class="btn2"><span class="sm"><<br/>,</span>
</button><button type="button" class="btn2"><span class="sm">><br/>.</span>
</button><button type="button" class="btn2"><span class="sm">?<br/>/</span>
</button><button type="button" class="btn5"><span class="lr xs">shift</span>
</button>
</div>
<div class="row"><button type="button" class="btn2"><span><span class="up"></span></span></button>
</div>
<div class="row"><button type="button" class="btn2"><span>1</span>
</button><button type="button" class="btn2"><span>2</span>
</button><button type="button" class="btn2"><span>3</span>
</button><button type="button" class="btn10"><span class="lr xs">enter</span>
</button>
</div>
<div class="row"><button type="button" class="btn7"><span class="ll xs">control</span>
</button><button type="button" class="btn6"><span class="ul xxs">alt</span><span class="ll xs">option</span>
</button><button type="button" class="btn7"><span class="ll xs">command</span><span class="lr xs noxscale">⌘</span>
</button><button type="button" class="btn-longest"><span></span>
</button><button type="button" class="btn7"><span class="ll xs noxscale">⌘</span><span class="lr xs">command</span>
</button><button type="button" class="btn6"><span class="ur xxs">alt</span><span class="lr xs">option</span>
</button><button type="button" class="btn7"><span class="lr xs">control</span>
</button>
</div>
<div class="row"><button type="button" class="btn2"><span><span class="left"></span></span></button><button type="button" class="btn2"><span><span class="down"></span></span></button><button type="button" class="btn2"><span><span class="right"></span></span></button>
</div>
<div class="row"><button type="button" class="btn9"><span>0</span>
</button><button type="button" class="btn8"><span>.</span>
</button>
</div>
</div>Step 2: CSS Code
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: 16px;
}
body, button {
font: 1em -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
button {
background-color: #eee;
border: 0;
border-radius: 0.125em;
box-shadow:
-0.2em -0.125em 0.125em rgba(0, 0, 0, 0.25),
0 0 0 0.04em rgba(0, 0, 0, 0.3),
0.02em 0.02em 0.02em rgba(0, 0, 0, 0.4) inset,
-0.05em -0.05em 0.02em rgba(255, 255, 255, 0.8) inset;
color: #777;
font-size: 1em;
outline: 0;
position: relative;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button:not(:last-of-type) {
margin-right: 0.35em;
}
button:active {
box-shadow:
0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2),
0 0 0 0.05em rgba(0, 0, 0, 0.4),
-0.025em -0.05em 0.025em rgba(255, 255, 255, 0.8) inset;
}
button span {
display: inline-block;
}
button > span {
margin: auto;
padding: 0.2em 0.375em;
position: absolute;
top: 50%;
left: 0;
font-size: 0.5em;
line-height: 2;
transform: translateY(-50%) scaleX(0.875);
width: 100%;
}
/* Keyboard */
.keyboard {
background-image: linear-gradient(90deg, #888, #ccc);
border-radius: 0.5em;
box-shadow: -1em -1em 1.5em rgba(0, 0, 0, 0.6), 0 0 0 1px #aaa inset;
display: grid;
grid-template-columns: 21.25em 4.125em 5.65em;
grid-template-rows: 0.75em 1.125em 1.125em 1.125em 1.125em 1.375em;
grid-gap: 0.375em 0.875em;
font-size: 36px;
margin: 3em auto 0 auto;
padding: 0.25em;
width: 33.25em;
height: 9em;
}
.row:nth-of-type(14) {
text-align: center;
}
.row:nth-of-type(n + 14):nth-of-type(-3n + 17) {
transform: translateY(0.25em);
}
.bump {
border-radius: 0.1em;
box-shadow: -0.05em -0.02em 0 0.05em rgba(0, 0, 0, 0.3);
padding: 0;
top: 85%;
left: calc(50% - 0.4em);
width: 0.8em;
height: 0.15em;
}
/* Button size */
.btn0 {
width: 1.19em;
height: 0.75em;
}
.btn1 {
width: 1.125em;
height: 0.75em;
}
.btn2 {
width: 1.125em;
height: 1.125em;
}
.btn3 {
width: 2em;
height: 1.125em;
}
.btn4 {
width: 2.3em;
height: 1.125em;
}
.btn5 {
width: 3.05em;
height: 1.125em;
}
.btn6 {
width: 1.5625em;
height: 1.375em;
}
.btn7 {
width: 1.8375em;
height: 1.375em;
}
.btn8 {
width: 1.125em;
height: 1.375em;
}
.btn9 {
width: 2.6875em;
height: 1.375em;
}
.btn10 {
width: 1.125em;
height: 2.875em;
}
.btn-longest {
width: 8.625em;
height: 1.375em;
}
/* Button text alignment */
.ul, .ll, .ur, .lr {
top: 0;
transform: scaleX(0.875);
}
.ul, .ll {
text-align: left;
transform-origin: 0 50%;
}
.ur, .lr {
text-align: right;
transform-origin: 100% 50%;
}
.ll, .lr {
top: auto;
bottom: 0;
}
.noxscale {
transform: translateY(-50%) scaleX(1);
}
.ll.noxscale, .lr.noxscale {
transform: scaleX(1);
}
/* Button font size */
.xxxs {
font-size: 0.2em;
line-height: 1.5;
}
.xxs {
font-size: 0.25em;
line-height: 1.5;
}
.xs {
font-size: 0.3em;
line-height: 1.125;
}
.sm {
font-size: 0.4em;
line-height: 1.25;
}
/* Icons */
.up, .right, .down, .left {
width: 0;
height: 0;
vertical-align: 0.1em;
}
.up {
border-left: 0.25em solid transparent;
border-right: 0.25em solid transparent;
border-bottom: 0.5em solid currentColor;
}
.right {
border-left: 0.5em solid currentColor;
border-top: 0.25em solid transparent;
border-bottom: 0.25em solid transparent;
}
.down {
border-left: 0.25em solid transparent;
border-right: 0.25em solid transparent;
border-top: 0.5em solid currentColor;
}
.left {
border-right: 0.5em solid currentColor;
border-top: 0.25em solid transparent;
border-bottom: 0.25em solid transparent;
}
.pause {
border-left: 0.2em solid;
border-right: 0.2em solid;
vertical-align: 0.1em;
width: 0.475em;
height: 0.5em;
}
.emoji {
filter: saturate(0);
-webkit-filter: saturate(0);
}
.cascade:before, .cascade:after, .block {
border: 1px solid;
}
.cascade {
position: relative;
height: 1em;
width: 1.2em;
}
.cascade:before, .cascade:after {
content: "";
position: absolute;
height: 0.45em;
width: 0.8em;
}
.cascade:before {
top: 0;
left: 0;
}
.cascade:after {
right: 0;
bottom: 0;
}
.block {
margin-left: 0.1em;
height: 0.8em;
width: 0.6em;
vertical-align: 0.1em;
}
.apps:before, .apps:after {
font-weight: bold;
display: block;
content: "\25A1\25A1\25A1";
line-height: 0.875;
}
/* Miscellaneous */
.on {
color: #8dff00;
text-shadow: 0 0 2px #478800;
}
.noxpad {
padding: 0.2em 0;
}
/* IE 11 fix */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.keyboard {
display: -ms-grid;
-ms-grid-columns: 22.125em 5em 5.75em;
-ms-grid-rows: 1.125em 1.5em 1.5em 1.5em 1.5em 1.375em;
}
.row:nth-child(3n + 2) {
-ms-grid-column: 2;
}
.row:nth-child(3n + 3) {
-ms-grid-column: 3;
}
.row:nth-child(n + 4):nth-child(-n + 6) {
-ms-grid-row: 2;
}
.row:nth-child(n + 7):nth-child(-n + 9) {
-ms-grid-row: 3;
}
.row:nth-child(n + 10):nth-child(-n + 12) {
-ms-grid-row: 4;
}
.row:nth-child(n + 13):nth-child(-n + 15) {
-ms-grid-row: 5;
}
.row:nth-child(n + 16) {
-ms-grid-row: 6;
}
.row:nth-of-type(14) button {
transform: translateX(-0.5em);
}
}Output Till Now
Step 3: JavaScript Code
// caps lock key
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("caps-lock").addEventListener("click", function(){
this.childNodes[0].classList.toggle("on");
});
});Final Output
Code Credits: @jkantner
Written by: Piyush Patil
If you want me to code any project or post any specific post,
feel free to DM me at IG @code.scientist or @codingtorque
If you have any doubt or any project ideas feel free to
Contact Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like
this👨💻