web-dev-qa-db-fra.com

Pouvez-vous ajouter une ombre portée non carrée au contenu PNG avec CSS?

Est-il possible de faire une ombre portée sur le contenu d'un PNG?

Pas un carré, mais une ombre portée objet qui
agit sur le contenu non transparent du PNG.

cssimagetransparencyshadowcss-filters
47
Kirk Strobeck

C'est tout à fait possible.

À l'aide de filtres, échantillon:

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

Ce n'est pas possible de le faire en CSS. Cependant, il est tout à fait possible de le faire via un canevas, mais il sera quelque peu inefficace (car il est traité par le client à chaque fois) et dépendra de JavaScript. Le faire en PNG sera plus facile et fonctionnera sur plus de navigateurs.

Si vous voulez plus d'informations à ce sujet, recherchez sur le Web des éléments comme "flou de toile html" et "image de chargement de toile html". Ou mieux encore, utilisez la fonctionnalité d'ombre du canevas qui peut tout faire.

Voici un exemple: http://philip.html5.org/demos/canvas/shadows/various.html

  • créer un contexte à partir du canevas
  • définissez context.shadow(Color|OffsetX|OffsetY|Blur) comme vous le souhaitez
  • charger PNG à partir de la balise img avec context.drawImage
  • ah! les ombres!

Et un bonus:

  • utilisation context.toDataURL si vous souhaitez exporter au format PNG (créez une application Web dans laquelle vous déposez des fichiers PNG et cela vous donne des ombres!)
19
Chris Morgan

Comment les temps changent. Il est désormais possible dans certains navigateurs , comme indiqué dans la réponse actuellement acceptée.

Il n'est pas possible de le faire en utilisant CSS:

C'est ce que je suppose que vous demandez.

12
thirtydot

Jusqu'à ce qu'il soit disponible pour CSS, vous pouvez essayer mon approche.

Mon exemple utilise cette image:

original image

car il a un fond transparent et il n'est pas carré (pour que l'ombre de boîte de CSS entre en action). Ce n'est pas très chic, mais sert bien ce petit et simple tutoriel.

L'étape suivante que j'ai prise était de créer une autre image, basée sur celle ci-dessus, pour la placer sous l'original.

Étape 1. Ajouter du flou:

blurred original

Étape 2. Suppression de la lumière et du contraste:

the shadow

J'ai donc l'original et l'ombre.

Ensuite, je vais l'afficher comme si c'était une ombre:

Style:

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

Faites la magie:

Ajoutez un div et définissez attribute class="divOriginal common "et un autre avec class="divShadow common".

Le résultat devrait être:

result: pseudo-shadow

À votre santé!

Adi

6
AdiKonstantin

J'ai écrit un plugin jQuery pour cela, basé sur la suggestion de Chris Morgan sur le canevas. Vous pouvez le trouver sur GitHub ici: https://github.com/Kukunin/image-shadow

3
Kukunin

Utiliser l'exemple createjs peut être trouvé à 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