よく使うCSS3 tips
最近CSS3で結構書くことが増えてきました。 とりあえずフォーム要素への指定が以前よりやり易くなっているので、ユーザビリティを考えてもよく使うかなーと思うものをあげてみます。 form input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border:1px solid #3C9501; -webkit-box-shadow:inset 3px 3px 2px #DDD, 0 0 8px #216300; -moz-box-shadow:inset 3px 3px 2px #DDD, 0 0 8px #216300; box-shadow:inset 3px 3px 2px #DDD, 0 0 8px #216300; } フォームの入力要素に対して、ボーダーの色を替えるのと、 -webkit-box-shadowでgoogle chrome、-moz-box-shadowでfirefox、box-shadowでsafariに対応の影をつけます。insetの記述はオプションですが、内側に何も書かなければ外側に影がつきます。 以前まで入力要素に対して、background-image:url('')として影となる画像をつけていましたが、それがなくなりました。 また、以前まで入力要素に対して、onfocusとonblurを利用してフォーカスされたようなスタイルとしていましたが、:focusだけでできるようになりました。 twitterなどでも*box-shadowは使われていますね。 ユーザにとってもどこにカーソルがあるのかわかりやすくなりますので、 手軽にできてユーザ離れも減るかもしれません。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ 何かぼんやりと勉強会をしたいなぁと思っています。 ネタ募集中です。 関西で開催する予定ですので、関西の方はお楽しみに! ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★