CSS でつまづいたポイント ― transparent, transition, box-sizing
過去に CSS でつまづいたポイントとかメモしておこうと思います。
このくらい分かっとけと言われそうですが、まあ自分はその程度だということで。
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 は rgba(0, 0, 0, 0) のショートハンドキーワードとして扱われるからです。つまりは黒の不透明度ゼロですね。
CSS Color Module Level 3 に書かれていますのでご参照ください。
CSS Color Module Level 3 – 4.2.3. ‘transparent’ color keyword
transparent はグラデーションのときと、transition のときでは扱いが変わるそうです。
CSS Gradientにおける"transparent" – Weblog – hail2u.net
Opera だとグラデーションのときにも自動で色調整してるっぽいです。さっきのデモを Opera で見ると黒い部分はでてきません。
ホバー時の 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 に指定すると、マウスが乗っているときだけの指定になってしまうので、マウスが離れたときには適用されず、すぐ元の状態に戻ってしまいます。
ホバーで何か 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
この記事読むまで知りませんでした……。
他にもいろいろあった気がするんですが、ぱっと思い出せるのはこのくらいです。