divでCSSを分割する

CSS3でdivをぼかすことはできますか？そして、私はJavaScriptのぼかしを意味するわけではない、私はPhotoshopのぼかしを意味する。divでCSSを分割する

divの辺がぼやけていないようにするには、divの内容にぼかしを加えたいと思います。（私はあまりブラウザから尋ねていますか？）

もし可能でないなら、どのような良い回避策テクニックがありますか？

2010-12-18 Utkarsh Sinha

つまり、フィルタを使用することができます。http://msdn.microsoft.com/en-us/library/ms532979(VS.85).aspxキャンバスを使用している他のブラウザでは、移動する方法があります。 – Zevan

SVGフィルタでも可能です。

基本的なことは、単純なことだということです。feGaussianBlur

ここにある：http://jsfiddle.net/aXUtU/1/

これは、Firefox 4で動作し、名前空間/のxmlnsのもの（私はそれが3.6で動作するはずだと思う）なしsvg要素を使用しての問題を除いて、最大3.5から動作するはずです。

フローイングにどれくらいのスペースがあるかという問題があります。そのテキストを1行にすると、特に最後のものがクリップされていることがわかります。

同様の効果を得ることができbox-shadow S（insetと当初）とtext-shadowを、あなたのコンテンツに応じて、複数を組み合わせます。上記のリンクにも、テキストと同様の効果を得るためのスタートが含まれています。

出典

2010-12-18 10:48:04

それはFirefoxでのみ機能することを言及する価値があります（私のChromeはそれをレンダリングしなかったので、他の人もそれをやっていないと思います）。結局のところ、それほど大きな解決策ではありません。 – jolt

@Tom：ブラウザのサポートは不明でしたが、まだFirefoxだったと感じました。 SVGを使用する方法はちょっと面倒です。例えば背景画像は、現代のすべてのブラウザでSVGと連携します（私はFF4を現代、3.6はそうでないと分類します）。あるいは、ドキュメントの実際のセクションがSVGで行われた場合、それは機能します。 @Utkarsh：SVGフィルタはおそらくブラウザのサポートのために必要なことをしませんが、私の 'box-shadow' +' text-shadow'の提案は、画像が関与していなければそれを振るべきです。私はデモを少しの例で更新します。 –

私は彼が選択肢を探しているのを見ても、CSSではありません。 – Rob

はまあ...私はこの思い付いた：

.blur { 
    color: transparent; 
    text-shadow: 0px 0px 2px #000000; 
}

これは確かに、テキストがぼやけようになります！唯一のことは、テキストだけがぼやけてしまうことです。影響を受けた画像はありません。しかし、私はこれと一緒にhttp://plugins.jquery.com/project/blurimageあなたはそれをより強力にすることができると思います！

実験を楽しみましょう！

出典

2010-12-18 15:05:52 jolt

答えて

関連する問題