CSS Only Mac Keyboard & Trackpad

Preview:

Description:

A realistic Mac keyboard & trackpad template build with CSS and HTML lists.

How to use it:

1. Load the required stylesheet in the document.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link type="text/css" href="./style.css" rel="stylesheet" />

2. The necessary HTML for the Mac keyboard.

<div class="k-keyboard-wrap">
  <div class="k-flex p8">
      <div class="k-sound-card">
      </div>
      <div class="k-shadow-wrap w100">
          <ul class="k-flex">
              <li class="w60" tabindex="1">Esc</li>
              <li tabindex="2">
                  <span>⌘</span>
                  <span class="k-funkeys">F1</span>
              </li>
              <li tabindex="3">
                  <span>⌘</span>
                  <span class="k-funkeys">F2</span>
              </li>
              <li tabindex="4">
                  <span>⌘</span>
                  <span class="k-funkeys">F3</span>
              </li>
              <li tabindex="5">
                  <span>⌘</span>
                  <span class="k-funkeys">F4</span>
              </li>
              <li tabindex="6">
                  <span>⌘</span>
                  <span class="k-funkeys">F5</span>
              </li>
              <li tabindex="7">
                  <span>⌘</span>
                  <span class="k-funkeys">F6</span>
              </li>
              <li tabindex="8">
                  <span>⌘</span>
                  <span class="k-funkeys">F7</span>
              </li>
              <li tabindex="9">
                  <span>⌘</span>
                  <span class="k-funkeys">F8</span>
              </li>
              <li tabindex="10">
                  <span>⌘</span>
                  <span class="k-funkeys">F9</span>
              </li>
              <li tabindex="11">
                  <span>⌘</span>
                  <span class="k-funkeys">F10</span>
              </li>
              <li tabindex="12">
                  <span>⌘</span>
                  <span class="k-funkeys">F11</span>
              </li>
              <li tabindex="13">
                  <span>⌘</span>
                  <span class="k-funkeys">F12</span>
              </li>
              <li tabindex="14">
                  <span class="material-icons k-fs20">power_settings_new</span>
              </li>
          </ul>
          <ul class="k-flex">
              <li tabindex="15" class="k-flex-sb">
                  <span>~</span>
                  <span>`</span>
              </li>
              <li tabindex="16" class="k-flex-sb">
                  <span>!</span>
                  <span>1</span>
              </li>
              <li tabindex="17" class="k-flex-sb">
                  <span>@</span>
                  <span>2</span>
              </li>
              <li tabindex="18" class="k-flex-sb">
                  <span>#</span>
                  <span>3</span>
              </li>
              <li tabindex="19" class="k-flex-sb">
                  <span>$</span>
                  <span>4</span>
              </li>
              <li tabindex="20" class="k-flex-sb">
                  <span>%</span>
                  <span>5</span>
              </li>
              <li tabindex="21" class="k-flex-sb">
                  <span>^</span>
                  <span>6</span>
              </li>
              <li tabindex="22" class="k-flex-sb">
                  <span>&</span>
                  <span>7</span>
              </li>
              <li tabindex="23">
                  <span>*</span>
                  <span>8</span>
              </li>
              <li tabindex="24" class="k-flex-sb">
                  <span>(</span>
                  <span>9</span>
              </li>
              <li tabindex="25" class="k-flex-sb">
                  <span>)</span>
                  <span>0</span>
              </li>
              <li tabindex="26" class="k-flex-sb">
                  <span>_</span>
                  <span>-</span>
              </li>
              <li tabindex="27" class="k-flex-sb">
                  <span>+</span>
                  <span>=</span>
              </li>
              <li tabindex="28" class="w60 k-flex-end">delete</li>
          </ul>
          <ul class="k-flex">
              <li tabindex="29" class="w60 k-flex-start">tab</li>
              <li tabindex="30">Q</li>
              <li tabindex="31">W</li>
              <li tabindex="32">E</li>
              <li tabindex="33">R</li>
              <li tabindex="34">T</li>
              <li tabindex="35">Y</li>
              <li tabindex="36">U</li>
              <li tabindex="37">I</li>
              <li tabindex="38">O</li>
              <li tabindex="39">P</li>
              <li tabindex="40" class="k-flex-sb">
                  <span>{</span>
                  <span>[</span>
              </li>
              <li tabindex="41" class="k-flex-sb">
                  <span>}</span>
                  <span>]</span>
              </li>
              <li tabindex="42" class="k-flex-sb">
                  <span>|</span>
                  <span>\</span>
              </li>
          </ul>
          <ul class="k-flex">
              <li tabindex="43" class="w70 k-flex-start">caps lock</li>
              <li tabindex="44">A</li>
              <li tabindex="45">S</li>
              <li tabindex="46">D</li>
              <li tabindex="47">F</li>
              <li tabindex="48">G</li>
              <li tabindex="49">H</li>
              <li tabindex="50">J</li>
              <li tabindex="51">K</li>
              <li tabindex="52">L</li>
              <li tabindex="53" class="k-flex-sb">
                  <span>:</span>
                  <span>;</span>
              </li>
              <li tabindex="54" class="k-flex-sb">
                  <span>"</span>
                  <span>'</span>
              </li>
              <li tabindex="55" class="w70 k-flex-end k-flex-sb">
                  <span class="k-flex-as-fe">enter</span>
                  <span>return</span>
              </li>
          </ul>
          <ul class="k-flex">
              <li tabindex="56" class="w96 k-flex-start">shift</li>
              <li tabindex="57">Z</li>
              <li tabindex="58">X</li>
              <li tabindex="59">C</li>
              <li tabindex="60">V</li>
              <li tabindex="61">B</li>
              <li tabindex="62">N</li>
              <li tabindex="63">M</li>
              <li tabindex="64" class="k-flex-sb">
                  <span><</span>
                  <span>,</span>
              </li>
              <li tabindex="65" class="k-flex-sb">
                  <span>></span>
                  <span>.</span>
              </li>
              <li tabindex="66" class="k-flex-sb">
                  <span>?</span>
                  <span>/</span>
              </li>
              <li tabindex="67" class="w96 k-flex-end">shift</li>
          </ul>
          <ul class="k-flex">
              <li tabindex="68" class="k-flex-start">fn</li>
              <li tabindex="69" class="k-flex-start">control</li>
              <li tabindex="70" class="k-flex-start k-flex-sb">
                  <span>alt</span>
                  <span>option</span>
              </li>
              <li tabindex="71" class="k-flex-start k-flex-sb w50">
                  <span class="k-flex-as-fe">⌘</span>
                  <span>command</span>
              </li>
              <li tabindex="72" class="w236"></li>
              <li tabindex="73" class="k-flex-start k-flex-sb w50">
                  <span>⌘</span>
                  <span>command</span>
              </li>
              <li tabindex="74" class="k-flex-start k-flex-sb">
                  <span class="k-flex-as-fe">alt</span>
                  <span>option</span>
              </li>
              <div class="k-arrow-wrapper">
                  <li tabindex="75" class="k-arrow">
                       <span class="material-icons">arrow_left</span>
                  </li>
                  <div class="k-arrow-wrap">
                      <li tabindex="76" class="k-arrow"><span class="material-icons">arrow_drop_up</span></li>
                      <li tabindex="77" class="k-arrow"><span class="material-icons">arrow_drop_down</span></li>
                  </div>
                  <li tabindex="78" class="k-arrow"> <span class="material-icons">arrow_right</span></li>
              </div>
          </ul>
      </div>
      <div class="k-sound-card">
      </div>
  </div>
  <div class="k-touch-pad"></div>
  <div class="k-bottom-shadow"></div>
</div>