タグ

2020年1月14日のブックマーク (2件)

  • 画像に簡単にぼかしをかけられるプラグイン「Background Blur」 | ライフハッカー・ジャパン

    「Background Blur」は画像に簡単にぼかしをかけられるプラグインです。jQueryのプラグインとして提供されています。IE6など古いブラウザやiOSのSafari、Androidのブラウザなどモバイルにも対応していることが特徴。 以下に使ってみた様子を載せておきます。まず「Background Blur」へアクセスしましょう。導入方法はプラグインをダウンロードしてCSSとぼかしの設定をするだけ。 サンプルが提示されていますが、このように画像に対してぼかしをリアルタイムにかけることができます。IE6など古いブラウザはぼかすときのアニメーションが効きませんが、ぼかし自体には問題ない模様。スマートフォンのブラウザにも対応しているので導入しやすいですね。画像をぼかしたいときにぜひご活用ください。 Background Blur (カメきち)

    画像に簡単にぼかしをかけられるプラグイン「Background Blur」 | ライフハッカー・ジャパン
  • CSS3を使ってできる画像まわりのエフェクトやスタイリング18

    CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード(シャドウ編) 13. フェード(グラデーション編) 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

    CSS3を使ってできる画像まわりのエフェクトやスタイリング18