web-dev-qa-db-ja.com

CSSのPNG画像のドロップシャドウ

自由形式（非正方形）のPNG画像があります。

この画像に影付き効果を適用する必要があります。

標準的なアプローチ.

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

...この画像には四角形のように影が表示されます。それで、私は私のイメージと正方形の影を見ます、それはイメージの中に表示されるオブジェクトの形には従いません。

それを正しく行う方法はありますか？

cssimagepngtransparency
173
AntonAL

パーティーには少し時間がかかりますが、確かに、（Webkit用の）dropshadow-filter、（Firefox用の）SVG、およびIE用のDXフィルターの組み合わせを使用して、アルファマスクPNGの周囲に「真の」動的ドロップシャドウを作成できます。

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

本当のドロップシャドウとボックスシャドウの比較 and 今説明したテクニックに関する記事 。

これが役に立つことを願っています！

239
Dudley Storey

はい、CSSでもインラインでも filter: dropShadow(x y blur? spread? color?) を使うことは可能です。

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}
<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">
149
Abdul

ドロップシャドウを付けたい画像が100個以上ある場合は、コマンドラインプログラム ImageMagick を使用することをお勧めします。これを使うと、1つのコマンドを入力するだけで、100個の画像に整形ドロップシャドウを適用できます。例えば：

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

上記の（シェル）コマンドは、現在のディレクトリ内の各.pngファイルを取得し、ドロップシャドウを適用して、その結果をshadow /ディレクトリに保存します。生成されたドロップシャドウが気に入らない場合は、パラメータを調整することができます。 影のドキュメント と一般的な 使用方法 を見ることから始めましょう。画像にできることのクールな例がたくさんあります。

ドロップシャドウの外観について将来的に考えが変わった場合 - さまざまなパラメータで新しい画像を生成するための1つのコマンドです。

37
psmears

Dudleyが 彼の答え で述べたように、これはWebkit用のドロップシャドウCSSフィルタ、Firefox用のSVG、およびInternet Explorer 9用のDirectXフィルタで可能です。

さらに1つのステップは、余分な要求を排除してSVGをインライン化することです。

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
28
Karl Horky
img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

それは私にとって素晴らしい仕事でした..あなたがeiであなたがフルカラー（＃222222）を必要とすることに注意する1つのことは動作しません。

19
Jaclyn U

ブロックの場合は、クラスに半径付きの枠線を追加します。なぜなら、デフォルトでは、影が丸い角を持っていても、影はブロックの境界線に適用されるからです。

border-radius: 4px;

あなたのイメージコーナーに従ってボーダー半径を変更してください。この助けを願っています。

17
anupal

これを追加するだけです：

-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff);

例：

<img class="home-tab-item-img" src="img/search.png"> 

