Drop shadow pour L'image PNG dans CSS

un peu tard pour la fête, mais oui, il est tout à fait possible de créer de" vraies " ombres dynamiques autour des png masqués alpha, en utilisant une combinaison de dropshadow-filter (pour Webkit), SVG (pour Firefox) et DX filters pour IE.

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

Quelques comparaisons entre le vrai ombre et box-shadow et un article sur la technique que je viens de décrire .

j'espère que cela aidera!

Oui, c'est possible. S'il vous plaît écrivez le code suivant dans le CSS pour vos images:

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

Ou simplement utiliser des styles en ligne comme:

<img src="your-image-source" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);" >

de la Documentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow ()

si vous avez >100 images pour lesquelles vous voulez avoir des ombres de chute, je vous suggérerais d'utiliser le programme en ligne de commande ImageMagick . Avec cela, vous pouvez appliquer des ombres de forme de goutte à 100 images simplement en tapant une commande! Par exemple:

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

la commande (shell) ci-dessus prend chacune .fichier png dans le répertoire courant, s'applique une ombre portée, et enregistre le résultat dans l'ombre/ répertoire. Si vous n'aimez pas l'ombre généré, vous peut modifier les paramètres beaucoup; commencez par regarder la documentation pour les ombres , et le général instructions d'utilisation ont beaucoup d'exemples cool de choses qui peuvent être faites aux images.

si vous changez d'avis dans le futur sur l'apparence de la goutte d'ombre - c'est juste une commande pour générer de nouvelles images avec des paramètres différents: -)

Dudley mentionné dans sa réponse c'est possible avec l'ombre CSS filtre pour webkit, SVG dans Firefox et DirectX filtres pour Internet Explorer 9-.

une étape plus loin est de mettre en ligne Le SVG, en éliminant la requête supplémentaire:

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

ajouter bordure avec rayon dans votre classe si c'est un bloc. parce que par défaut shadow s'appliquera sur la bordure de bloc, même si votre image a un coin arrondi.

border-radius: 4px;

changez son rayon de bordure en fonction de votre coin image. Espérons que cette aide.

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

ça a bien marché pour moi.. Une chose à noter tho dans ei vous avez besoin de la couleur complète (#222222) trois caractères ne fonctionne pas.

il suffit d'ajouter ceci:

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

exemple:

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

Voici l'extrait de code d'animation glow hover prêt pour ceci:

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

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

dans mon cas, il a dû travailler sur les navigateurs mobiles modernes, avec une image PNG dans différentes formes et la transparence. J'ai créé drop shadow en utilisant un double de l'image. Cela signifie que j'ai deux img éléments de la même image, l'un au-dessus de l'autre (en utilisant position: absolute ), et l'un derrière a les règles suivantes appliquées:

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

Cela inclut un filtre de luminosité pour obscurcir l'image du bas, et un flou filtrer afin de mouler l'ombre de goutte d'effet de tache a généralement. L'opacité à 50% est alors appliqué afin de l'adoucir.

ceci peut être appliqué au fureteur croisé en utilisant les drapeaux moz et ms .

exemple: https://jsfiddle.net/5mLssm7o /

quand j'ai posté ceci à l'origine ce n'était pas possible donc c'est la solution. Maintenant, je suggère simplement d'utiliser d'autres réponses.

Il n'y a aucun moyen d'obtenir le contour de l'image exactement, mais vous pouvez faux avec un div derrière l'image au centre.

si mon truc ne fonctionne pas, alors vous devez découper l'image et le faire pour chaque petite image. (plus d'images plus l'ombre sera précise regarder) mais pour la plupart des images, il semble bien avec un seul img.

ce que vous devez faire est de mettre une écharpe div autour de votre img comme

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

puis vous mettez un diviseur vide à l'intérieur de l'enveloppe (cela servira d'ombre)

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

et ensuite vous devez faire apparaître l'ombre derrière l'img avec 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;
}

maintenant positionnez l'imgWrap pour positionner l'img original... au centre de la l'ombre de l'img, vous pouvez jouer avec les deux premières valeurs de l'ombre-boîte les rendant négatives.... ou vous pouvez positionner l'img et les shadow divs absolument faire des valeurs img en haut et à gauche = 0 et les valeurs de Shadow div = la moitié de la largeur img et la hauteur respectivement.

si ça a l'air horrible, coupez votre img et réessayez.

(si vous ne voulez pas l'ombre derrière l'img juste sur le contour, alors vous devez rendre votre img opaque et le faire agir comme si il était transparent ce qui n'est pas si difficile et vous pouvez commenter et je vous expliquerai plus tard)

il y a une fonctionnalité proposée que vous pouvez utiliser pour les ombres de goutte de forme arbitraire. Vous pouvez le voir ici, gracieuseté de Lea Verou:

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

est minime.

ce ne sera pas possible avec css - une image est un carré, et donc l'ombre serait l'ombre d'un carré. Le plus simple serait d'utiliser photoshop/gimp ou tout autre éditeur d'image pour appliquer l'ombre comme le noyau de tirage.

une astuce que j'utilise souvent quand j'ai juste besoin" d'un peu " d'ombre (lire: contour ne doit pas être super-précis) est de placer un DIV avec un remplissage radial 100%-noir-à-100%-transparent sous l'image. Le CSS pour la DIV ressemble à quelque chose comme:

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

cela créera un "point" circulaire noir effacé sur un DIV 320x320. Si vous dimensionnez la hauteur ou la largeur du DIV vous obtenez un ovale correspondant. Très agréable pour créer par exemple des ombres sous des bouteilles ou d'autres formes de cylindre.

il y a un outil absolument incroyable, super-excellent pour créer des gradients CSS ici:

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

ps: faites un AD-click de courtoisie quand vous l'utilisez. (Et, non,je ne suis pas affilié avec elle. Mais la courtoisie cliquant devrait devenir un peu d'habitude, surtout pour l'outil que vous utilisez souvent... juste sayin... puisque nous travaillons tous sur le net...)

peut-être que vous êtes à la recherche de ceci. http://lineandpixel.com/blog/png-shadow

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

vous ne pouvez pas faire cela de manière fiable à travers tous les navigateurs. Microsoft ne supporte plus les filtres DX à partir de IE10+, donc aucune des solutions ici ne fonctionne pleinement:

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

la seule propriété qui fonctionne de manière fiable sur tous les navigateurs est box-shadow , et cela ne fait que placer la frontière sur votre élément (par exemple un div), résultant en une frontière carrée:

box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;

p.ex.

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

Si vous avez une image qui est "carré", mais avec des coins arrondis, l'ombre portée travaille avec border-radius , de sorte que vous pouvez toujours émuler les coins arrondis de votre image dans votre div.

Voici la documentation de Microsoft pour box-shadow :

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