CSS'de PNG görüntüsü için alt gölge

Serbest form (kare olmayan) olan bir PNG resmim var.

Bu görüntüye gölge efekti uygulamam gerekiyor.

Standart yaklaşım ...

-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;

... bir kare gibi bu görüntünün gölgelerini görüntüler. Böylece, görüntüde görüntülenen nesne biçimini takip etmeyen görüntümü ve kare gölgemi görüyorum.

Düzgün yapmanın bir yolu var mı?

Partiye biraz geç, ama evet, alfa maskeli PNG'lerin etrafında "Webkit için" (Webkit için), SVG (Firefox için) ve IE için DX filtrelerin bir kombinasyonunu kullanarak "gerçek" dinamik alt gölgeler oluşturmak tamamen mümkündür.

.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>

Gerçek açılan gölge ve kutu gölge arasında bazı karşılaştırmalar ve ben sadece tarif ettik tekniğe bir makale .

Umarım bu yardımcı olur!

Evet, filter: dropShadow(x y blur? spread? color?)CSS veya satır içi kullanmak mümkündür :

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);">

Alt gölgeler olmasını istediğiniz 100'den fazla görüntünüz varsa, ImageMagick komut satırı programını kullanmanızı öneririm . Bununla, sadece bir komut yazarak 100 görüntüye şekilli gölge düşürebilirsiniz! Örneğin:

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

Yukarıdaki (shell) komutu geçerli dizindeki her .png dosyasını alır, bir alt gölge uygular ve sonucu gölge / dizinine kaydeder. Oluşturulan alt gölgeleri sevmiyorsanız, parametreleri çok değiştirebilirsiniz; gölgelerin belgelerine bakarak başlayın ve genel kullanım talimatlarında görüntüler için yapılabilecek çok güzel örnekler var.

Gelecekte alt gölgelerin görünümü hakkında fikrinizi değiştirirseniz - farklı parametrelerle yeni görüntüler oluşturmak için sadece bir komut :-)

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

Bu benim için harika çalıştı. Bir not tho IE'de tam renkli (# 222222) üç karakter çalışmıyor gerekir.

Dudley'in cevabında belirttiği gibi bu, webkit için alt gölge CSS filtresi, Firefox için SVG ve Internet Explorer 9- için DirectX filtreleri ile mümkündür.

Bir adım daha, SVG'yi satır içine almak ve ekstra isteği ortadan kaldırmaktır:

.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')";
}

Eğer bir bloksa, sınıfınızda yarıçaplı kenarlık ekleyin. çünkü görüntünüz yuvarlak köşede olsa bile varsayılan olarak blok kenarlıklarına gölge uygulanır.

border-radius: 4px;

kenarlık yarıçapını görüntü köşenize göre değiştirin. Umarım bu yardım.

Sadece şunu ekleyin:

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

misal:

<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); 
}

İşte bunun için hazır glow hover animasyon kodu snippet'i:

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

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

Ne zaman bu başlangıçta bu mümkün değildi bu yüzden mümkün değildi yayınlanmıştır. Şimdi başka cevaplar kullanmanızı öneririm.

Görüntünün ana hatlarını tam olarak almanın bir yolu yoktur, ancak görüntüyü merkezdeki görüntünün arkasında bir div ile taklit edebilirsiniz.

Benim hilem işe yaramazsa, görüntüyü kesip her küçük görüntü için yapmalısınız. (daha fazla görüntü gölgenin daha doğru görüneceği anlamına gelir) ancak çoğu görüntü için sadece bir img ile iyi görünür.

yapmanız gereken img'inizin etrafına bir wrap div koymak gibi

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

sonra sargının içine boş bir bölücü koyarsınız (bu gölge görevi görür)

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

ve sonra gölgeyi img arkasında CSS ile göstermelisiniz:

#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;
}

Şimdi imgWrap'ı orijinal img'yi konumlandırmak için yerleştirin ... img gölgesini ortalamak için kutu gölgesinin ilk iki değeri ile onları negatif yapan karışıklık yaşayabilirsiniz .... ya da img ve gölge div'lerini kesinlikle konumlandırabilirsiniz img üst ve sol değerleri = 0 ve gölge div değerleri = img genişliği ve yüksekliğinin yarısı.

