よく使う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は使われていますね。

ユーザにとってもどこにカーソルがあるのかわかりやすくなりますので、
手軽にできてユーザ離れも減るかもしれません。

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
何かぼんやりと勉強会をしたいなぁと思っています。
ネタ募集中です。
関西で開催する予定ですので、関西の方はお楽しみに！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

コメント

コメントを投稿

このブログの人気の投稿

perlのMIME::Liteならメール送信はすぐ書ける。その２

メール送信のモジュールMIME::Liteを利用してそういえばこんなの作りました。のコード。 PHPMailerと比較してPerlは結構コーディングが楽だと感じました。 #!/usr/bin/perl # # $Id: perlmailer.pl 35560 2010-05-29 01:08:30Z watanabefg $ # use strict; use warnings; use Encode; use utf8; use MIME::Lite; use File::Basename; my $mail_from = $ENV{'MAIL_FROM'}; my $mail_to = $ENV{'MAIL_TO'}; my $mail_subject = decode('shiftjis', $ENV{'MAIL_SUBJECT'}); my $mail_body = decode('shiftjis', $ENV{'MAIL_BODY'}); my @mail_attach = (); my $message = MIME::Lite->new( From => $mail_from, To => $mail_to, Subject => encode('MIME-Header-ISO_2022_JP', $mail_subject), Type => 'multipart/mixed', ); # メール本文 $message->attach( Type => 'text/plain; charset="ISO-2022-JP"', Data => encode('ISO-2022-JP', $mail_body), ); # 添付ファイルを取得 if ($ENV{'MAIL_ATTACH'} ne ""){ @mail_attach = split(/\,/, $ENV{'MAIL_ATTACH'}); } if ($#m...
続きを読む

シグマはどう実装するか

気付いたもののメモです。 数学のシグマについてですが、どうやって実装するのが良いのかという話です。 私は安易に飛びついてforで回してしまったのですが、 mapで各要素を計算したコレクションを作ってsumするのが短く書けていて賢く思えました。 短く書くのはクセづけたいけどどこかで使うことあるかなぁ。。
続きを読む

GAEでOAuthというかTwitter認証してみた。

イメージ
結構てこずりましたが、Google App Engine for Pythonで OAuth認証というかTwitter認証をしてみました。 Softbankの夏モデル携帯でTwitterが機能の一つとして入っているものが発表され、 これからTwitterの人口はどんどん増えるはずなので、 OpenIDみたいな統合認証のようにOAuthを使えたらなぁという思いでコーディングしてみました。 元ネタは サンプルコードで分かるGAE＆Twitter API開発 。 その節はお世話になりました。 oauth.py, simple_cookie.pyなどは上記のリンク先から取得してください。 verify後にリロードするとバグっていたので、self.redirect('/')で直しました。 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = "Hironori Watanabe" import time import datetime import logging import os import oauth import wsgiref.handlers from google.appengine.ext import webapp from google.appengine.ext.webapp import util from google.appengine.ext.webapp import template from simple_cookie import Cookies from google.appengine.ext import db _DEBUG = True INDEX_TEMPLATE_NAME = 'index.html' LOGIN_TEMPLATE_NAME = 'login.html' HOME_TEMPLATE_NAME = 'home.html' # twitterのconsumer_keyとconsumer_secret_keyを指定 CONSUMER_KEY = "xxxxx自分のコンシューマキーを入れてねxxxxx" CONSUM...
続きを読む