Background Blur - plugin by @msurguy
$tintedHolderEl.backgroundBlur({ imageURL : 'url-of-the-image', blurAmount : 10, imageClass : 'tinted-bg-blur', overlayClass : 'tinted-bg-overlay', duration: 1000, endOpacity : 1 }); .tinted-bg-blur { z-index: -2; opacity: 0; position: absolute; min-height: 100%; height: auto; display: block; top: 0; max-height: none; /* Add this CSS to remove transparent border around the image */ left: -10%; wid
iOS7 のようなブラー効果を CSS でマネてみる (Webkitのみ) § ポリゴンバーガー
iOS7 いいですよね。いいなあ。まだ持ってないんだよなあ、初代 iPad だから。アップルストアのデモ機を触って「ウフフ…」って悦に入ることくらししかできません。 まあそれはいいとして、画面下からぐーって引っ張ってコントロールセンター表示させるアレって便利ですよね。便利な上に背景要素が擦りガラスの向こうにぼやけて見えるあの感じがとてもよいです。 なので、アレをなんとかブログとかに利用できないかしらとアグアグ考えておりましたら、結局同じものはできなかったんですが背景要素をボケさせてそのうえに透過要素を重ねることはできました。（ほんとうは透過要素のかかってる部分だけブラーがかかるようにしたかったのですが、どうにもわかりません。） jQuery と CSS3 を使う感じですがそんなに複雑なものではなく、案外用途がありそうでこれはいいぞということで公開してみました。 ブラーをかける際に徐々にボケ
JavaScript？CSS？PHP？鮮明な画像をWEB上でぼかす方法。
普通の画像をアップするだけで擦りガラスのようにボケた画像を表示させたかったのです。 別にボケた画像を作れば良いのですが、正直面倒臭いし、そんな方法で運用しようとすると絶対歪みが出ますよね。 「PhotoshopがないならGIMPを使えばいいじゃない」 なんてクライアントには言えません。 というわけで、WEB上でボケた画像を生成したり、表示をするための方法を調べてみました！ CSSでぼかす 真っ先に思い浮かんだのはコレです。 CSSフィルタを使ってボカす方法です。 サンプル コード cssに以下を記述。 img.blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } どうですか？ボケてますか？ フチまでボ
どれが本命？CSSやJQueryでぼかしのエフェクトをかける方法を一通り試してみた | sounansa.net
どれが本命？CSSやJQueryでぼかしのエフェクトをかける方法を一通り試してみた 最終更新日: 2017/03/28 最近のデザインの流行から、写真をぼかしてキービジュアル画像の背景などに使う機会が増えてます。 どんなにヘボイ写真でも、かっこいいデザインに仕上がったりするからと、とりあえずぼかしておけと言われることも多いのでは。 高解像度の写真を買わなくても済むので安上がりですしね。 ぼかした写真をデザインに取り入れるとき、普通は写真をPhotoshopでぼかして、画像そのものを加工する手法が多いとは思います。でも、今回どうしても写真は加工しないで、WEBページ内でblur（ぼかし）のエフェクトをかけることが必須という大人の事情がありましたので、仕方なくいろいろ調べてみました。 やりたいことはこんな感じです。 blurをかけると、どんな方法でやる場合にも画像のふち（境界線）は、ぼやけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
