Eu tenho uma imagem PNG, que tem forma livre (não quadrada).
Preciso aplicar o efeito de sombra projetada a esta imagem.
A abordagem padrão ...
-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;
... exibe sombras para esta imagem, como se fosse um quadrado. Então, vejo minha imagem e sombra quadrada, que não seguem a forma do objeto, exibida na imagem.
Existe alguma maneira de fazer isso corretamente?
css
image
png
transparency
AntonAL
fonte
fonte
filter
propriedade ... Embora, eu não acho que seja necessário as tags HTML SVG, qualquer PNG com alfa canal irá fazer o truquefilter: drop-shadow(x y blur color);
portanto, o truque SVG não deve mais ser necessário.Sim, é possível usar
filter: dropShadow(x y blur? spread? color?)
, em CSS ou em linha:fonte
Se você tiver mais de 100 imagens nas quais deseja sombras projetadas, sugiro usar o programa de linha de comando ImageMagick . Com isso, você pode aplicar sombras projetadas a 100 imagens apenas digitando um comando! Por exemplo:
O comando acima (shell) pega cada arquivo .png no diretório atual, aplica uma sombra projetada e salva o resultado no diretório sombra /. Se você não gosta das sombras projetadas, pode ajustar muito os parâmetros; comece observando a documentação em busca de sombras e as instruções gerais de uso têm muitos exemplos interessantes de coisas que podem ser feitas nas imagens.
Se você mudar de ideia no futuro sobre a aparência das sombras projetadas - é apenas um comando para gerar novas imagens com parâmetros diferentes :-)
fonte
mkdir shadow
) 2.$i
deve ser citado (como em"$i"
) ou ele engasgará se uma imagem tiver um espaço em seu nome de arquivo: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
. Aqui está uma versão totalmente funcional:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i"; done
Isso funcionou muito bem para mim. Uma coisa a ser observada no IE é que você precisa da cor completa (# 222222) em que três caracteres não funcionam.
fonte
Como Dudley mencionou em sua resposta isso é possível com o filtro CSS drop-shadow para webkit, SVG para Firefox e filtros DirectX para Internet Explorer 9-.
Um passo adiante é alinhar o SVG, eliminando a solicitação extra:
fonte
Adicione borda com raio na sua classe se for um bloco. porque, por padrão, a sombra será aplicada na borda do bloco, mesmo que sua imagem tenha um canto arredondado.
border-radius: 4px;
altere o raio da borda de acordo com o canto da sua imagem. Espero que esta ajuda.
fonte
Apenas adicione isto:
exemplo:
fonte
Aqui está o snippet de código da animação de foco instantâneo pronto para isso:
http://codepen.io/widhi_allan/pen/ltaCq
fonte
Quando eu postei isso originalmente, não era possível, então esta é a solução alternativa. Agora eu simplesmente sugiro usar outras respostas.
Não há como obter exatamente o contorno da imagem, mas você pode falsificá-lo com uma div por trás da imagem no centro.
Se meu truque não funcionar, você deve cortar a imagem e fazê-lo para todas as pequenas imagens. (quanto mais imagens, mais precisa será a sombra), mas para a maioria das imagens, tudo fica bem com apenas um img.
o que você precisa fazer é colocar uma div wrap em torno do seu img assim
então você coloca um divisor vazio dentro do envoltório (isso servirá como sombra)
e então você deve fazer a sombra aparecer atrás do img com CSS:
Agora posicione o imgWrap para posicionar o img original ... para centralizar a sombra do img, você pode mexer nos dois primeiros valores da sombra da caixa, tornando-os negativos ... ou pode posicionar o img e a sombra divs absolutamente tornando img os valores superior e esquerdo = 0 e os valores da sombra div = metade da largura e altura do img, respectivamente.
Se isso parecer horrível, corte seu img e tente novamente.
(Se você não quiser a sombra por trás do img apenas no contorno, precisará torná-lo opaco e agir como se fosse transparente, o que não é tão difícil e você pode comentar e eu explicarei depois)
fonte
No meu caso, ele teve que funcionar em navegadores móveis modernos, com uma imagem PNG em diferentes formas e transparência. Criei sombra projetada usando uma duplicata da imagem. Isso significa que eu tenho dois
img
elementos da mesma imagem, um em cima do outro (usandoposition: absolute
), e o outro por trás tem as seguintes regras aplicadas:Isso inclui filtro de brilho para escurecer a imagem de fundo e um filtro de desfoque para transmitir o efeito borrado que a sombra geralmente possui. A opacidade a 50% é então aplicada para amolecê-la.
Isso pode ser aplicado em vários navegadores usando
moz
ems
flags.Exemplo: https://jsfiddle.net/5mLssm7o/
fonte
Há um recurso proposto que você pode usar para sombras projetadas arbitrariamente. Você pode vê-lo aqui, cortesia de Lea Verou:
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
O suporte ao navegador é mínimo, no entanto.
fonte
Isso não será possível com css - uma imagem é um quadrado e, portanto, a sombra seria a sombra de um quadrado. A maneira mais fácil seria usar o photoshop / gimp ou qualquer outro editor de imagens para aplicar a sombra como um desenho principal.
fonte
Um truque que costumo usar quando preciso apenas de um pouco de sombra (leia: o contorno não deve ser super preciso) é colocar um DIV com um preenchimento radial transparente de 100% a preto a 100% sob a imagem. O CSS para o DIV se parece com:
Isso criará um 'ponto' circular preto desbotado em um DIV de 320x320. Se você escalar a altura ou a largura do DIV, obterá um oval correspondente. Muito bom para criar, por exemplo, sombras sob garrafas ou outras formas cilíndricas.
Existe uma ferramenta absolutamente excelente e super excelente para criar gradientes de CSS aqui:
http://www.colorzilla.com/gradient-editor/
ps: faça um clique de anúncio de cortesia ao usá-lo. (E, não, eu não sou afiliado a isso. Mas o clique de cortesia deve se tornar um hábito, especialmente para as ferramentas que você usa com frequência ... apenas dizendo ... já que estamos todos trabalhando na rede ... )
fonte
Você não pode fazer isso de forma confiável em todos os navegadores. A Microsoft não oferece mais suporte a filtros DX a partir do IE10 +, portanto, nenhuma das soluções aqui funciona totalmente:
https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
A única propriedade que funciona de maneira confiável em todos os navegadores é
box-shadow
, e isso coloca a borda no seu elemento (por exemplo, uma div), resultando em uma borda quadrada:box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance cor inserção;
por exemplo
Se você tiver uma imagem 'quadrada', mas com cantos arredondados uniformes, a sombra projetada funcionará
border-radius
, para que você sempre possa emular os cantos arredondados da imagem na sua div.Aqui está a documentação da Microsoft para
box-shadow
:https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx
fonte
Talvez você esteja procurando por isso. http://lineandpixel.com/blog/png-shadow
fonte