Html:
<div class= "Board" >
<div class= "Blackbar" >
</div>
<div class= "Keyboard" >
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li><span>~</span><span> ' </span></li>
<li><span>!</span><span>1</span></li>
<li><span>@</span><span>2</span></li>
<li><span>#</span><span>3</span></li>
<li><span>$</span><span>4</span></li>
<li><span>%</span><span>5</span></li>
<li><span>^</span><span>6</span></li>
<li><span>&</span><span>7</span></li>
<li><span>*</span><span>8</span></li>
<li><span> (</span><span>9</span></li>
<li><span>) </span><span>0</span></li>
<li><span>-</span><span>-</span></li>
<li><span>+</span><span>=</span></li>
<li></li>
<li></li>
<li>Q</li>
<li>W</li>
<li>E</li>
<li>R</li>
<li>T</li>
<li>Y</li>
<li>U</li>
<li>I</li>
<li>O</li>
<li>P</li>
<li><span>{</span><span>[</span></li>
<li><span>}</span><span>]</span></li>
<li><span>|</span><span>\</span></li>
<li></li>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li><span>:</span><span>;</span></li>
<li><span> ' </span><span> ' </span></li>
<li></li>
<li></li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li><span><</span><span>,</span></li>
<li><span>></span><span>.</span></li>
<li><span>?</span><span>/</span></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>by Pure CSS. To be continued.</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class= "Touch" >
</div>
</div>
Css:
<style>
. board{
margin:0 Auto;
padding:0 Auto;
width:600px;
height:450px;
margin-top:50px;
Background:rgb (210,210,210);
border-radius:20px;
position:relative;
box-shadow:0px 5px 6px rgb (160,160,160);
Background:-webkit-linear-gradient (60deg,rgba (250,250,250,1) 25%,rgba (210,210,210,1));
}
. board:before{
Content: ";
Display:block;
width:780px;
height:20px;
Background:rgb (210,210,210);
border-radius:0px 0px 3px 3px;
border-top-left-radius:390px 18px;
border-top-right-radius:390px 18px;
Position:absolute;
top:-20px;
Left: -90px;
BORDER-BOTTOM:2PX solid RGB (0,0,0);
Background:-webkit-linear-gradient (Top,rgb (210,210,210) 50%,rgb (255,255,255));
}
. blackbar{
width:450px;
height:18px;
Position:absolute;
left:75px;
border-radius:2px;
border-bottom:2px solid #ffffff;
border-right:2px solid #ffffff;
Background:-webkit-linear-gradient (Top,rgb (30,30,30), RGB (60,60,60) 35%,rgb (100,100,100) 50%,rgb (30,30,30) 65%);
Background:-linear-gradient (Top,rgb (30,30,30), RGB (60,60,60) 35%,rgb (100,100,100) 50%,rgb (30,30,30) 65%);
}
. keyboard{
Position:absolute;
width:530px;
height:216px;
left:35px;
top:35px;
border:1px solid RGB (180,180,180);
border-radius:8px;
Background:rgba (250,250,250,1);
box-shadow:2px 0px 2px rgb (180,180,180) inset,
0px 3px 3px rgb (180,180,180) inset,
-5px-0px 1px rgb (255,255,255) inset,
0px-3px 3px RGB (180,180,180) inset;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
User-select:none;
}
ul,li{
List-style:none;
margin:0 Auto;
padding:0 Auto;
Display:block;
font-family: "Vrinda";
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
User-select:none;
}
ul{
width:530px;
margin-top:8px;
padding-left:8px;
}
Ji=
width:29px;
height:29px;
Float:left;
margin-right:5px;
margin-bottom:5px;
Background-color:rgb (30,30,30);
Color:rgb (200,200,200);
Text-align:center;
line-height:28px;
font-size:12px;
border-radius:4px;
border:1px solid RGB (70,70,70);
box-shadow:1px 0px 0px rgb (0,0,0),
0px 1px 0px rgb (0,0,0),
-1px 0px 0px rgb (0,0,0),
0px-1px 0px rgb (0,0,0);
}
Li:nth-child (-n+14): Nth-child (n+1) {
width:30px;
height:15px;
}
Li:nth-child (-n+27): Nth-child (n+16) {
/*box-sizing:border-box;
padding-top:4px;*/
}
Li:nth-child (-n+26): Nth-child (n+15) span,li:nth-child (+) Span,li:nth-child (+) Span,li:nth-child (Span,li): Nth-child (span,li:nth-child) span,li:nth-child (SI) span,li:nth-child (-n+66): Nth-child (n+64) span{
Display:block;
margin-top:5px;
line-height:0.5;
}
Li:nth-child (+), Li:nth-child (29) {
width:45px;
}
Li:nth-child (+), Li:nth-child (55) {
width:55px;
}
Li:nth-child (Li:nth-child), (67) {
width:73px;
}
Li:nth-child (-n+74): Nth-child (n+68) {
height:33px;
}
Li:nth-child (72) {
width:173px;
}
Li:nth-child (Li:nth-child), (73) {
width:37px;
}
Li:nth-child (Li:nth-child), Li:nth-child (78) {
margin-top:18px;
height:14px;
}
Li:nth-child (76) {
height:13px;
margin-top:19px;
}
Li:nth-child (78) {
Position:absolute;
bottom:22px;
right:38px;
}
. touch{
Position:absolute;
width:200px;
height:150px;
BORDER:2PX solid RGB (190,190,190);
bottom:23px;
left:200px;
border-radius:8px;
}
</style>
:
Pure CSS to create MacBook