quitar - sombra interior css

Sombra paralela para imagen PNG en CSS

Question

Tengo una imagen PNG, que tiene forma libre (no cuadrada).

Necesito aplicar un efecto de sombra a esta imagen.

El enfoque estándar ...

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

... muestra sombras para esta imagen, como si fuera un cuadrado. Entonces, veo mi imagen y mi sombra cuadrada, que no sigue la forma del objeto, que se muestra en la imagen.

¿Hay alguna forma de hacerlo correctamente?

Answer 1

Agregue borde con radio en su clase si es un bloque. porque por defecto la sombra se aplicará en el borde del bloque, incluso si su imagen tiene una esquina redondeada.

border-radius: 4px;

cambie su radio de borde según su esquina de imagen. Espero que esto ayude.

Answer 2

Aquí está listo el fragmento de código de animación de resplandor al vuelo para esto:

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

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

Answer 3

Como Dudley mencionó en su respuesta, esto es posible con el filtro CSS drop-shadow para webkit, SVG para Firefox y filtros DirectX para Internet Explorer 9-.

Un paso más es alinear el SVG, eliminando la solicitud adicional:

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

Answer 4

En mi caso, tenía que funcionar en navegadores móviles modernos, con una imagen PNG en diferentes formas y transparencia. Creé sombra paralela con un duplicado de la imagen. Eso significa que tengo dos elementos img de la misma imagen, uno encima del otro (usando position: absolute ), y el que está detrás tiene las siguientes reglas aplicadas:

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

Esto incluye el filtro de brillo para oscurecer la imagen de abajo y un filtro de desenfoque para proyectar la sombra de efecto de gota. Luego se aplica opacidad al 50% para suavizarlo.

Esto se puede aplicar a través del navegador utilizando banderas moz y ms .

Ejemplo: https://jsfiddle.net/5mLssm7o/

Answer 5

Esto no será posible con css: una imagen es un cuadrado, por lo que la sombra sería la sombra de un cuadrado. La manera más fácil sería usar photoshop / gimp o cualquier otro editor de imágenes para aplicar la sombra como un sorteo central.

Answer 6

Hay una función propuesta que puede usar para sombras paralelas con formas arbitrarias. Podrías verlo aquí, cortesía de Lea Verou:

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

El soporte del navegador es mínimo, sin embargo.

Answer 7

No es posible ahora con CSS.

Answer 8

No hay forma de obtener el contorno de la imagen exactamente, pero puedes simularlo con un div detrás de la imagen en el centro.

Si mi truco no funciona, entonces debes cortar la imagen y hacerlo para cada una de las pequeñas imágenes. (Cuantas más imágenes, más precisa será la sombra) pero para la mayoría de las imágenes se ve bien con solo una img.

lo que tienes que hacer es poner un envoltorio div alrededor de tu img como tal

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

luego pones un divisor vacío dentro de la envoltura (esto servirá como la sombra)

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

y luego debes hacer que la sombra aparezca detrás del img con 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;
}

ahora coloque el imgWrap para posicionar el img original ... para centrar la sombra del img, puede interferir con los dos primeros valores de la sombreado-caja haciéndolos negativos ... o puede colocar los divs de img y de shadow absolutamente haciendo img top and left values ​​= 0 y los valores shadow div = half of img width and height respectivamente.

Si esto parece horrible, corta tu img y vuelve a intentarlo.

(Si no quieres que la sombra detrás de la img quede en el contorno, entonces necesitas hacer tu img opaca y hacer que actúe como si fuera transparente, que no es tan difícil y puedes comentar y explicaré más adelante)

Answer 9

No puede hacer esto de manera confiable en todos los navegadores. Microsoft ya no es compatible con filtros DX a partir de IE10 +, por lo que ninguna de las soluciones aquí funciona completamente:

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

La única propiedad que funciona de manera confiable en todos los navegadores es box-shadow , y esto simplemente coloca el borde en su elemento (por ejemplo, un div), lo que da como resultado un borde cuadrado:

box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance inserción de color ;

p.ej

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

Si tiene una imagen que es ''cuadrada'' pero con esquinas redondeadas uniformes, la sombra paralela funciona con border-radius , por lo que siempre puede emular las esquinas redondeadas de su imagen en su div.

Aquí está la documentación de Microsoft para box-shadow :

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

Answer 10

Sí, es posible. Por favor, escriba el siguiente código en el CSS para sus imágenes:

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

O simplemente usa estilos en línea como:

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

Documentación:

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

Answer 11

Si tienes> 100 imágenes para las que deseas sombras paralelas, te sugiero usar el programa de línea de comandos ImageMagick . ¡Con esto, puedes aplicar sombras en forma de gota a 100 imágenes simplemente escribiendo un comando! Por ejemplo:

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

El comando anterior (shell) toma cada archivo .png en el directorio actual, aplica una sombra paralela y guarda el resultado en el directorio shadow /. Si no te gustan las sombras generadas, puedes modificar mucho los parámetros; comience mirando la documentación en busca de sombras , y las instrucciones de uso general tienen muchos ejemplos interesantes de cosas que se pueden hacer con las imágenes.

Si cambias de opinión en el futuro sobre el aspecto de las sombras paralelas, es solo un comando para generar nuevas imágenes con diferentes parámetros :-)

Answer 12

Solo agrega esto:

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

ejemplo:

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

Answer 13

Tal vez estás en busca de esto. http://lineandpixel.com/blog/png-shadow

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

Answer 14

Un poco tarde para la fiesta, pero sí, es totalmente posible crear sombras verticales dinámicas "verdaderas" alrededor de los PNG enmascarados alfa, utilizando una combinación de filtro de sombra de filtro (para Webkit), SVG (para Firefox) y filtros DX para 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>

Algunas comparaciones entre Drop-shadow verdadero y Box-shadow y un artículo sobre la técnica que acabo de describir .

¡Espero que esto ayude!

Answer 15

Un truco que uso a menudo cuando solo necesito una "pequeña" sombra (léase: el contorno no debe ser súper preciso) coloca una DIV con un relleno radial 100% -negro-a-100% -transparente debajo de la imagen. El CSS para el DIV se ve algo así como:

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

Esto creará un ''punto'' negro esfumado circular en un DIV de 320x320. Si escala la altura o el ancho del DIV, obtendrá un óvalo correspondiente. Muy agradable para crear, por ejemplo, sombras debajo de botellas u otras formas cilíndricas.

Aquí hay una herramienta absolutamente increíble y súper excelente para crear degradados de CSS:

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

pd: haga un clic de clic de cortesía cuando lo use. (Y, no, no estoy afiliado a él. Pero los clics de cortesía deberían convertirse en un hábito, especialmente para la herramienta que usas a menudo ... solo diciendo ... ya que todos estamos trabajando en la red ... )

Answer 16

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

Eso funcionó de maravilla para mí. Una cosa para notar es que en ei necesitas el color completo (# 222222) tres caracteres no funcionan.