THEMETRIAL

Macbook (M1) Keyboard Mockup In Pure CSS

Author:darshanagandhi90
Views Total:0 views
Official Page:Go to website
Last Update:May 6, 2021
License:MIT

Preview:

Macbook (M1) Keyboard Mockup In Pure CSS

Description:

An animated, interactive Mackbook (M1 chip) keyboard mockup created using only HTML and CSS/CSS3.

How to use it:

1. Create the HTML for the Macbook keyboard.

<div class="cube-wrapper">
  <div class="cube">
    <div class="front-side">
      <div class="container-I">
        <div class="box">
          <div class="container">
            <div class="partition">
              <div class="line-1">
                <span class="esc f-key">
                  <span class="">esc</span>
                </span>
                <span class="f-key">f1</span>
                <span class="f-key">f2</span>
                <span class="f-key">f3</span>
                <span class="f-key">f4</span>
                <span class="f-key">f5</span>
                <span class="f-key">f6</span>
                <span class="f-key">f7</span>
                <span class="f-key">f8</span>
                <span class="f-key">f9</span>
                <span class="f-key">f10</span>
                <span class="f-key">f11</span>
                <span class="f-key">f12</span>
                <span class="touch-id f-key"></span>
              </div>
              <div class="line-2">
                <div class="square">
                  <span class="content">~</span>
                  <span class="content">`</span>
                </div>
                <div class="square">
                  <span class="content">!</span>
                  <span class="content">1</span>
                </div>
                <div class="square">
                  <span class="content">@</span>
                  <span class="content">2</span>
                </div>
                <div class="square">
                  <span class="content">#</span>
                  <span class="content">3</span>
                </div>
                <div class="square">
                  <span class="content">$</span>
                  <span class="content">4</span>
                </div>
                <div class="square">
                  <span class="content">%</span>
                  <span class="content">5</span>
                </div>
                <div class="square">
                  <span class="content">^</span>
                  <span class="content">6</span>
                </div>
                <div class="square">
                  <span class="content">&</span>
                  <span class="content">7</span>
                </div>
                <div class="square">
                  <span class="content">*</span>
                  <span class="content">8</span>
                </div>
                <div class="square">
                  <span class="content">(</span>
                  <span class="content">9</span>
                </div>
                <div class="square">
                  <span class="content">)</span>
                  <span class="content">0</span>
                </div>
                <div class="square">
                  <span class="content">⎯</span>
                  <span class="content">-</span>
                </div>
                <div class="square">
                  <span class="content">+</span>
                  <span class="content">=</span>
                </div>
                <div class="square delete">
                  <span>delete</span>
                </div>
              </div>
              <div class="line-3">
                <div class="tab square"><span>tab</span></div>
                <span class="square">Q</span>
                <span class="square">W</span>
                <span class="square">E</span>
                <span class="square">R</span>
                <span class="square">T</span>
                <span class="square">Y</span>
                <span class="square">U</span>
                <span class="square">I</span>
                <span class="square">O</span>
                <span class="square">P</span>
                <div class="square">
                  <span class="content">{</span
                  ><span class="content">[</span>
                </div>
                <div class="square">
                  <span class="content">}</span
                  ><span class="content">]</span>
                </div>
                <div class="square">
                  <span class="content">|</span
                  ><span class="content"></span>
                </div>
              </div>
              <div class="line-4">
                <div class="caps square">
                  <span class="">●</span><span class="">caps lock</span>
                </div>
                <span class="square">A</span>
                <span class="square">S</span>
                <span class="square">D</span>
                <span class="square">F</span>
                <span class="square">G</span>
                <span class="square">H</span>
                <span class="square">J</span>
                <span class="square">K</span>
                <span class="square">L</span>
                <div class="square">
                  <span class="content">:</span
                  ><span class="content">;</span>
                </div>
                <div class="square">
                  <span class="content">"</span
                  ><span class="content">'</span>
                </div>
                <div class="delete square">
                  <span class="">return</span>
                </div>
              </div>
              <div class="line-5">
                <div class="shift square">
                  <span class="">shift</span>
                </div>
                <span class="square">Z</span>
                <span class="square">X</span>
                <span class="square">C</span>
                <span class="square">V</span>
                <span class="square">B</span>
                <span class="square">N</span>
                <span class="square">M</span>
                <div class="square">
                  <span class="content"><</span
                  ><span class="content">,</span>
                </div>
                <div class="square">
                  <span class="content">></span
                  ><span class="content">.</span>
                </div>
                <div class="square">
                  <span class="content">?</span
                  ><span class="content">/</span>
                </div>
                <div class="shift2 square">
                  <span class="">shift</span>
                </div>
              </div>
              <div class="line-2">
                <div class="square font-size">
                  <div class="content fn">fn</div>
                  <span class="content sub-fn">⎈</span>
                </div>
                <div class="square font-size">
                  <span class="content fn">^</span>
                  <span class="content">control</span>
                </div>
                <div class="square font-size">
                  <span class="content fn">⎇</span>
                  <span class="content">option</span>
                </div>
                <div class="square font-size command">
                  <span class="content fn">⌘</span>
                  <span class="content">command</span>
                </div>
                <div class="square space-bar">
                  <span class="content"></span>
                </div>
                <div class="square font-size command">
                  <span class="content fn-last">⌘</span>
                  <span class="content">command</span>
                </div>
                <div class="square font-size">
                  <span class="content fn-last">⎇</span>
                  <span class="content">option</span>
                </div>
                <div class="arrow-wrapper">
                  <span class="f-key arrow">▲</span>
                  <div class="down-arrows">
                    <span class="f-key arrow">◀︎</span>
                    <span class="f-key arrow">▼</span>
                    <span class="f-key arrow">▶︎</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="track-pad"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="back-side">
      <!-- <div class="section-1">
        <div class="back-dot">●</div>
        <div class="back-dot">●</div>
      </div>
      <div class="section-1">
        <div class="back-dot">●</div>
        <div class="back-dot">●</div>
      </div> -->
    </div>
  </div>
</div>

2. Load the required stylesheet in the document and done.

<link rel="stylesheet" href="https://www.cssscript.com/style.css" />

3. Override the default styles.

:root {
  --gold-color: #ffd8bf;
  --white: #ebe6e6;
  --gold-shadow: #a87961;
  --white-plain: #fff;
  --black: #202124;
  --black-plain: #000;
  --dark-gold: #9f6e57;
  --light-gold: #f9d2b8;
}


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.