Skip to content

Instantly share code, notes, and snippets.

@maxlipsky

maxlipsky/index.html

Created October 12, 2012 18:25
Show Gist options
  • Save maxlipsky/3880683 to your computer and use it in GitHub Desktop.
Save maxlipsky/3880683 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="fon">
<div id="calc-sh">
<div id="calc-bg">
<div class="one-px"></div>
<div id="calc-top">Calculator</div>
<div id="calc-sh-top"></div>
<div id="calc-sh-left"></div>
<div id="calc-sh-right"></div>
<div id="disp"></div>
<div id="disp-sh-bottom"></div>
<div id="keyboard">
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">MC</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">M+</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">M-</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">MR</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">C</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">±</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">÷</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">x</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">7</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">8</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">9</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">&minus;</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">4</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">5</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">6</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">+</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">1</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">2</div>
</div>
</div>
<div class="key-1-out">
<div class="key-1">
<div class="key-sh-top"></div>
<div class="text-button">3</div>
</div>
</div>
<div class="key-2-out">
<div class="key-2">
<div class="key-2-sh-top"></div>
<div class="text-button-q">=</div>
</div>
</div>
<div class="key-3-out">
<div class="key-3">
<div class="key-3-sh-top"></div>
<div class="text-button">0</div>
</div>
</div>
<div class="key-4-out">
<div class="key-4">
<div class="key-4-sh-top"></div>
<div class="text-button">.</div>
</div>
</div>
</div>
<div id="calc-sh-bottom">
<div id="calc-line-bottom"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
body {
margin: 30px auto;
width: 200px;
}
#calc-sh {
width: 220px;
height: 285px;
box-shadow: 0 14px 44px 5px #949494;
border-radius: 4px;
}
#calc-bg {
width: 220px;
height: 285px;
border-radius: 4px;
box-shadow: 0px -4px 40px #969696 inset;
background: rgb(209,209,209); /* Old browsers */
background: -moz-linear-gradient(top, rgba(209,209,209,1) 0%,
rgba(170,170,170,1) 7%,
rgba(163,163,163,1) 11%,
rgba(158,158,158,1) 24%,
rgba(158,158,158,1) 93%,
rgba(158,158,158,1) 97%,
rgba(135,135,135,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(209,209,209,1)),
color-stop(7%,rgba(170,170,170,1)),
color-stop(11%,rgba(163,163,163,1)),
color-stop(24%,rgba(158,158,158,1)),
color-stop(93%,rgba(158,158,158,1)),
color-stop(97%,rgba(158,158,158,1)),
color-stop(100%,rgba(135,135,135,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(209,209,209,1) 0%,
rgba(170,170,170,1) 7%,rgba(163,163,163,1) 11%,
rgba(158,158,158,1) 24%,rgba(158,158,158,1) 93%,
rgba(158,158,158,1) 97%,rgba(135,135,135,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(209,209,209,1) 0%,
rgba(170,170,170,1) 7%,rgba(163,163,163,1) 11%,
rgba(158,158,158,1) 24%,rgba(158,158,158,1) 93%,
rgba(158,158,158,1) 97%,rgba(135,135,135,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(209,209,209,1) 0%,
rgba(170,170,170,1) 7%,rgba(163,163,163,1) 11%,
rgba(158,158,158,1) 24%,rgba(158,158,158,1) 93%,
rgba(158,158,158,1) 97%,rgba(135,135,135,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(209,209,209,1) 0%,
rgba(170,170,170,1) 7%,rgba(163,163,163,1) 11%,
rgba(158,158,158,1) 24%,rgba(158,158,158,1) 93%,
rgba(158,158,158,1) 97%,rgba(135,135,135,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#878787',GradientType=0 ); /* IE6-9 */
}
#calc-sh-top {
height: 8px;
width: 100%;
border-radius: 4px;
border-top: 1px solid #CACACA;
}
#calc-sh-left {
height: 94%;
width: 1px;
float: left;
border-radius: 4px;
background-color: #888;
background: rgb(170,170,170); /* Old browsers */
background: -moz-linear-gradient(top, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%, rgba(142,142,142,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(170,170,170,1)),
color-stop(20%,rgba(142,142,142,1)),
color-stop(100%,rgba(142,142,142,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%,rgba(142,142,142,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%,rgba(142,142,142,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%,rgba(142,142,142,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%,rgba(142,142,142,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#8e8e8e',GradientType=0 ); /* IE6-9 */
}
#calc-sh-right {
height: 94%;
width: 1px;
float: right;
border-radius: 4px;
background-color: #888;
background: rgb(170,170,170); /* Old browsers */
background: -moz-linear-gradient(top, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%, rgba(142,142,142,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(170,170,170,1)), color-stop(20%,rgba(142,142,142,1)),
color-stop(100%,rgba(142,142,142,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%,rgba(142,142,142,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%,rgba(142,142,142,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%,rgba(142,142,142,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(170,170,170,1) 0%,
rgba(142,142,142,1) 20%,rgba(142,142,142,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#8e8e8e',GradientType=0 ); /* IE6-9 */
}
.one-px {
height: 1px;
}
#disp {
height: 48px;
margin-top: 14px;
background-color: #EEF8C4;
margin-left: 11px;
width: 198px;
border-radius: 5px 5px;
border: 1px solid #A0A0A0;
box-shadow: 0 1px 5px #0F0F0F inset;
}
#disp-sh-bottom {
height: 6px;
box-shadow: 0px 2px 3px #FAFAFA;
width: 196px;
margin-left: 13px;
border-radius: 8px;
margin-top: -7px;
}
#keyboard {
width: 208px;
height: 200px;
margin-left: 8px;
margin-top: 12px;
}
.key-1-out {
float: left;
width: 47px;
height: 27px;
margin-left: 3px;
border-bottom: 1px solid #BEBEBE;
border-radius: 5px 5px;
margin-bottom: 4px;
}
.key-1 {
width: 45px;
height: 25px;
background-color: #CCC;
border-radius: 5px 5px;
border: 1px solid #5C5C5C;
box-shadow: 0 -1px 1px #868686 inset;
}
.key-sh-top {
height: 3px;
border-top: 2px solid #E2E2E2;
border-radius: 3px 3px;
width: 43px;
margin-left: 1px;
}
.key-2-out {
float: left;
width: 47px;
height: 59px;
margin-left: 3px;
border-bottom: 1px solid #BEBEBE;
border-radius: 5px 5px;
margin-bottom: 4px;
}
.key-2 {
width: 45px;
height: 57px;
background-color: #CCC;
border-radius: 5px 5px;
border: 1px solid #5C5C5C;
box-shadow: 0 -1px 1px #868686 inset;
}
.key-2-sh-top {
height: 3px;
border-top: 2px solid #E2E2E2;
border-radius: 3px 3px;
width: 43px;
margin-left: 1px;
}
.key-3-out {
width: 97px;
height: 27px;
margin-left: 3px;
border-bottom: 1px solid #BEBEBE;
border-radius: 5px 5px;
margin-bottom: 5px;
position: relative;
float: left;
margin-top: -32px;
}
.key-3 {
width: 95px;
height: 25px;
background-color: #CCC;
border-radius: 5px 5px;
border: 1px solid #5C5C5C;
box-shadow: 0 -1px 1px #868686 inset;
}
.key-3-sh-top {
height: 3px;
border-top: 2px solid #E2E2E2;
border-radius: 3px 3px;
width: 92px;
margin-left: 1px;
}
.key-4-out {
float: left;
width: 47px;
height: 27px;
margin-left: 3px;
border-bottom: 1px solid #BEBEBE;
border-radius: 5px 5px;
margin-bottom: 5px;
position: relative;
margin-top: -32px;
}
.key-4 {
width: 45px;
height: 25px;
background-color: #CCC;
border-radius: 5px 5px;
border: 1px solid #5C5C5C;
box-shadow: 0 -1px 1px #868686 inset;
}
.key-4-sh-top {
height: 3px;
border-top: 2px solid #E2E2E2;
border-radius: 3px 3px;
width: 43px;
margin-left: 1px;
}
#calc-sh-bottom {
float: left;
height: 11px;
width: 220px;
margin-top: -11px;
box-shadow: 0 -4px 8px #858585 inset;
border-radius: 0 0 5px 5px;
}
#calc-line-bottom {
border-bottom: 1px solid #777;
margin-left: 12px;
width: 196px;
margin-top: 10px;
}
.text-button {
font: 13px Lucida Grande;
text-align: center;
}
.text-button-q {
font: 13px Lucida Grande;
text-align: center;
padding-top: 31px;
}
#calc-top {
font: 13px Lucida Grande;
position: absolute;
text-align: center;
height: 20px;
width: 218px;
margin-top: 3px;
margin-left: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment