У меня есть изображение 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;
... отображает тени для этого изображения, как будто это квадрат. Итак, я вижу свое изображение и квадратную тень, которая не соответствует форме объекта, отображаемого на изображении.
Есть ли способ сделать это правильно?
css
image
png
transparency
AntonAL
источник
источник
filter
свойства кроссплатформенности ... Хотя я не думаю, что нужны HTML-теги SVG, любой PNG с альфа-каналом справится с задачейfilter: drop-shadow(x y blur color);
поэтому трюк SVG больше не нужен.Да, это возможно с помощью
filter: dropShadow(x y blur? spread? color?)
CSS или inline:источник
Если у вас есть> 100 изображений, для которых вы хотите иметь тени, я бы предложил использовать программу командной строки ImageMagick . При этом вы можете применить фасонные тени на 100 изображений, просто набрав одну команду! Например:
Приведенная выше команда (shell) берет каждый файл .png в текущем каталоге, применяет тень и сохраняет результат в каталоге shadow /. Если вам не нравятся сгенерированные тени, вы можете настроить параметры; Начните с просмотра документации по теням , и в общих инструкциях по использованию есть много интересных примеров того, что можно сделать с изображениями.
Если в будущем вы передумаете над видом теней - это всего лишь одна команда для создания новых изображений с различными параметрами :-)
источник
mkdir shadow
) 2.$i
следует заключить в кавычки (как в"$i"
), иначе он захлебнется, если в имени файла есть пробел:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i".png; done
filename.png.png
. Вот полностью рабочая версия:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i"; done
Это отлично сработало для меня. Стоит отметить, что в IE вам нужен полноцветный (# 222222) три символа, которые не работают.
источник
Как Дадли упомянул в своем ответе это возможно с помощью CSS-фильтра drop-shadow для webkit, SVG для Firefox и DirectX для Internet Explorer 9-.
Еще один шаг - встроить SVG, исключив дополнительный запрос:
источник
Добавьте границу с радиусом в своем классе, если это блок. потому что по умолчанию тень будет применяться на границе блока, даже если ваше изображение имеет закругленный угол.
border-radius: 4px;
измените радиус границы в соответствии с вашим углом изображения. Надеюсь, это поможет.
источник
Просто добавьте это:
пример:
источник
Вот готовый фрагмент кода анимации свечения для этого:
http://codepen.io/widhi_allan/pen/ltaCq
источник
Когда я разместил это изначально, это было невозможно, так что это обходной путь. Теперь я просто предлагаю использовать другие ответы.
Невозможно точно получить контур изображения, но вы можете подделать его с помощью div за изображением в центре.
Если мой трюк не сработает, вы должны разрезать изображение и сделать это для каждого из маленьких изображений. (чем больше изображений, тем точнее будет выглядеть тень), но для большинства изображений она выглядит хорошо только с одним изображением.
что вам нужно сделать, это положить обернуть div вокруг вашего img, как это так
затем вы помещаете пустой разделитель внутри обертки (это будет служить тенью)
и затем вам нужно сделать так, чтобы тень появлялась за img с помощью CSS:
Теперь поместите imgWrap, чтобы расположить оригинал img ..., чтобы центрировать тень img, которую вы можете связать с первыми двумя значениями box-shadow, делая их отрицательными .... или вы можете позиционировать img и div div тени полностью делая значения img top и left = 0, а значения shadow div = половину ширины и высоты img соответственно.
Если это выглядит ужасно, порежьте ваше изображение и попробуйте снова.
(Если вы не хотите, чтобы тень от img находилась только на контуре, вам нужно сделать img непрозрачным и заставить его работать так, как если бы он был прозрачным, что не так сложно, и вы можете прокомментировать, а я объясню позже)
источник
В моем случае это должно было работать в современных мобильных браузерах с PNG-изображением различной формы и прозрачности. Я создал тень, используя дубликат изображения. Это означает, что у меня есть два
img
элемента одного и того же изображения, один поверх другого (использующийposition: absolute
), а к одному позади применяются следующие правила:Это включает в себя фильтр яркости, чтобы затемнить нижнее изображение, и фильтр размытия, чтобы создать эффект размытой тени. Непрозрачность в 50% тогда применена, чтобы смягчить это.
Это может быть применено кросс-браузер с использованием
moz
иms
флаги.Пример: https://jsfiddle.net/5mLssm7o/
источник
Есть предложенная функция, которую вы можете использовать для теней произвольной формы. Вы можете увидеть это здесь, благодаря Леа Веру:
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
Однако поддержка браузера минимальна.
источник
Это не будет возможно с css - изображение является квадратом, и поэтому тень будет тенью квадрата. Самый простой способ - использовать Photoshop / GIMP или любой другой графический редактор для применения тени, как при отрисовке ядра.
источник
Уловка, которую я часто использую, когда мне просто нужна «небольшая» тень (читай: контур не должен быть сверхточным), помещает DIV с радиальной заливкой от 100% черного до 100% прозрачного изображения. CSS для DIV выглядит примерно так:
Это создаст круглую черную блеклую «точку» на 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: горизонтальныйOffset вертикальныйOffset blurDistance diffDistance color ;
например
Если у вас получилось изображение «квадратное», но с равномерными закругленными углами, тень будет работать с
border-radius
, так что вы всегда сможете эмулировать закругленные углы своего изображения в своем div.Вот документация Microsoft для
box-shadow
:https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx
источник
Может быть, вы в поисках этого. http://lineandpixel.com/blog/png-shadow
источник