当サイト「クロノスブレイン」でやっている、HTMLやCSSの“ちょっとした小ワザ”を列挙しまーす。

画像の角を丸める

imgタグに対して、border-radiusを設定して画像の角を丸めています。
IE7や8には、仕方ないのでPIE.htcを使っています。
ちなみにPIE.htcの使い方は、ググってくださいな。

マウスOn/Off時にトランジションさせる

テキストリンクやなんかにマウスをオン・オフさせた時に、色とかを切り替え（トランジション）させてます。
例えば、

.item a {
	color: #FFFFFF;
	transition: color 0.7s;
}
.item a:hover {
	color: #DE2B16;
	transition: color 0.7s;
}

みたいなカンジで、
指定したカラーに向かって0.7s（秒）毎トランジションしていきます。

画像のマウスON時にフェードさせる

リンク画像にマウスONした時に、若干半透明になるようにしています。

img a {
opacity: 0.8;
filter: alpha(opacity=80);
}

opacityで、どの程度透明度を設定するか調整できます。
filterは、IE用です。

いろんなモノに影をつける

ボックス要素に対しては、

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

ってカンジで全方向に0.2影をつけています。
ぼかしっぽくなりますね。

テキスト要素に対しては、

text-shadow: 1px 1px 2px #B6B4B5;

こんなカンジで、影をつけています。
ちょっと立体的で目立つようになりますね。

ページのテキストとかをセレクトした時の色を変える

::-moz-selection { background: #DDDDDD; color: #444444;}
::selection { background: #DDDDDD; color: #444444;}

当サイトではこんなカンジです。

IEとかで画像をクリックした時に一瞬上塗りされるグレーを除去

IEでページを表示した場合、画像リンクをクリックすると、グレーで覆われるのがイヤなカンジだったので、こうして除去してます。

a { background: none;}

以上、サラっと記してみました。
ベンダープレフィックスは考慮していませんので、旧式のブラウザに対策する場合は、適時付け足すということで。

タグ: HTML+CSS