CSS: crear brillo blanco alrededor de la imagen

Question

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

Answer 1

Uso CSS3 sencilla (no se admite en el IE < 9)

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

Esto pondrá un tono blanco alrededor de cada imagen en el documento, utilice los selectores más específicos para elegir las imágenes que desea el brillo alrededor . Usted puede cambiar el color, por supuesto :)

Si usted está preocupado acerca de los usuarios que no cuentan con las últimas versiones de sus navegadores, utilice esto:

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

Para IE se puede utilizar un resplandor filtro (no está seguro de qué navegadores son compatibles con ella)

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

jugar con los ajustes para ver lo que más le convenga :)

Answer 2

depende de lo que son los navegadores de destino. En los más nuevos es as simple as:

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

Para los navegadores antiguos que tienen que poner en práctica soluciones alternativas, por ejemplo, a base on this example, pero lo más probable será que necesite más margen de beneficio.

Answer 3

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

Answer 4

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

cheque el violín http://jsfiddle.net/XUC5q/1/ & su puede generar a partir de aquí http://css3generator.com/

Si necesita que funcione en versiones antiguas de IE, se puede utilizar CSS3 PIE para emular el box-shadow en aquellos navegadores & se se puede utilizar como filter dijo Kyle como esto

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

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

Answer 5

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; 

le 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!

Answer 6

¡Funciona como un encanto!

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