Mac Keyboard & Trackpad Using Pure HTML5 CSS3

mac-keyboard-trackpad-plugin

Mac keyboard is a realistic keyboard and trackpad template built with CSS and HTML menus.

How to make use of it:

1. Load the required stylesheet within the doc.

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

2. The essential 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>
 
lt;/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>

CSS Only Mac Keyboard & Trackpad, Mac Keyboard Plugin/Github, CSS only particles, keyboard accessibility


See Demo And Download

Official Website(Surabhi-George): Click Here

This superior jQuery/javascript plugin is developed by Surabhi-George. For extra advanced usage, please go to the official website.