Тень для изображения PNG в CSS

Question

У меня есть изображение PNG свободной формы (не квадратное).

Мне нужно применить эффект тени к этому изображению.

Стандартный подход ...

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

... отображает тени для этого изображения, как будто это квадрат.Итак, я вижу свое изображение и квадратную тень, которая не соответствует форме объекта, отображаемой на изображении.

Есть ли способ сделать это правильно?

Answer 1

Вы не можете делать это надежно во всех браузерах. Microsoft больше не поддерживает фильтры DX начиная с IE10 +, поэтому ни одно из решений здесь не работает полностью:

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

Единственное свойство, которое надежно работает во всех браузерах - это box-shadow, и это просто устанавливает границу для вашего элемента (например, div), в результате чего получается квадратная граница:

box-shadow: горизонтальныйOffset вертикальныйOffset blurРасстояние распространенияРазмещение цвета вставка;

, например

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

Если у вас получилось изображение «квадратного», но с равномерными закругленными углами, тень будет работать с border-radius, так что вы всегда можете эмулировать закругленные углы вашего изображения в вашем div.

Вот документация Microsoft для box-shadow:

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

Answer 2

Может быть, вы в поисках этого.http://lineandpixel.com/blog/png-shadow

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

Answer 3

Уловка, которую я часто использую, когда мне просто нужна «небольшая» тень (читай: контур не должен быть сверхточным), помещает DIV с радиальной заливкой 100% - от черного до 100% - прозрачного под изображение , CSS для DIV выглядит примерно так:

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

Это создаст круглую черную блеклую точку на 320x320 DIV. Если вы масштабируете высоту или ширину DIV, вы получите соответствующий овал. Очень приятно создавать, например, тени под бутылками или другие цилиндрические формы.

Здесь есть абсолютно невероятный, супер-отличный инструмент для создания CSS-градиентов:

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

ps. При использовании сделайте вежливый рекламный клик. (И нет, я не связан с этим. Но вежливое нажатие должно стать привычкой, особенно для инструмента, который вы часто используете ... просто говорю ... так как мы все работаем в сети ... )

Answer 4

Предложена функция, которую вы можете использовать для теней произвольной формы.Вы можете увидеть это здесь, благодаря Lea Verou:

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

Хотя поддержка браузера минимальна.

Answer 5

Это не будет возможно с css - изображение является квадратом, и поэтому тень будет тенью квадрата.Самый простой способ - использовать Photoshop / GIMP или любой другой графический редактор для применения тени, как при отрисовке ядра.