Bu korkunç görünüyorsa imginizi kesin ve tekrar deneyin.

(IMG'nin arkasındaki gölgeyi sadece anahatta istemiyorsanız, img opak yapmanız ve şeffaf gibi davranmanız gerekir, ki bu zor değildir ve yorum yapabilir ve daha sonra açıklayacağım)

Benim durumumda, farklı şekil ve şeffaflıkta bir PNG görüntüsü ile modern mobil tarayıcılarda çalışması gerekiyordu. Görüntünün bir kopyasını kullanarak alt gölge oluşturdum. Bu img, aynı görüntünün biri üst üste (kullanma position: absolute) iki öğeye sahip olduğum ve arkasındaki öğenin kendisine uygulanan aşağıdaki kurallara sahip olduğu anlamına gelir:

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

Bu, alt görüntüyü koyulaştırmak için parlaklık filtresi ve genellikle kirli gölgeli efektin dökülmesi için bir bulanıklık filtresi içerir. Daha sonra yumuşatmak için% 50 opaklık uygulanır.

Bu çapraz tarayıcı mozve msbayraklar kullanılarak uygulanabilir .

Örnek: https://jsfiddle.net/5mLssm7o/

Keyfi şekilli alt gölgeler için kullanabileceğiniz önerilen bir özellik var. Lea Verou'nun izniyle burada görebilirsiniz:

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

Tarayıcı desteği asgari düzeyde.

Bu css ile mümkün olmaz - bir görüntü bir karedir ve bu nedenle gölge bir karenin gölgesi olacaktır. En kolay yol, gölgeyi çekirdek çekişi gibi uygulamak için photoshop / gimp veya başka bir görüntü düzenleyiciyi kullanmaktır.

Sadece "biraz" gölgeye ihtiyacım olduğunda sık kullandığım bir hile (okuma: kontur süper hassas olmamalıdır) görüntünün altına% 100 -siyah-% 100 şeffaf bir radyal dolgu ile bir DIV yerleştiriyor. DIV için CSS şuna benzer:

.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 */
  }

Bu, 320x320 DIV üzerinde dairesel bir siyah soluk 'nokta' oluşturacaktır. DIV'nin yüksekliğini veya genişliğini ölçeklerseniz, ilgili bir oval elde edersiniz. Şişelerin veya diğer silindir benzeri şekillerin altında gölgeler oluşturmak çok güzel.

Burada CSS gradyanları oluşturmak için mutlak inanılmaz, süper mükemmel bir araç var:

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

ps: Kullandığınızda nezaket reklamı tıklaması yapın. (Ve, hayır, onunla bağlantılı değilim. Ama nezaket tıklaması, özellikle sık kullandığınız araç için biraz alışkanlık haline gelmeli ... sadece söylüyorum ... çünkü hepimiz ağ üzerinde çalışıyoruz ... )

Bunu tüm tarayıcılarda güvenilir bir şekilde yapamazsınız. Microsoft, IE10 + sürümünden itibaren DX filtrelerini artık desteklemediğinden, buradaki çözümlerin hiçbiri tam olarak çalışmıyor:

https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

Tüm tarayıcılarda güvenilir bir şekilde çalışan tek özelliktir box-shadowve bu yalnızca kenarlığı öğenize (örn. Div) koyar ve kare bir kenarlıkla sonuçlanır:

box-shadow: horizontalOffset verticalOffset blurDistance yayılmasıDistance renk eki;

Örneğin

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

'Kare' bir görüntüye sahipseniz, ancak düzgün yuvarlatılmış köşelere border-radiussahipseniz, alt gölge ile çalışır , böylece div'inizde görüntünüzün yuvarlak köşelerini her zaman taklit edebilirsiniz.

İşte Microsoft belgeleri box-shadow:

https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx

Belki de bunun peşindesin. http://lineandpixel.com/blog/png-shadow

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