jQueryやCSS3を使って画面の一部をぼかす方法を考える | スターフィールド株式会社SafariやGoogle Chromeなど、webkitを使ったブラウザではCCS3のfilterを使って、コンテンツをぼかすことができます。 しかし、上に重ねたコンテンツのところだけをぼかすように、部分的にぼかすことはできません。 SVGを使った方法もありますが、CSS3のfilterとjQueryを使ってなんとかできないかやってみました。 ↓こちらが作ってみたものです(ChromeもしくはSafariでご覧下さい)。 DEMO
IE7,8で背景を透過させる方法 – creamu
IE7,8で背景に透過pngを使っていて、その上にさらに透過pngの画像を置く場合、 背景の方の表示がおかしくなる（黒で汚く塗りつぶされたようになる）場合があります。 その場合は、CSSで以下のように指定します。 background:rgba(255,255,255,0.3); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#4cffffff’, endColorstr=’#4cffffff’); ref: rgba()とfilterで背景だけを透過させる。 10進数/16進数対応表 startColorstrとendColorstrの指定が難しいですが、 「xxrrggbb」（xxは16進数、rrggbbはrgbを2つずつ繋げたもの）となります。 上記「10進数/16進数
第8回 ぼかしフィルタとアルファマスク | gihyo.jp
今回からまた新たなお題を、EaselJSサイトのデモから頂戴しよう。「ALPHAMASK FILTER」というサンプルで、アルファチャネルのマスクが動的につくられる（図1）。EaselJSのDisplayObjectインスタンスには、Shapeオブジェクトでベクターマスクがかけられる（DisplayObject.maskプロパティ）。アルファマスクは、ベクターマスクとは異なり、AlphaMaskFilterクラスで扱われるフィルタだ。「ALPHAMASK FILTER」では、さらにBoxBlurFilterクラスで、インスタンスのイメージにぼかしを加えている。今回は、まずこのふたつのフィルタの使い方を学ぼう。 図1 EaselJSサイトのデモ「ALPHAMASK FILTER」 外部画像ファイルから読込んだイメージをインスタンスにしてステージに置く フィルタをかけるには、ステー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPadで白の透過pngがグレーになってしまう場合の対処法 – creamu
Fun with SVG Filters – Alan Greenblatt
