在行动中

Question

我目前正在尝试重新创建OS X Mavericks中的计算器。目前，我只是在研究它的结构和造型。

我完成了大部分工作;但是，当我尝试在外部重新创建边缘效果以及按钮和输出屏幕周围的效果时，我遇到了麻烦。

非常感谢任何帮助/指导。

我有自己的边缘版本作为占位符。

*
{
    font-size: 32px;

    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.calculator
{
    overflow: hidden;

    width: 417px;
    height: auto;
    margin: 100px auto;
    padding: 20px 20px 9px;
    /* Temporary Beveled Edge */
    box-shadow: 0 -1px 3px rgba(190, 255, 255, .5), 2px 3px 3px rgba(0, 0, 0, .2), inset 0 -1px 1px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, 1);
}

.row0 .screen
{
    width: 100%;
    height: 65px;
    margin: 0 11px 11px 0;

    border: 5px solid gray;
    border-radius: 10px;
}

.row1,
.row2,
.row3,
.row4,
.row5,
.row6
{
    width: 100%;
}

#zero
{
    width: 183px;
    padding-left: 35px;

    text-align: left;
}

#equal
{
    line-height: 229px;

    height: 141px;
    margin: 0 0 -141px;
}

button,
.row0
{
    overflow: hidden;
}

#MR,
#multiply,
#minus,
#plus,
#equal
{
    margin-right: 0;
}

button
{
    font-size: 36px;
    line-height: 65px;

    float: left;

    width: 86px;
    height: 65px;
    margin: 0 11px 11px 0;

    text-align: center;

    color: black;
}

<!DOCTYPE html>
<body>
  <div class="calculator">
    <div class="row0">
      <div class="screen"></div>
    </div>
    <div class="row1">
      <button type="button" id="MC">MC</button>
      <button type="button" id="M+">M+</button>
      <button type="button" id="M-">M-</button>
      <button type="button" id="MR">MR</button>
    </div>
    <div class="row2">
      <button type="button" id="C">C</button>
      <button type="button" id="plusminus">&#x000B1</button>
      <button type="button" id="divide">&#x000F7</button>
      <button type="button" id="multiply">&#x000D7</button>
    </div>
    <div class="row3">
      <button type="button" id="7">7</button>
      <button type="button" id="8">8</button>
      <button type="button" id="9">9</button>
      <button type="button" id="minus">&#x02212</button>
    </div>
    <div class="row4">
      <button type="button" id="4">4</button>
      <button type="button" id="5">5</button>
      <button type="button" id="6">6</button>
      <button type="button" id="plus">&#x0002B</button>
    </div>
    <div class="row5">
      <button type="button" id="1">1</button>
      <button type="button" id="2">2</button>
      <button type="button" id="3">3</button>
      <button type="button" id="equal">=</button>
    </div>
    <div class="row6">
      <button type="button" id="zero">0</button>
      <button type="button" id="dot">.</button>
    </div>
  </div>
</body>

Answer 1

你可以将箱阴影叠加并叠加它们。

* {
  /* Looks for font on computer first, then uses the version hosted on TypeKit, then defaults to sans-serif */
  font-family: 'Myriad Pro', 'myriad-pro', sans-serif;
  font-size: 32px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.calculator {
  overflow: hidden;
  width: 417px;
  height: auto;
  margin: 100px 2em;
  padding: 20px 20px 9px;
  border-radius: 20px;
  background: linear-gradient(#ddd, #b3b3b3, #9f9f9f);
  /* Temporary Beveled Edge */
  box-shadow:0 0 3px 4px white, 0 0 3px 3px, 0 -1px 3px rgba(190, 255, 255, .5), 2px 3px 3px rgba(0, 0, 0, .2), inset 0 -1px 1px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, 1);
}

.row0 .screen {
  
  height: 65px;
  margin: 5px 5px 11px ;
  border-radius: 10px;
  background: linear-gradient(#eefcd7, #d6e4c1);
  box-shadow:inset 0 0 2px 1px,inset 0 0 5px white,
    0 0 1px gray,
    -2px -2px 2px 1px gray,
    2px -2px 2px 1px  gray,
    0 2px 2px gray,
    0 4px 2px 1px white
}

.row1,
.row2,
.row3,
.row4,
.row5,
.row6 {
  width: 100%;
}

#zero {
  width: 183px;
  padding-left: 35px;
  text-align: left;
}

#equal {
  line-height: 229px;
  height: 141px;
  margin: 0 0 -141px;
}

button,
.row0 {
  overflow: hidden;
}

#MR,
#multiply,
#minus,
#plus,
#equal {
  margin-right: 0;
}

button {
  font-size: 36px;
  line-height: 65px;
  float: left;
  width: 86px;
  height: 65px;
  margin: 0 11px 11px 0;
  text-align: center;
  color: black;
  border-radius: 20px;
  background: linear-gradient(#e9e9e9, #dadada, #c8c8c8);
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3), -1px -1px 2px 1px rgba(0, 0, 0, .3), -1px 1px 2px 1px rgba(0, 0, 0, .3), 1px -1px 2px 1px rgba(0, 0, 0, .3);
  text-shadow: 0 2px white;
}


/* Removes default blue focus box */

button:focus,
button.focus {
  outline: none !important;
}

body {
  display:flex;
}

