BlankTar

about | blog | works | photo

トップページのデザイン・・・ってか、挙動を変えてみました。
ブラーって楽しいよねっ chrome(webkit)しか対応してないけどっ
どうなってんのか、簡単にメモっておくよ。

例えば、
<div id="buttons">
	<a href="#"><div>ボタン1</div></a>
	<a href="#"><div>ボタン2</div></a>
	<a href="#"><div>ボタン3</div></a>
</div>
みたいなHTMLに対して、
#buttons:hover div {
	-webkit-filter: blur(2px);
}
#buttons div:hover {
	-webkit-filter: blur(0px);
}
的なcssを適用するわけです。
1.メニュー全体にカーソルが乗っかったら、とりあえずフィルターを掛ける。
2.んで、直接カーソルが乗ってる要素だけフィルターを解除する。
的な? ・・・うん、わかりづらいね。

サンプル作るのがめんどいんで、トップページ見てください。
大体同じ事やってるからさ。


css3は本気出すとかなりなんでも出来るっぽいんだけどねー。
今回みたいなよくわからんのは環境依存が激しいのが難点。
見ての通り、今回の改良もwebkit向けっす。他のブラウザからだとなんら変わんねぇ・・・。
keyword: html css
div >
-webkit-filter:
< 親殺し・・・って、どうやんの?@C言語 親は大切に >