CSS: crea un brillo blanco alrededor de la imagen

79

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

image css border glow tamir
fuente

Respuestas:

138

Utilice CSS3 simple (no compatible con IE <9)

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

Esto pondrá un brillo blanco alrededor de cada imagen en su documento, use selectores más específicos para elegir qué imágenes le gustaría que brille alrededor. Puedes cambiar el color, por supuesto :)

Si le preocupan los usuarios que no tienen 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, 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 conviene :)

Kyle
fuente
Creo que esto solo es compatible con IE 9+, solo agregue: <meta http-equiv="X-UA-Compatible" content="IE=9" />para representar la página en IE9 e IE10 como versión IE9
Christian Mark
5
Tenga en cuenta que el filtro tiene un comportamiento inesperado en varios elementos. Aplíquelo a un conjunto de campo y sorpréndase. Además, puede filtrarse a elementos secundarios. Y mostrará una advertencia de ActiveX para la página con la temida barra amarilla. Solo evítalo. agregue una sombra gris clara plana para IE y listo.
gcb
No funciona con imágenes transparentes. Como un logo png redondo.
Santosh Kumar
@SantoshKumar, no, no lo hace, porque el cuadro de sombra no puede saber dónde están los píxeles no transparentes de un png. Solo afecta a los elementos HTML, al elemento <img> en sí, no al contenido.
Kyle
1
Sin embargo, @Kyle drop-shadow puede :)
Brandito
9

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

verifique el violín http://jsfiddle.net/XUC5q/1/ y su puede generar desde aquí http://css3generator.com/

Si necesita que funcione en versiones anteriores de IE, puede usar CSS3 PIE para emular el cuadro de sombra en esos navegadores y puede usarlo filtercomo 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

sandeep
fuente
Ya no necesita los prefijos moz y webkit, las últimas versiones de esos navegadores son compatibles box-shadowtal cual :)
Kyle
@kyle; Lo sé, pero no funciona en la versión anterior antes de la beta de Mozilla.
sandeep
2
@Kyle, ¿y si desea ayudar a los usuarios de versiones anteriores? (todavía hay algunos por ahí)
Spudley
1
@kyle; puede ser que tengas que actualizar tu respuesta porque hay muchas personas que no actualizaron mozilla.
sandeep
7

¡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 ie, pero a quién le importa ...

Madeja
fuente
2
Voto en contra; -webkit-filter no es una propiedad de CSS y, en cualquier caso, solo admitiría navegadores webkit; sería mejor que también agregue una versión sin prefijo y probablemente los prefijos -moz-, -ms- y -o-, debería mozilla, Microsoft u Opera (mientras Opera 12 todavía está en circulación ...)
Algy Taylor
Voto a favor. Ser una propiedad no estándar no la hace inútil. Hay casos de uso en los que no es necesario admitir nada excepto webkit. Esta respuesta me ayudó, y el efecto -webkit-filter parece más adecuado en mi caso que box-shadow.
Anton Jebrak
Esta es la mejor respuesta, porque eliminará el contenido y no el contenedor
smedasn
3

Depende de cuáles sean sus 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 alternativas, por ejemplo, basadas en este ejemplo , pero lo más probable es que necesite un marcado adicional.

Boldewyn
fuente
2

tarde a la fiesta aquí; Sin embargo, solo quería agregar un poco más de diversión.

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

le dará una imagen acolchada de aspecto agradable. El relleno le dará un borde blanco simulado (o cualquier borde que haya establecido). el rgba solo te permite hacer una opicidad en el color particular; 0,0,0 siendo negro. Puede utilizar cualquier otro color RGB con la misma facilidad.

¡Espero que esto ayude a alguien!

Petrogad
fuente
0

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

kinakuta
fuente