NEU Keyboard Design

M.Muzammil

11 Apr, 2020

<div class="keyboard">
  <div class="key s2 esc" data-key="💀">💀</div>
  <div class="key" on-shift="!" data-key="1">1</div>
  <div class="key" on-shift="@" data-key="2">2</div>
  <div class="key" on-shift="#" data-key="3">3</div>
  <div class="key" on-shift="$" data-key="4">4</div>
  <div class="key" on-shift="%" data-key="5">5</div>
  <div class="key" on-shift="^" data-key="6">6</div>
  <div class="key" on-shift="&" data-key="7">7</div>
  <div class="key" on-shift="*" data-key="8">8</div>
  <div class="key" on-shift="(" data-key="9">9</div>
  <div class="key" on-shift=")" data-key="0">0</div>
  <div class="key sub" on-shift="_" data-key="-">-</div>
  <div class="key add" on-shift="+" data-key="=">=</div>
  <div class="key s4 back" data-key="😅">😅</div>
  <div class="key s3 tab" data-key="📑">📑</div>
  <div class="key" data-key="Q">Q</div>
  <div class="key" data-key="W">W</div>
  <div class="key" data-key="E">E</div>
  <div class="key" data-key="R">R</div>
  <div class="key" data-key="T">T</div>
  <div class="key" data-key="Y">Y</div>
  <div class="key" data-key="U">U</div>
  <div class="key" data-key="I">I</div>
  <div class="key" data-key="O">O</div>
  <div class="key" data-key="P">P</div>
  <div class="key openbracket" on-shift="{" data-key="[">[</div>
  <div class="key closebracket" on-shift="}" data-key="]">]</div>
  <div class="key s3 pipe" on-shift="|" data-key="\">\</div>
  <div class="key s4 cap" data-key="🔓">🔓</div>
  <div class="key" data-key="A">A</div>
  <div class="key" data-key="S">S</div>
  <div class="key" data-key="D">D</div>
  <div class="key dotted" data-key="F">F</div>
  <div class="key" data-key="G">G</div>
  <div class="key" data-key="H">H</div>
  <div class="key dotted" data-key="J">J</div>
  <div class="key" data-key="K">K</div>
  <div class="key" data-key="L">L</div>
  <div class="key semi" on-shift=":" data-key=";">;</div>
  <div class="key comma" on-shift=""" data-key=",">,</div>
  <div class="key s4 enter" data-key="😤">😤</div>
  <div class="key s5 shift" data-key="💪">💪</div>
  <div class="key" data-key="Z">Z</div>
  <div class="key" data-key="X">X</div>
  <div class="key" data-key="C">C</div>
  <div class="key" data-key="V">V</div>
  <div class="key" data-key="B">B</div>
  <div class="key" data-key="N">N</div>
  <div class="key" data-key="M">M</div>
  <div class="key openangular" on-shift="<" data-key=",">,</div>
  <div class="key closeangular" on-shift=">" data-key=".">.</div>
  <div class="key slash" on-shift="?" data-key="/">/</div>
  <div class="key s5 shift up" data-key="💪">💪</div>
  <div class="key s3 control" data-key="☕">☕</div>
  <div class="key s3 win" data-key="🤩">🤩</div>
  <div class="key s3 alt" data-key="⭐️">⭐️</div>
  <div class="key s12 space" data-key=""></div>
  <div class="key s3 alt" data-key="⭐️">⭐️</div>
  <div class="key s2 fn left" data-key="🌈">🌈</div>
  <div class="key s2 fn down" data-key="👨‍💻">👨‍💻</div>
  <div class="key s2 control right" data-key="☕">☕</div>
</div>

.keyboard {
  display: grid;
  grid-template-columns: repeat(30, 1.9vw);
  grid-template-rows: repeat(5, 4.75vw);
  grid-gap: 0.95vw;
  background: #c2ccdb;
  padding: 1.727272727272727vw;
  border-radius: 1.266666666666667vw;
  background: #d8dee8;
  box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
}
.keyboard .key {
  border-radius: 0.76vw;
  grid-column: auto/span 2;
  width: 100%;
  height: 100%;
  padding: 0.475vw;
  font-size: 1.9vw;
  display: grid;
  align-items: center;
  color: #8a94a4;
  justify-content: center;
  cursor: pointer;
  background: #d8dee8;
  box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
  transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
  user-select: none;
}
.keyboard .key:hover,
.keyboard .key.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f6f8fa, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
  color: #fff;
  text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
}
.keyboard .key.dotted {
  position: relative;
}
.keyboard .key.dotted::before {
  content: '_';
  font-weight: bold;
  color: #b5c0d2;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.keyboard .key.esc {
  background: #ed4c67;
  color: #fbdbe1;
}
.keyboard .key.esc:hover,
.keyboard .key.esc.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f38e9f, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c71432;
  color: #fff;
  text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
}
.keyboard .key.back {
  background: #d63031;
  color: #f7d6d6;
}
.keyboard .key.back:hover,
.keyboard .key.back.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #e57c7d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #991e1f;
  color: #fff;
  text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
}
.keyboard .key.shift {
  background: #1e90ff;
  color: #d2e9ff;
}
.keyboard .key.shift:hover,
.keyboard .key.shift.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #71b9ff, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0065c8;
  color: #fff;
  text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
}
.keyboard .key.control {
  background: #be2edd;
  color: #f2d5f8;
}
.keyboard .key.control:hover,
.keyboard .key.control.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #d57be9, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #891aa1;
  color: #fff;
  text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
}
.keyboard .key.win {
  background: #f7b731;
  color: #fdf1d6;
}
.keyboard .key.win:hover,
.keyboard .key.win.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fad17d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c78908;
  color: #fff;
  text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
}
.keyboard .key.alt {
  background: #5352ed;
  color: #dddcfb;
}
.keyboard .key.alt:hover,
.keyboard .key.alt.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #9291f3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #1615ca;
  color: #fff;
  text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
}
.keyboard .key.fn {
  background: #26de81;
  color: #d4f8e6;
}
.keyboard .key.fn:hover,
.keyboard .key.fn.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #76eaaf, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #189e5a;
  color: #fff;
  text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
}
.keyboard .key.cap {
  background: #ee5a24;
  color: #fcded3;
  position: relative;
}
.keyboard .key.cap:hover,
.keyboard .key.cap.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f49675, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #b23a0e;
  color: #fff;
  text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
}
.keyboard .key.cap::before {
  content: '';
  position: absolute;
  width: 0.5vw;
  height: 0.5vw;
  background: #f6ac91;
  top: 1vw;
  right: 1vw;
  border-radius: 50%;
}
.keyboard .key.cap.on::before {
  background: #fbded3;
  box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
}
.keyboard .key.tab {
  background: #12cbc4;
  color: #cafaf8;
}
.keyboard .key.tab:hover,
.keyboard .key.tab.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #5aede7, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0d8e89;
  color: #fff;
  text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
}
.keyboard .key.enter {
  background: #fdcb6e;
  color: #fff5e2;
}
.keyboard .key.enter:hover,
.keyboard .key.enter.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fddea3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #fba403;
  color: #fff;
  text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
}
.keyboard .key.s2 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 2;
}
.keyboard .key.s3 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 3;
}
.keyboard .key.s4 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 4;
}
.keyboard .key.s5 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 5;
}
.keyboard .key.s6 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 6;
}
.keyboard .key.s12 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 12;
}
.keyboard .key[on-shift] {
  font-size: 1.461538461538461vw;
  justify-items: center;
}
.keyboard .key[on-shift]::before {
  content: attr(on-shift);
  align-items: end;
}
@import url("https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: 'Sen', sans-serif;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
}

keyHash = {
  8: ".back",
  9: ".tab",
  13: ".enter",
  16: ".shift",
  17: ".control",
  18: ".alt",
  20: ".cap",
  27: ".esc",
  32: ".space",
  37: ".left",
  38: ".up",
  39: ".right",
  40: ".down",
  186: ".semi",
  187: '.add',
  189: '.sub',
  222: ".comma",
  219: ".openbracket",
  221: ".closebracket",
  220: ".pipe",
  188: ".openangular",
  190: ".closeangular",
  191: ".slash",
  91: '.win'
};

const cap = document.querySelector('.cap');

function checkCaps() {
  if (event.getModifierState("CapsLock")) {
    cap.classList.add('on')
  } else {
    cap.classList.remove('on')
  }
}

const handleKeyDown = (e) => {
  checkCaps()
  let target = keyHash[e.keyCode];
  if (!target) target = `.key[data-key="${String.fromCharCode(e.keyCode)}"]`;
  const key = document.querySelector(target);
  key && key.classList.toggle("pressed");
};

function unPress(e) {
  if (e.propertyName === "transform") this.classList.remove("pressed");
}

window.addEventListener("keydown", handleKeyDown);
const keys = document.querySelectorAll(".key");
keys.forEach((k) => k.addEventListener("transitionend", unPress));

M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

NEU Keyboard Design

M.Muzammil

Popular Posts

Categories

Hashtag

Blog Archive

M.Muzammil

Popular Posts

Responsive Cookie Bar

Password Strength Meter

Floating Draggable Menu Like Messenger

Stylish hero footer section

Beautiful Toast Notifications

Categories

Hashtag

Blog Archive