Можете ли вы добавить не квадратную тень к PNG-контенту с помощью CSS?

Ответ 1

Это определенно возможно.

Использование фильтров:

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

Ответ 2

Это невозможно сделать в CSS. Однако вполне возможно сделать это через холст, но он будет несколько неэффективным (поскольку он обрабатывается клиентом каждый раз) и будет зависимым от JavaScript. Выполнение этого в PNG будет проще и будет работать над большим количеством браузеров.

Если вам нужна дополнительная информация об этом, найдите в Интернете такие вещи, как "html canvas blur" и "html canvas load image". Или еще лучше, используйте функциональность теневой тени, которая может все это сделать.

Вот пример: http://philip.html5.org/demos/canvas/shadows/various.html

• создать контекст с холста
• установите context.shadow(Color|OffsetX|OffsetY|Blur) по желанию
• загрузите PNG из img-тега context.drawImage
• ах! тени!

И бонус:

• используйте context.toDataURL, если вы хотите экспортировать в PNG (создайте веб-приложение, в которое вы вставляете PNG, и он дает вам тени!)

Ответ 3

Как меняются времена. Теперь возможно в некоторых браузерах, как показано в принятом в настоящее время ответе.

Это невозможно сделать с помощью CSS:

То, что я предполагаю, вы просите. Забастовкa >

Ответ 4

Пока он не будет доступен для CSS, вы можете попробовать мой подход.

В моем примере используется это изображение:

потому что он имеет прозрачный фон и не является квадратным (для того, чтобы CSS-тень появилась в действии). Это не очень причудливо, но служит для этого небольшого и простого учебника.

Следующий шаг, который я сделал, состоял в том, чтобы создать другое изображение, основанное на приведенном выше, чтобы разместить его под оригиналом.

Шаг1. Добавить размытие:

Step2. Удалены свет и контраст:

Итак, у меня есть оригинал и тень.

Далее я покажу его, как будто это тень:

Стиль:

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

Сделайте магию:

Добавьте один div и установите attribute class="divOriginal common ", а другой - class="divShadow common".

Результат должен быть:

Ура!

Ади

Ответ 5

Я написал для этого плагин jQuery, основанный на предложении Криса Моргана о холсте. Вы можете найти его на GitHub здесь: https://github.com/Kukunin/image-shadow

Ответ 6

Использовать createjs образец можно найти по адресу 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;