CSSでつまづいたポイント ― transparent, transition, box-sizing

transparentについて

CSSグラデーションで何か黒くなるなーと思ったら、transparentを使っていないかどうか見てみましょう。
たとえば、透明から青に綺麗にグラデーションしたいという場合、次のような指定では上手くいきません。

.gradient {
  background: linear-gradient(top, transparent, #268bd2);
}

こういう場合、グラデーション開始地点の色をtransparentではなく、終了地点の色をrgbaで不透明度0で指定します。
今回は#268bd2ですので、rgba(38, 139, 210, 0)ですね。

修正後はこんな感じの指定になります。

.gradient {
  background: linear-gradient(top, rgba(38, 139, 210, 0), #268bd2);
}

色の指定方法が混ざって分かりづらいときは終了地点もrgbaかrgbで書くといいんじゃないでしょうか。
違いはデモでご確認ください。

transparentを使ったCSSグラデーション

なんでこういうことが起きるのかというと、transparentはrgba(0, 0, 0, 0)のショートハンドキーワードとして扱われるからです。つまりは黒の不透明度ゼロですね。
CSS Color Module Level 3に書かれていますのでご参照ください。

CSS Color Module Level 3 - 4.2.3. ‘transparent’ color keyword

ホバー時のtransitionについて

ある要素にマウスオーバーしたときに何か変化させるというのはよくありますが、transitionでその変化をアニメーションさせられるようになります（なりました）。
そこでハマったのは、マウスが乗ったときはアニメーションしながら変化するのに、マウスが離れたら一瞬で元の状態に戻ってしまう、というもの。

マウスが乗ったときには背景色を変えたいと思って、次のように書いたとしましょう。

.transition {
  background: #fff;
}

.transition:hover {
  background: #268bd2;
  transition: all 1s linear;
}

こういう指定をするとマウスが離れたときに一瞬で戻ってしまいます。
これを修正するには次のように書きます。

.transition {
  background: #fff;
  transition: all 1s linear;
}

.transition:hover {
  background: #268bd2;
}

transitionの指定を:hoverのところじゃなくて、元の要素に指定を変更しました。
:hoverに指定すると、マウスが乗っているときだけの指定になってしまうので、マウスが離れたときには適用されず、すぐ元の状態に戻ってしまいます。

:hoverに適用したtransition

ホバーで何かtransition使ってアニメーションさせるときには、:hover擬似クラスではなく、元のセレクタの方に指定するようにしたほうがいいでしょう。
離れたらすぐに元の状態に戻したい場合は:hoverに指定するといいんじゃないでしょうか。

hr要素がFirefoxだけ変

何もスタイルを指定していないhr要素をFirebugで見ると分かりますが、-moz-box-sizing: border-boxが指定されています。
なので、最初に統一しておくといいかもしれません。

一応、自分はhr要素を使う場合にはこんな感じのを入れてます。

hr {
  -moz-box-sizing: content-box;
  height: 0;
}

hr要素のbox-sizing - おれ ここ めも かきなぐる おまえ ここ よむ なぐる - subtech

この記事読むまで知りませんでした……。