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

У меня есть PNG-изображение, которое имеет свободную форму (не квадрат).

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

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

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

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

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

ОТВЕТЫ

Ответ 1

Немного поздно для вечеринки, но да, вполне возможно создать "истинные" динамические тени для альфа-маскированных PNG, используя комбинацию фильтров dropshadow (для Webkit), SVG (для Firefox) и DX-фильтров для 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>

Некоторые сравнения между истинной теневой тень и тень окна и статью о технике, которую я только что описал.

Надеюсь, это поможет!

Ответ 2

Да, это возможно. Пожалуйста, напишите следующий код в CSS для своих изображений:

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

Или просто используйте встроенные стили как:

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

Документация:

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

Ответ 3

Если у вас есть > 100 изображений, для которых вы хотите использовать тени для печати, я бы предложил использовать программу командной строки ImageMagick. При этом вы можете применить формы теней к 100 изображениям, просто набрав одну команду! Например:

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

Вышеуказанная команда (shell) принимает каждый .png файл в текущем каталоге, применяет тень и сохраняет результат в каталоге shadow/. Если вам не нравятся сгенерированные тени, вы можете сильно настроить параметры; начните с просмотра документации для теней и общей инструкции есть много интересных примеров того, что можно сделать с изображениями.

Если вы передумаете в будущем относительно внешнего вида теней - просто одна команда для создания новых изображений с разными параметрами: -)

Ответ 4

Как сказал Дадли в его ответе, это возможно с помощью CSS-фильтра Drop-shadow для webkit, SVG для Firefox и DirectX-фильтров для Internet Explorer 9.

Еще один шаг - встроить SVG, исключая дополнительный запрос:

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

Ответ 5

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

border-radius: 4px;

измените радиус границы в соответствии с вашим углом изображения. Надеюсь на эту помощь.

Ответ 6

Просто добавьте это:

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

Пример:

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

Ответ 7

Здесь приведен фрагмент кода анимации курсора свечения для этого:

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

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

Ответ 9

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

Это сработало отлично для меня. Одна вещь, которую нужно отметить, в том, что вам нужен полный цвет (# 222222), три символа не работают.

Ответ 10

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

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

то, что вам нужно сделать, это поместить обертку div вокруг вашего img, например,

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

тогда вы помещаете пустой пучок внутри обертки (это будет теневой)

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

а затем вы должны заставить тень появиться за img с помощью 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;
}

теперь поместите imgWrap в положение оригинального img... чтобы центрировать тень img, вы можете испортить первые два значения теневой тени делает их отрицательными.... или вы можете позиционировать img и теневые divs абсолютно делая img верхнее и левое значения = 0 и значения теневого div = половина ширины и высоты img соответственно.

Если это выглядит ужасно, порежьте ваш вверх и повторите попытку.

(Если вы не хотите, чтобы тень была за img только на контуре, вам нужно сделать ваш img непрозрачным и заставить его действовать так, как будто он прозрачен, что не так сложно, и вы можете комментировать, и я объясню позже)

Ответ 11

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

Ответ 13

Трюк, который я часто использую, когда мне просто нужна "небольшая" тень (читай: контур не должен быть суперточным) помещает 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: Сделайте клик с помощью вежливости, когда вы его используете. (И нет, я не связан с ним. Но щелчок по вежливости должен стать привычкой, особенно для инструмента, который вы часто используете... просто скажите... так как мы все работаем в сети... )

Ответ 15

В моем случае он должен был работать на современных мобильных браузерах с изображением PNG в разных формах и прозрачности. Я создал тень, используя дубликат изображения. Это означает, что у меня есть два элемента img одного и того же изображения, один поверх другого (с использованием position: absolute), а один из них имеет следующие правила, применяемые к нему:

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

Это включает в себя фильтр яркости, чтобы затемнить нижнее изображение, а фильтр размытия для того, чтобы накладывать тень с уменьшенным эффектом, обычно имеет. Затем применяется непрозрачность при 50% для ее смягчения.

Это может быть применено кросс-браузер с использованием флагов moz и ms.

Пример: https://jsfiddle.net/5mLssm7o/

Ответ 16

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

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

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

box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;

например.

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