こんにちは、工藤です。
今回は個人的に設定しておくと便利なcssをご紹介します。
box-sizing: border-box;をユニバーサルセレクタで設定
初期状態だとpaddingとborderの幅や高さを含めずに計算してしまうのですが、『box-sizing: border-box;』を記述することでpaddingとborderも含めて計算してくれます。
とても便利なクラスですし、初期状態がこれでもいいのでは…と思うのでユニバーサルセレクタで指定してしまいます。
|
1 2 3 4 5 6 7 |
*, *:before, *:after{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } |
これでコーディング中にわざわざ計算したりする必要が全くなくなります。
もし初期状態に元に戻したい要素がある場合には『box-sizing:content-box』を指定してください。
aタグをhover時にふわっと表示させる
イメージは下の画像にマウスを当てた時のような感じです。aタグですがhoverしたときにふわっとした方が今時な感じがしますよね。（なんとなく）
なのでaタグ全部にかかるように以下のようにcssを設定します。
|
1 2 3 4 5 6 7 |
a{ -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s; } |
これで0.8s秒でaで作ったテキストもボタンも全てふわっと切り替わるようになります。
ベンダーブレフィックスは対応ブラウザによっては減らしてもいいかもしれないです。
button要素なんかもこの設定にしておくと便利です。
