Калькулятор

Перед нами самый настоящий виртуальный калькулятор, который вполне может заменить тот что находится у вас на столе, в виде физического калькулятора, и мы обещали рассказать как устроено его математическое чрево, и даже есть возможность на нем пощелкать, считая разные цифири и числа
На первый взгляд кажется что использовались стандартные активные элементы HTML. На самом деле его конструкция сделана за счет стилизированой по особому обыкновенной таблице. вот ее код

<table class="calc" cellspacing="5">
 <tr><td colspan="6" id="brs">
    Привед!</td></tr>
 <tr><th id="ms">Ms</th>
  <td>7</td><td>8</td><td>9</td>
  <th id="dv">÷</th>
  <th id="ce">«</th></tr>
 <tr><th id="mr">Mr</th>
  <td>4</td><td>5</td><td>6</td>
  <th id="ml">×</th>
  <th id="cl">C</th></tr>
 <tr><th id="mm">M-</th>
  <td>1</td><td>2</td><td>3</td>
  <th id="mn">−</th>
  <th id="pc">%</th></tr>
 <tr><th id="mp">M+</th><td>0</td>
  <td id="pm">±</td>
  <td id="dc">•</td>
  <th id="pl">+</th>
  <th id="sm">∑</th></tr>
</table>

А эффект кнопки получается за счет настройеи стиля элементов ячейки таблицы, используя новые конструкции в виде псевдоклассов

Стиль кнопок
Общие настройки

.calc td,.calc th{
  min-width: 15px;
  min-height: 15px;
  text-align:center;
  cursor:pointer;
  background-color: #888; 
  color: #FFF; 
  border-color: #000;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  padding: 5px 10px;
  box-shadow: 2px 2px 1px #000;
  border-radius: 5px;
  border: solid 1px #000;
  -moz-transition-property: background-color, color;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: ease-out;
}

Допонительно фон кнопок операций переназначается на

.calc th{
  background-color: #00F;
}

и устанавливается цвет и фон кнопок при наведении на них курсора мыши

.calc td:hover,.calc th:hover {
  background-color: #FFF;
   color: #000;
}

Здесь используется специальный подкласс :hover, который указывает браузеру изменять стиль при наведении курсора на объект, и при уходе восстановливать стиль по умолчанию.
И последнее: стиль при клике по стилизованой кнопке определяется специальным псевдо-классом :active

.calc td:active,.calc th:active {
  box-shadow: inset 2px 2px 1px #CCC;
}

, т.е когда мы кликаем по кнопке то изменением тени исходной формируется видимость имитации нажатия кнопы.
С кнопкой все.

Стиль дисплеея и общий вид
В дисплее мы используем специальный прием, названый мной как шрифт - на полутени, о котором я достаточно подробно уже неоднакратно рассказывал ранее, но если кто не читал как это делается читаем вот отсюда

#brs{
  background-color: #DFD; 
  color: gold;
  text-align:right; 
  padding: 2px 10px;
  font-size: 4ex;   
  font-style: normal;
  font-family: fantasy;
  text-shadow: 2px 2px 5px #F00, 
    0 0 0.1ex #0F0;
  box-shadow:  2px 2px 3px #CCC;
  border-radius: 15px;
}

ну и наконец стиль самой таблицы

.calc{
  box-shadow: 2px 2px 9px #CCC;
  border:1px #000 solid;  
  padding: 1px 10px 5px 7px;
  background-color: #F8F8F4;
}

Все