.home-tab-item-img{
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
     filter: drop-shadow(5px 5px 5px #fff); 
}
9
Mahmoud Zalt

これがこのための準備ができているグローホバーアニメーションコードスニペットです：

http://codepen.io/widhi_allan/pen/ltaCq

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
5
Dmitry Kaigorodov

私の場合は、PNG画像をさまざまな形や透明度で、最新のモバイルブラウザで動作させる必要がありました。画像の複製を使用してドロップシャドウを作成しました。つまり、私は同じ画像の2つのimg要素を（position: absoluteを使って）上に重ね、後ろには次の規則が適用されることを意味します。

.image-shadow { filter: blur(10px) brightness(-100); -webkit-filter: blur(10px) brightness(-100); opacity: .5; }

これには、下の画像を暗くするための明るさフィルタと、通常はシャドウ効果がある影を落とすためのぼかしフィルタが含まれます。それを和らげるために、50％の不透明度が適用されます。

これはmozおよびmsフラグを使用してブラウザ間で適用できます。

例： https://jsfiddle.net/5mLssm7o/

2
ido

私が最初にこれを投稿したとき、それは可能ではなかったのでこれは回避策です。今私は単に他の答えを使うことを提案します。

画像の輪郭を正確に取得する方法はありませんが、中央の画像の後ろにdivを付けて偽造することができます。

私のトリックがうまくいかない場合は、画像を切り取って、すべての小さな画像に対して実行する必要があります。 （より多くの画像は影がより正確に見えるでしょう）しかしほとんどの画像のためにそれはちょうど1 imgで大丈夫に見えます。

あなたがする必要があるのはそのようにあなたのimgの周りにラップdivを置くことです

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

それからあなたはラップの中に空の仕切りを入れる（これは影として働くだろう）

<div id="imgWrap">
    <div id="shadow"> </div>
    <img id="img" scr="imgLocation">
</div>

そして、影をimgの後ろにCSSで表示させる必要があります。

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

imgWrapを配置して元のimgを配置します... imgの影を中心に配置するには、box-shadowの最初の2つの値でそれらを負にします。またはimgとshadow divを絶対に配置できます。 imgの上部と左の値を0、シャドウのdiv値をそれぞれimgの幅と高さの半分にします。

これが恐ろしいと思えばあなたのimgを切ってやり直してください。

（輪郭の上だけでimgの背後に影を付けたくない場合は、imgを不透明にして、まるでそれが透明であるかのように機能させる必要がありますが、それほど難しいことではありません。

2
Xitcod13

多分あなたはこれを探しています。 http://lineandpixel.com/blog/png-shadow

img { png-shadow: 5px 5px 5px #222; }
1
Abhishek D

これはcssでは不可能です - 画像は正方形なので、影は正方形の影になります。最も簡単な方法は、コアドローのように影を付けるためにphotoshop/gimpまたは他の画像エディタを使用することです。

1
oezi

すべてのブラウザでこれを確実に行うことはできません。マイクロソフトは、IE 10以降のDXフィルターをサポートしていません。そのため、ここでの解決策はどれも完全には機能しません。

https://msdn.Microsoft.com/ja-jp/library/hh801215（v = vs85）.aspx

すべてのブラウザで確実に機能する唯一のプロパティはbox-shadowです。これは要素に境界線を追加するだけ（たとえばdiv）、その結果正方形の境界線になります。

box-shadow：horizo​​ntalOffset verticalOffset blurDistance spreadDistance色インセット。

例えば.

box-shadow: -2px 6px 12px 6px #CCCED0;

偶然「正方形」だが一様な丸みのある角を持つ画像がある場合、ドロップシャドウはborder-radiusで機能するので、いつでもあなたのdivの中であなたの画像の丸みのある角をエミュレートすることができます。

これがbox-shadowに関するマイクロソフトのドキュメントです。

https://msdn.Microsoft.com/ja-jp/library/gg589484（v = vs85）.aspx

1
Chris Halcrow

任意の形をしたドロップシャドウに使用できる提案された機能があります。あなたはここでそれを見ることができました、Lea Verouの礼儀：

http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom

ただし、ブラウザのサポートは最小限です。

1
avramov

「小さな」影が必要なときによく使用するトリック（read：contourは超精密であってはいけません）は、画像の下に100％ - 黒から100％ - 透明の放射状のDIVを配置することです。 DIVのCSSは次のようになります。

.shadow320x320{    
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

これにより、320×320のDIVに円形の黒いフェードアウト「ドット」が作成されます。 DIVの高さまたは幅を拡大縮小すると、対応する楕円形になります。ボトルや他の円柱のような形の下に影を作るのにとてもいいです。

ここにCSSグラデーションを作成するための絶対に信じられないほどの、非常に優れたツールがあります：

http://www.colorzilla.com/gradient-editor/

ps：あなたがそれを使うとき礼儀広告クリックをしなさい。 （そして、いいえ、私はそれと提携していません。しかし、特にあなたがよく使うツールの場合は、礼儀正しいクリックはちょっとした習慣になるでしょう。 ）

1
Rid Iculous