BLOG
このサイトでやってるちょっとした小ワザ集~HTMLやCSS
当サイト「クロノスブレイン」でやっている、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