1. top
2. blog
3. 2013
4. 01

トップページ改良してみたり

2013-01-04(初版) → 2020-03-28(改訂)

• HTML
• CSS

トップページのデザイン・・・ってか、挙動を変えてみました。 ブラーって楽しいよねっ　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向けっす。他のブラウザからだとなんら変わんねぇ・・・。