コーディングコンテストに参加しました

今回、初めて画像からHTMLの起こし、CSSの適用までやってみましたが、まー大変ですね。
コーダーのみなさん、ありがとございますです。

でも、1枚なんとかやり遂げたので、2枚目以降はもっとスムーズだと思うし、大体の時間間隔もつかめたことですし、説得力のある無理のいいかたができるのではないかと（おい

というわけで今回気づいたこと・やったことをまとめてみました

しかし、HTML5とCSS3で表現力があがりますね！楽しいぞ！未来！

角丸

この辺は基本ですよね。もう。山ほど、ノウハウだったりtipsもでてますし。

-moz-border-radius: 12px;
-webkit-border-top: 12px;

ちょっとだけ気の利いた事するんだったら、例えば、4つ角の1箇所だけ角丸にしたい場合
- mozillaとwebkitで異なっているのでちょっと注意が必要です

-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;

グラデーション

これももう基本といってもいいのではないでしょうか。山ほどtipsも落ちてます

background-image: 
-webkit-gradient(
  linear,
  left top,
  left bottom,
  from(#ACC7CC),
  color-stop(0.1, #89ADB3),
  color-stop(0.5, #5E777B),
  color-stop(0.5, #52676B),
  color-stop(0.9, #39484B),
  to(#425053)
);
background-image: 
-moz-linear-gradient(
  top,
  #ACC7CC   0%,
  #89ADB3  10%,
  #5E777B  50%,
  #52676B  50%,
  #39484B  90%,
  #425053 100%
);

ちょっとだけmozillaとwebkitで違うから注意が必要です。あと、透明度もrgba()で指定できるです。

チェック

背景で色をつけて、背景画像グラデーションで「透過」指定をするとストライプを表現することができます。

background-repeat: repeat;
-moz-background-size: 4px 4px;
-webkit-background-size: 4px 4px;
background: #13383F;
background-image:
-webkit-gradient(
  linear,
  left top,
  right top,
  from(rgba(0, 0, 0, 0)),
  color-stop(0.33, rgba(0, 0, 0, 0)),
  color-stop(0.33, #10272c),
  to(#10272c)
);
background-image:
-moz-linear-gradient(
  left,
  rgba(0,0,0,0)   0%,
  rgba(0,0,0,0)  25%,
  #10272c  25%,
  #10272c 100%
);

repeatとsizeを指定するのが肝っぽいです。

で、こいつを重ねあわせることでチェックパターンを表現できます

<div class="verticalstripe">
  <div class="horizontalstripe">
  </div>
</div>

さらに、こいつにグラデーションをかけたりすることもできます

<div class="verticalstripe">
  <div class="horizontalstripe">
    <div class="verticalgradation">
    </div>
  </div>
</div>

フォント影

これももう全然基本です。iPhoneのボタンとかそういったパーツは大体text-shadowしてあって金属に刻印したみたいになってますしね。
こいつはもう、prefixが取れてますね。

text-shadow: 1px 1px 2px #FFF;

要素影

これも基本ですね。影をつけるだけではなく、glowの効果も出せますしね。

-moz-box-shadow: 1px 1px 1px #666;
-webkit-box-shadow: 1px 1px 1px #666;

面白いのはmozillaだけは、insetを指定することで内部に影を落とすことができます。
これを使うことでbutton:activeのような時のボタンがくぼんだ様子を簡単に表現できます

button:active {
  -moz-box-shadow: inset 2px 2px 4px #CCC;
}

とすると左上の辺から影が落ちます。

バッジ

これは、どうなんだろう、みんなは画像でしてたのか、当然CSSでしてたのか気になるところですが
よく「NEW!」とか「FREE!」とかってテキストが斜めってて、丸いアイコンの中に入ってるあれです。ポップなあいつです。
あれもCSSだけで表現できます

<div class="badge">
  <span>NEW!</span>
</div>

と

div.badge {
  margin: 0;
  width: 45px;
  height: 45px;
  -moz-box-shadow: 1px 1px 1px #666;
  -webkit-box-shadow: 1px 1px 1px #666;
  -moz-border-radius: 100%;
  -webkit-border-radius: 23px;
  vertical-align: middle;
  text-align: center;
}
div.badge span {
  display: block;
  margin: 14px 0 0 0;
  font-size:14px;
  font-weight: bold;
  -moz-transform:rotate(-16deg);
  -webkit-transform:rotate(-16deg);
}

textの変形

ダウンロードボタンとか、こちらへ、とかのボタンの端っこの方に▲の潰れたのが下むいたり、右向いたりしてると思います。あいつもこれまでだったら画像でやってたと思うんですが、それもできます。

<button>
  <a href="#">ダウンロードはこちら</a>
</button>

と

button {
}
button a {
}
button a:after {
  float: right;
  margin-right: 10px;
  content: "▲";
  -moz-transform: rotate(90deg) scale(1, 0.7);
  -webkit-transform: rotate(90deg) scale(1, 0.7);
}