Тень для изображения PNG в CSS
У меня есть изображение 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;
... отображает тени для этого изображения, как будто это квадрат. Итак, я вижу свое изображение и квадратную тень, которая не соответствует форме объекта, отображаемого на изображении.
Есть ли способ сделать это правильно?
15 ответов
Да, это возможно. Пожалуйста, напишите следующий код в 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);" >
Документация:
Немного опоздал на вечеринку, но да, вполне возможно создать "настоящие" динамические тени вокруг PNG с альфа-маской, используя комбинацию drophadow-filter (для 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>
Некоторые сравнения между настоящими drop-shadow и box-shadow и статьей о технике, которую я только что описал.
Надеюсь, это поможет!
img {
-webkit-filter: drop-shadow(5px 5px 5px #222222);
filter: drop-shadow(5px 5px 5px #222222);
}
Это прекрасно сработало для меня... Стоит отметить, что в ei вам нужен полный цвет (#222222), три символа не работают.
Если у вас есть>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 /. Если вам не нравятся сгенерированные тени, вы можете значительно изменить параметры; Начните с просмотра документации по теням, и в общих инструкциях по использованию есть много интересных примеров того, что можно сделать с изображениями.
Если в будущем вы передумаете над видом теней - это всего лишь одна команда для создания новых изображений с различными параметрами:-)
Как упоминал Дадли в своем ответе, это возможно с помощью 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')";
}
Добавьте границу с радиусом в своем классе, если это блок. потому что по умолчанию тень будет применяться на границе блока, даже если ваше изображение имеет закругленный угол.
border-radius: 4px;
измените радиус границы в соответствии с вашим углом изображения. Надеюсь, это поможет.
Просто добавьте это:
-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);
}
Вот готовый фрагмент кода анимации свечения для этого:
http://codepen.io/widhi_allan/pen/ltaCq
-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
Когда я разместил это изначально, это было невозможно, так что это обходной путь. Теперь я просто предлагаю использовать другие ответы.
Нет никакого способа точно получить контур изображения, но вы можете подделать его с помощью div за изображением в центре.
Если мой трюк не сработает, вы должны разрезать изображение и сделать это для каждого из маленьких изображений. (чем больше изображений, тем точнее будет выглядеть тень), но для большинства изображений это выглядит хорошо только с одним изображением.
что вам нужно сделать, это положить обернуть 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, которую вы можете связать с первыми двумя значениями box-shadow, делая их отрицательными.... или вы можете расположить img и div div тени полностью делая значения img top и left = 0, а значения shadow div = половину ширины и высоты img соответственно.
Если это выглядит ужасно, порежьте ваше изображение и попробуйте снова.
(Если вы не хотите, чтобы тень от img была только на контуре, вам нужно сделать img непрозрачным и заставить его работать так, как если бы он был прозрачным, что не так сложно, и вы можете прокомментировать, а я объясню позже)
В моем случае это должно было работать в современных мобильных браузерах с 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/
Хитрость, которую я часто использую, когда мне просто нужна "маленькая" тень (читай: контур не должен быть сверхточным), помещает 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 */
}
Это создаст круглую черную затухающую "точку" на DIV 320x320. Если вы масштабируете высоту или ширину DIV, вы получите соответствующий овал. Очень приятно создавать, например, тени под бутылками или другие цилиндрические формы.
Здесь есть абсолютно невероятный, супер-отличный инструмент для создания CSS-градиентов:
http://www.colorzilla.com/gradient-editor/
PS: Сделайте вежливый рекламный клик, когда вы его используете. (И нет, я не связан с этим. Но вежливое нажатие должно стать привычкой, особенно для инструмента, который вы часто используете... просто говорю... так как мы все работаем в сети...)
Вы не можете сделать это надежно во всех браузерах. 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
Есть предложенная функция, которую вы можете использовать для теней произвольной формы. Вы можете увидеть это здесь, благодаря Леа Веру:
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
Однако поддержка браузера минимальна.
Может быть, вы в поисках этого. http://lineandpixel.com/blog/png-shadow
img { png-shadow: 5px 5px 5px #222; }
Это не будет возможно с css - изображение является квадратом, и поэтому тень будет тенью квадрата. Самый простой способ - использовать Photoshop/ GIMP или любой другой графический редактор для применения тени, как при отрисовке ядра.