頭の中は異空間

ものづくり中心

CSSデザイン比較その1 - box-shadow

CSS HTML
f:id:notwo:20161102224534j:plain

 

これは、デザイン追加時に「あれどうなるんだっけ？」って思う微妙なデザインを分かりやすく、視覚的に比較する(微妙に韻を踏んでる)シリーズです。

いちいち使い方とか結果をググるのも面倒だし、他で使われてるのを見ても効果が分かりづらかったりしますからね。

そこでどんなのを紹介するかというと、オプションがわかりづらいもの。ここではbox-shadowの結果について。

 

表示結果

box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9);
box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9);
box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9);
box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9);
box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9) inset;
box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9) inset;
box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9) inset;

code

HTML

<body>
  <div class="test-box">
    <div class="box-shadow1">
      box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow2">
      box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow3">
      box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow4">
      box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow5">
      box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow6">
      box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
    </div>
        <div class="box-shadow7">
      box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
    </div>
    <div class="box-shadow8">
      box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9) inset;
    </div>
    <div class="box-shadow9">
      box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9) inset;
    </div>
    <div class="box-shadow10">
      box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9) inset;
    </div>
  </div>
</body>

 

 

CSS

.test-box * {
  width: 500px;
  height: 40px;
  margin: 35px;
}
.box-shadow1 {
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9);
}
.box-shadow2 {
  box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9);
}
.box-shadow3 {
  box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9);
}
.box-shadow4 {
  box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9);
}
.box-shadow5 {
  box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9);
}
.box-shadow6 {
  padding: 8px;
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
}
.box-shadow7 {
  padding: 8px;
  box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
}
.box-shadow8 {
  padding: 8px;
  box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9) inset;
}
.box-shadow9 {
  padding: 8px;
  box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9) inset;
}
.box-shadow10 {
  padding: 8px;
  box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9) inset;
}

ひと目で分かるように、中のテキストは実際に当てたデザイン通りにしています。

こうやって各パラメータ変更時の結果を載せておけば、具体的にどこを変えると表示がどう変わるのかが視覚的に分かりやすいです。自分でサイトを作るときにも使える知識なので、そんなときに是非。