web-dev-qa-db-ja.com

CSSを使用して、正方形以外のドロップシャドウをPNGコンテンツに追加できますか？

PNGのコンテンツに影を落とすことは可能ですか？

正方形ではない、しかしオブジェクトは影を落とす
PNGの不透明なコンテンツに作用します。

cssimagetransparencyshadowcss-filters
47
Kirk Strobeck

それは間違いなく可能です。

フィルターを使用して、サンプル：

img { 
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}
111
Slake

CSSでこれを行うことはできません。ただし、キャンバスを介してそれを行うことは非常に可能ですが、（クライアントによって毎回処理されるため）幾分非効率的であり、JavaScriptに依存します。 PNGで実行する方が簡単で、より多くのブラウザで動作します。

さらに詳しい情報が必要な場合は、「html canvas blur」や「html canvas load image」などをウェブで検索してください。または、さらに良いことに、すべてを実行できるキャンバスシャドウ機能を使用します。

以下に例を示します。 http://philip.html5.org/demos/canvas/shadows/various.html

  • キャンバスからコンテキストを作成する
  • context.shadow(Color|OffsetX|OffsetY|Blur)を必要に応じて設定します
  • context.drawImageを使用してimgタグからPNGをロードします
  • ああ！影！

そしてボーナス：

  • pNGにエクスポートする場合はcontext.toDataURLを使用します（PNGをドロップするWebアプリを作成すると、影が付きます）。
19
Chris Morgan

時代の変化。現在受け入れられている回答に示されているように、 一部のブラウザでは が可能になりました。

CSSを使用してこれを行うことはできません。

それが私があなたが求めていると思うことです。

12
thirtydot

CSSで利用できるようになるまで、私のアプローチを試すことができます。

私の例ではこの写真を使用しています。

original image

透明な背景があり、正方形ではないため（CSSのボックスシャドウが動作するため）。それはあまり空想ではありませんが、この小さくてシンプルなチュートリアルをうまく提供します。

次のステップは、上の画像に基づいて別の画像を作成し、元の画像の下に配置することでした。

ステップ1。ぼかしを追加：

blurred original

ステップ2。光とコントラストを削除：

the shadow

だから、オリジナルとシャドウがあります。

次に、あたかも影のように表示します。

スタイル：

.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}

.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}

.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}

魔法をかける：

1つのdivを追加し、attribute class="divOriginal common "とclass="divShadow common"を使用して別のdivを設定します。

結果は次のようになります。

result: pseudo-shadow

乾杯！

アディ

6
AdiKonstantin

キャンバスに関するChris Morganの提案に基づいて、このためのjQueryプラグインを作成しました。 GitHubで見つけることができます： https://github.com/Kukunin/image-shadow

3
Kukunin

Createjsサンプルの使用は JSFiddle にあります。

shadowTarget.shadow = shadow;

stage.addChild(shadowTarget);

shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;

shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;
1
Hoy Cheung