読者です 読者をやめる 読者になる 読者になる

Life, Education, Death

プログラミング以外でも思ったことをつらつらと書きたい

円形のぼかし処理をcssでいれる

色のついた●にぼかし処理を入れたいと思ったのでCSS3でフィルターを探していたところ。フィルターというとIEの拡張のフィルタぐらいしか見つからなかったのでそれっぽい処理を検討しました。

1. box-shadowを使う

HugeDomains.com - MonodEz.com is for Sale (Monod Ez)
を見ながら、box-shadowを使って実験しました。

結果としてはこんな感じ。イメージ通りのぼやっとした円が描けました。

ボックスを小さくして、box-shadowのパラメータを大きくしていくと、円形に表示されるようになりました。
元となるボックスが表示されるので、背景の色を透明などにしておけばいいかもしれません。

コードは以下の通りです。

<p class="blur-effect title">box-shadow sample</p>
<div class="blur-effect-back">
  <div class="blur-effect box-shadow">
  </div>
</div>
.blur-effect.box-shadow{
    -webkit-box-shadow: 3px 3px 5px 0px #777; /* Safari, Chrome用 */
    -moz-box-shadow: 3px 3px 5px 0px #777; /* Firefox用 */
    box-shadow: 3px 3px 5px 0px #777; /* CSS3 */
	
    background-color: #777777;
    box-shadow: 100px 90px 25px 0 #FF0000;
    height: 30px;
    width: 30px;
}

2. text-shadowを使う

css3のtext-shadowによるテキスト装飾のサンプル集 - かちびと.net
を見ながら、テキストにブラー効果を書けられることがわかったので、それを使ってみました。

結果としてはこんな感じです。

●のテキストにエフェクトをかけて対応しました。テキストなので、●の部分が選択可能なので
見た目以外の部分に影響が出ているのが困ることがあるかもしれません。
また、Firefox5.0.1とOpera11.61で見た目が異なっているのでブラーのサイズが大きすぎると
見た目の誤差が大きく使いづらそうです。

<p class="blur-effect title">text-shadow sample</p>
<div class="blur-effect-back">
  <div class="blur-effect text-shadow"></div>
</div>
.blur-effect.text-shadow{
    color: rgba(255, 0, 0, 0.01);
    font-size: 100px;
    padding-top: 80px;
    text-align: center;
    text-shadow: 0 0 35px rgba(255, 0, 0, 0.5), 0 0 30px rgba(255, 0, 0, 0.5);
}

まとめ

cssを使ってぼかしをすることは可能。
イメージ通りの表現が確認できたので満足した。
ブラウザ間(特にモバイル)で見た目がどのぐらい違うか確認出来ていないので追試が必要。


あとcanvasを使っても出来るかもしれないが、それはまだ調べていない(この辺りが参考になるかも)


実験に使ったデモ用もページを用意しました。
http://nilfs.github.com/samples.html