<!DOCTYPE html>
<body>
  <div class="calculator">
    <div class="row0">
      <div class="screen"><span id="output"></span></div>
    </div>
    <div class="row1">
      <button type="button" id="MC">MC</button>
      <button type="button" id="M+">M+</button>
      <button type="button" id="M-">M-</button>
      <button type="button" id="MR">MR</button>
    </div>
    <div class="row2">
      <button type="button" id="C">C</button>
      <button type="button" id="plusminus">&#x000B1</button>
      <button type="button" id="divide">&#x000F7</button>
      <button type="button" id="multiply">&#x000D7</button>
    </div>
    <div class="row3">
      <button type="button" id="7">7</button>
      <button type="button" id="8">8</button>
      <button type="button" id="9">9</button>
      <button type="button" id="minus">&#x02212</button>
    </div>
    <div class="row4">
      <button type="button" id="4">4</button>
      <button type="button" id="5">5</button>
      <button type="button" id="6">6</button>
      <button type="button" id="plus">&#x0002B</button>
    </div>
    <div class="row5">
      <button type="button" id="1">1</button>
      <button type="button" id="2">2</button>
      <button type="button" id="3">3</button>
      <button type="button" id="equal">=</button>
    </div>
    <div class="row6">
      <button type="button" id="zero">0</button>
      <button type="button" id="dot">.</button>
    </div>
  </div>
</body>

在悬停时转换你甚至可以有一些有趣的效果：这里有一个来自我的旧笔http://codepen.io/gcyrillus/full/Awtvi/的示例，如果它给你一些想法;）悬停按钮

Answer 2

您可以用{1}替换box-shadow：

box-shadow: 1px 1px 10px 3px #BFBFBF, inset 2px 2px 1px rgba(162, 162, 162, 0.4), inset -2px -2px 15px rgba(0, 0, 0, 0.6);

在行动中

*
{
    /* Looks for font on computer first, then uses the version hosted on TypeKit, then defaults to sans-serif */
    font-family: 'Myriad Pro', 'myriad-pro', sans-serif;
    font-size: 32px;

    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.calculator
{
    overflow: hidden;

    width: 417px;
    height: auto;
    margin: 100px auto;
    padding: 20px 20px 9px;

    border-radius: 20px;
    background: linear-gradient(#ddd, #b3b3b3, #9f9f9f);
    /* Temporary Beveled Edge */
    box-shadow: 1px 1px 10px 3px #BFBFBF, inset 2px 2px 1px rgba(162, 162, 162, 0.4), inset -2px -2px 15px rgba(0, 0, 0, 0.6);
}

.row0 .screen
{
    width: 100%;
    height: 65px;
    margin: 0 11px 11px 0;

    border: 5px solid gray;
    border-radius: 10px;
    background: linear-gradient(#eefcd7, #d6e4c1);
}

.row1,
.row2,
.row3,
.row4,
.row5,
.row6
{
    width: 100%;
}

#zero
{
    width: 183px;
    padding-left: 35px;

    text-align: left;
}

#equal
{
    line-height: 229px;

    height: 141px;
    margin: 0 0 -141px;
}

button,
.row0
{
    overflow: hidden;
}

#MR,
#multiply,
#minus,
#plus,
#equal
{
    margin-right: 0;
}

button
{
    font-size: 36px;
    line-height: 65px;

    float: left;

    width: 86px;
    height: 65px;
    margin: 0 11px 11px 0;

    text-align: center;

    color: black;
    border-radius: 20px;
    background: linear-gradient(#e9e9e9, #dadada, #c8c8c8);
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3), -1px -1px 2px 1px rgba(0, 0, 0, .3), -1px 1px 2px 1px rgba(0, 0, 0, .3), 1px -1px 2px 1px rgba(0, 0, 0, .3);
    text-shadow: 0 2px white;
}


/* Removes default blue focus box */

button:focus,
button.focus
{
    outline: none !important;
}

<!DOCTYPE html>
<body>
  <div class="calculator">
    <div class="row0">
      <div class="screen"><span id="output"></span></div>
    </div>
    <div class="row1">
      <button type="button" id="MC">MC</button>
      <button type="button" id="M+">M+</button>
      <button type="button" id="M-">M-</button>
      <button type="button" id="MR">MR</button>
    </div>
    <div class="row2">
      <button type="button" id="C">C</button>
      <button type="button" id="plusminus">&#x000B1</button>
      <button type="button" id="divide">&#x000F7</button>
      <button type="button" id="multiply">&#x000D7</button>
    </div>
    <div class="row3">
      <button type="button" id="7">7</button>
      <button type="button" id="8">8</button>
      <button type="button" id="9">9</button>
      <button type="button" id="minus">&#x02212</button>
    </div>
    <div class="row4">
      <button type="button" id="4">4</button>
      <button type="button" id="5">5</button>
      <button type="button" id="6">6</button>
      <button type="button" id="plus">&#x0002B</button>
    </div>
    <div class="row5">
      <button type="button" id="1">1</button>
      <button type="button" id="2">2</button>
      <button type="button" id="3">3</button>
      <button type="button" id="equal">=</button>
    </div>
    <div class="row6">
      <button type="button" id="zero">0</button>
      <button type="button" id="dot">.</button>
    </div>
  </div>
</body>

在CSS中重新创建Edge

2 个答案:

在行动中