imagen - img shadow css

CSS: crea brillo blanco alrededor de la imagen

Question

¿Cómo puedo crear un resplandor blanco como borde de una imagen de tamaño desconocido?

Answer 1

¡Funciona de maravilla!

.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

Voila! ¡Eso es! Obviamente esto no funcionará en es decir, pero a quién le importa ...

Answer 2

@tamir; puedes hacerlo con la propiedad css3.

img{
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2;
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2;
box-shadow: 0px 0px 3px 5px #f2e1f2; 
}

mira el violín http://jsfiddle.net/XUC5q/1/ y tu puedes generar desde aquí http://css3generator.com/

Si necesita que funcione en versiones anteriores de IE, puede usar CSS3 PIE para emular la sombra de caja en esos navegadores y puede usar filter como dijo kyle así

filter:progid:DXImageTransform.Microsoft.Glow(color=''red'', Strength=''5'')

puede generar su filtro desde aquí http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Answer 3

Depende de cuáles son los navegadores de destino. En los más nuevos es tan simple como :

   -moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
        box-shadow: 0 0 5px #fff;

Para los navegadores más antiguos, debe implementar soluciones temporales, por ejemplo, en base a este ejemplo , pero lo más probable es que necesite un marcado adicional.

Answer 4

Puede usar CSS3 para crear un efecto como ese, pero solo lo verá en navegadores modernos compatibles con Box CSS3PIE , a menos que use un polyfill como CSS3PIE . Entonces, por ejemplo, podrías hacer algo como esto: http://jsfiddle.net/cany2/

Answer 5

Use CSS3 simple (no soportado en IE <9)

img
{
    box-shadow: 0px 0px 5px #fff;
}

Esto pondrá un resplandor blanco alrededor de cada imagen en su documento, use selectores más específicos para elegir qué imágenes desea que brillen. Puedes cambiar el color del curso :)

Si le preocupan los usuarios que no tienen las últimas versiones de sus navegadores, use esto:

img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}

Para IE, puede usar un filtro de brillo (no estoy seguro de qué navegadores lo admiten)

img
{
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

Juega con la configuración para ver qué te queda :)

Answer 6

tarde a la fiesta aquí; sin embargo, solo quería agregar un poco de diversión extra.

box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;

te dará una bonita imagen acolchada. El relleno le dará un borde blanco simulado (o cualquier borde que haya establecido). el rgba solo te permite hacer una idea sobre el color en particular; 0,0,0 siendo negro. También podría usar fácilmente cualquier otro color RGB.

¡Espero que esto ayude a alguien!