CSS-Only Mac Keyboard

Developer
Nour Abusoud
Size
4,116 Kb
Views
8,096
  1. CSS-Only Mac Keyboard Previews
  2. CSS-Only Mac Keyboard HTML Codes
  3. CSS-Only Mac Keyboard CSS Codes

How do I make an css-only mac keyboard?

A simple Mac Keyboard using Haml and Sass, I dunno if this is the best approach but I never used Haml before and decided to try it out this time.. What is a css-only mac keyboard? How do you make a css-only mac keyboard? This script and codes were developed by Nour Abusoud on 10 November 2022, Thursday.

CSS-Only Mac Keyboard Previews
IQ Test

CSS-Only Mac Keyboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-Only Mac Keyboard</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='keyboard'> <div class='row row-1'> <div class='0 key narrow'>esc</div> <div class='1 key narrow'>F1</div> <div class='2 key narrow'>F2</div> <div class='3 key narrow'>F3</div> <div class='4 key narrow'>F4</div> <div class='5 key narrow'>F5</div> <div class='6 key narrow'>F6</div> <div class='7 key narrow'>F7</div> <div class='8 key narrow'>F8</div> <div class='9 key narrow'>F9</div> <div class='10 key narrow'>F10</div> <div class='11 key narrow'>F11</div> <div class='12 key narrow'>F12</div> <div class='13 key narrow'>eject</div> </div> <div class='row row-2'> <div class='0 key'>~</div> <div class='1 key'>1</div> <div class='2 key'>2</div> <div class='3 key'>3</div> <div class='4 key'>4</div> <div class='5 key'>5</div> <div class='6 key'>6</div> <div class='7 key'>7</div> <div class='8 key'>8</div> <div class='9 key'>9</div> <div class='10 key'>0</div> <div class='11 key'>-</div> <div class='12 key'>=</div> <div class='13 key'>delete</div> </div> <div class='row row-3'> <div class='0 key'>tab</div> <div class='1 key'>Q</div> <div class='2 key'>W</div> <div class='3 key'>E</div> <div class='4 key'>R</div> <div class='5 key'>T</div> <div class='6 key'>Y</div> <div class='7 key'>U</div> <div class='8 key'>I</div> <div class='9 key'>O</div> <div class='10 key'>P</div> <div class='11 key'>{</div> <div class='12 key'>}</div> <div class='13 key'>|</div> </div> <div class='row row-4'> <div class='0 key'>caps lock</div> <div class='1 key'>A</div> <div class='2 key'>S</div> <div class='3 key'>D</div> <div class='4 key'>F</div> <div class='5 key'>G</div> <div class='6 key'>H</div> <div class='7 key'>J</div> <div class='8 key'>K</div> <div class='9 key'>L</div> <div class='10 key'>;</div> <div class='11 key'>"</div> <div class='12 key'>&#39;</div> <div class='13 key'>return</div> </div> <div class='row row-5'> <div class='0 key'>shift</div> <div class='1 key'>Z</div> <div class='2 key'>X</div> <div class='3 key'>C</div> <div class='4 key'>V</div> <div class='5 key'>B</div> <div class='6 key'>N</div> <div class='7 key'>M</div> <div class='8 key'><</div> <div class='9 key'>></div> <div class='10 key'>?</div> <div class='11 key'>shift</div> </div> <div class='row row-6'> <div class='0 key'>fn</div> <div class='1 key'>control</div> <div class='2 key'>option</div> <div class='3 key'>command</div> <div class='4 key'>&nbsp;</div> <div class='5 key'>command</div> <div class='6 key'>option</div> <div class='7 key'></div> <div class='8 key'></div> <div class='9 key'></div> </div>
</div>
</body>
</html>

CSS-Only Mac Keyboard - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-size: 12px; font-family: monospace; text-align: center;
}
.keyboard { display: inline-block; padding: 4em 1em 1em; background-color: #ddd; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.27, #d4d8db), color-stop(0.64, #d5d9dc), color-stop(0.95, #e6e9eb), color-stop(1, #bfbfbf)); border-radius: 10px; -webkit-box-shadow: 4px 4px 5px 0px rgba(100, 100, 100, 0.5); -moz-box-shadow: 4px 4px 5px 0px rgba(100, 100, 100, 0.5); box-shadow: 4px 4px 5px 0px rgba(100, 100, 100, 0.5);
}
.keyboard .row { display: flex; justify-content: space-between; align-content: space-between; margin: 0.7em auto;
}
.key { margin: 0; padding: 1em 2em; background-color: #eff0f2; color: #888; border-radius: 6px; cursor: pointer; -webkit-box-shadow: inset 1px 0 25px #dfdfdf, 0 1px 0 #cfcfcf, 0 1px 0 #bfbfbf, 0 1px 1px #6f6f6f;
}
.key.narrow { padding: 0.6em 2em;
}
.key:active { box-shadow: inset 0 0 50px #ddd, 0 0 2px #888;
}
.row-3 .key:first-child, .row-4 .key:first-child, .row-5 .key:first-child { font-size: .9em; padding: 1.5em 3em 0.5em .8em; text-align: left;
}
.row-2 .key:last-child, .row-4 .key:last-child, .row-5 .key:last-child { font-size: .9em; padding: 1.5em .8em 0.5em 3em; text-align: right;
}
.row-1 { font-size: .9em;
}
.row-5 .key:first-child { padding-right: 4.5em;
}
.row-5 .key:last-child { padding-left: 4.5em;
}
.row-6 { font-size: .9em;
}
.row-6 .key { padding: 2em 1.5em 0.8em;
}
.row-6 .key:nth-child(5) { padding-left: 10em; padding-right: 10em;
}
.row-6 .key:nth-child(8), .row-6 .key:nth-child(9), .row-6 .key:nth-child(10) { padding: 1em 2em 0.8em; position: relative; margin-bottom: 0;
}
.row-6 .key:nth-child(8):after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 6px solid #888;
}
.row-6 .key:nth-child(9) { position: relative; padding-top: 3em;
}
.row-6 .key:nth-child(9):before { position: absolute; top: 0.5em; left: 50%; transform: translateX(-50%); content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #888;
}
.row-6 .key:nth-child(9):after { position: absolute; bottom: 0.5em; left: 50%; transform: translateX(-50%); content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #888;
}
.row-6 .key:nth-child(10):after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #888;
}
CSS-Only Mac Keyboard - Script Codes
CSS-Only Mac Keyboard - Script Codes
Home Page Home
Developer Nour Abusoud
Username nourabusoud
Uploaded November 10, 2022
Rating 3
Size 4,116 Kb
Views 8,096
Do you need developer help for CSS-Only Mac Keyboard?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nour Abusoud (nourabusoud) Script Codes
Name
CSS Only Carousel
CSS only dynamic 2 slices pie charts
Menu - pop out icons
A Pen by Nour Abusoud
CSS Bar Chart
CSS Heart Loaders
CSS Girl
Mistletoe
Simple Candy Cane
Thanks giving turkey
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!