Little.ws » css応用!?

IEなんて大嫌い：Opacityを使う！

chibi — Fri, 30 Jan 2009 01:31:14 +0000

立て続けにIE6の嫌いなとこ。
Opacityでかっこよく見せたいのに見せられない。

ということで、FirefoxとかIEとかOperaとか大体のブラウザに対応させるためには・・・
css内に３行も書かないといけない！

css３からはopacityで全部対応出来るようになっているみたいですが。。
IE6のユーザーが未だに8割！？なのという感じなので、
半透明表示させるときは！

/*--不透明度50%の時の指定--*/
filter: alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;

50もしくは0.50の数値を変えることで不透明度の調整が出来ます。
不透明度なので、もちろん0指定で完全に見えなくなります。

↓例(不透明度50%指定)

ソース

IEなんて大機嫌い：a要素以外のhover擬似クラス適用

chibi — Fri, 30 Jan 2009 01:18:09 +0000

IEなんて無くなればイイと思うこと。

a以外にhover使っても適用されません。（IE7じゃ適用されるらしいけど）

そこで見つけたこんな記事
jmblog.jp – IEでa要素以外に:hover擬似クラスを適用させる
 Whatever:hover
ここにあるスクリプトを使用すれば、imgタグにもdivタグにもhoverをつけれます！

使い方は、csshover.htcをダウンロードしてcssファイル内に

body { behavior:url("csshover.htc"); }

を書き足してやるだけ。

csshover.htcを置く場所にもよるので、絶対パスで書いてあげた方がよいです。。
使ってみたけど、divタグで挙動が少し・・。

CSS Sprite

chibi — Wed, 31 Dec 2008 06:13:48 +0000

ボタンとか、角丸の枠で使うことが多いと思いますが、youtubeってほとんど一枚の画像なんですね。
DesignWalker：CSS Spriteを活用しよう

基本的に自分はGIFならGIFでひとまとめにすることが多いです。
スライスして、あとはwebsite-performanceさんにおまかせ。
日本語にも翻訳されてます。

spriteでも使えそうな画像達をzipに圧縮して、
透過色の設定とか出力画像の形式（GIF,PNG,JPG）を選択して簡単にsprite画像とcssを作成してくれます。
GIFボタン4こでやった場合の例↓

出来た画像はこんな感じです。

んで、はき出されたcssはこんな感じ

.sprite-navi_news { background-position: 0 -30px; }
.sprite-navi_home { background-position: 0 -142px; }
.sprite-navi_shop { background-position: 0 -254px; }
.sprite-navi_blog { background-position: 0 -366px; }

/*　以下ロールオーバー画像 */
.sprite-navi_news_ro { background-position: 0 -71px; }
.sprite-navi_home_ro { background-position: 0 -183px; }
.sprite-navi_shop_ro { background-position: 0 -295px; }
.sprite-navi_blog_ro { background-position: 0 -407px; }

backgroundルールの追加も忘れずに！

/*　これはサンプルです　*/
#menu ul li{
     background:url(img/hoge.gif) no-repeat left top;
}

今回は、ボタンだけで説明しましたが、ページ内のリピートされない画像はひとまとめに出来ると思います。

画像が多かったりすると、表示されなかったりすること多い世の中ですが、
spriteならHTTPリクエストの回数も減ってステキです。

自分の場合、デザイナーから『ここやっぱり変更！』っていうのもうないよね！？って確認して
最終的なデザインが通ったらspriteにしてUPしたりしてます。
spriteにしてデザイン変更あったらめんどいので。

透過pngをIEで使う！cssもいぢる

chibi — Fri, 26 Dec 2008 17:32:07 +0000

IEって無くなればいいのにと思う今日この頃。
現在制作中の案件、デザイナーがpngじゃないとﾑﾘなデザインを上げてきた。
今回はデザイン変更になったけど、一応まとめ的なもの。

透過pngって残念ながらというか当然IE6未対応な訳で。

DesignWalker：透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる
背景画像をcssで指定しても使えるようになる！
スクリプト必須ですが、これ、次から使おー。

DesignWalker：透過PNGをIE6以下のバージョンで綺麗に表示する方法
imgタグでアルファつこたpngもきれいに表示出来ちゃう。
これでgifとはさようなら。

ここでも、韓国人のシステム屋さんの活躍が光った様です。韓国のシステム屋さんって凄いよ！前の会社に居たときもお世話になりました。