Ombre portée pour image PNG en CSS

Question

J’ai une image PNG, qui a la forme libre (non carré).

J’ai besoin d’appliquer l’effet d’ombre à cette image.

L’approche standard...

... affiche des ombres pour cette image, comme si c’était un carré. Donc, je vois mon image, et le carré ombre, qui ne suit la forme de l’objet, affiché dans l’image.

Est-il possible de le faire correctement ?

Answer 1

Oui, c’est possible. s’il vous plaît écrire suite code CSS pour vos images de tous :

OU il suffit d’utiliser le style intraligne comme :

Answer 2

Un peu en retard à la fête, mais oui, il est tout à fait possible de créer des "vrai" dynamique des ombres portées autour d'alpha masqué Png, en utilisant une combinaison de dropshadow-filtre (Webkit), SVG (pour Firefox) et DX filtres 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 aide!

Answer 3

Si vous avez des >100 images que vous souhaitez avoir des ombres portées, je vous recommande d'utiliser le programme de ligne de commande ImageMagick. Avec ceci, vous pouvez appliquer en forme de goutte d'ombres à 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.png; done

Le ci-dessus (shell) de commande de chaque .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ée, vous pouvez modifier les paramètres d'un lot; commencez par regarder la documentation pour les ombres, et, en général, les instructions d'utilisation ont beaucoup de fraîcheur, des exemples de choses qui peut être fait pour les images.

Si vous changez d'avis dans l'avenir au sujet de l'apparence de l'ombre - c'est juste une commande pour générer de nouvelles images avec des paramètres différents :-)

Answer 4

Comme Dudley mentionné dans sa réponse , que c’est possible avec le filtre Ombre portée de CSS pour webkit, SVG pour Firefox et DirectX pour Internet Explorer 9 - les filtres.

Un peu plus loin est Inline le SVG, éliminant la demande supplémentaire :

Answer 5

Ajouter bordure avec rayon en classe vous si c’est un bloc. parce que par défaut ombre s’appliquera sur la bordure du bloc, même si votre image a des coin arrondi.

``

changer son rayon de frontière selon votre image vous coin. Espérons que cette aide.