resplandor - ¿Cómo dar brillo exterior a un objeto en un png transparente usando CSS3?
resplandor texto css3 (8)
De hecho, puedes hacer esto con el filtro de desenfoque CSS3. Simplemente apile 2 imágenes una encima de la otra y aplique el siguiente estilo a una de ellas:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
Para cambiar el color de la otra imagen, puede jugar con otros filtros como hue-rotar, sephia, etc.
Estoy trabajando en un proyecto en el que necesito hacer modificaciones en más de 500 imágenes para dar brillo exterior en el efecto de desplazamiento . Tendré que modificar cada imagen para dar brillo exterior. Será una tarea muy lenta.
Este es un ejemplo de una imagen. Todas las imágenes son transparentes .png
¿Es posible darle este efecto de brillo exterior a la imagen de la botella usando cualquier truco de CSS3?
Esto es solo un ejemplo de una imagen, otras imágenes tienen diferentes tamaños y formas.
Encontré una manera fácil si puedes trabajar con Photoshop.
Abre la imagen transparente (ejemplo.png) en photoshop y toma la herramienta de desenfoque. Luego difumina toda la imagen y guarda como (ejemplo-hover.png).
<div id="img1">
<img src="images/example.png">
</div>
#img1:hover{
background: url(''images/example-hover.png'') no-repeat 0px 0px;;
}
Esto puede hacerse usando filter (box-shadow). Eche un vistazo a http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison
Aquí hay una demo http://jsfiddle.net/jaq316/EKNtM/
Y aquí está el código
<style>
.shadowfilter {
-webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
}
.bottleimage {
width: 500px;
}
</style>
<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Coca_Cola_Zero_bottle.png" class="shadowfilter bottleimage"/>
Lo que puede hacer es crear un efecto de brillo en su programa de gráficos, luego aplicarlo como una imagen de fondo cuando la imagen esté suspendida. Tendrá que producir el brillo de cada imagen usted mismo, pero se verá realmente genial.
EDITAR: He creado un programa que creará las imágenes brillantes para usted de forma rápida y fácil. Puede descargarlo en http://thedarkworld.net/projects/imgglow/
Espero que esto ayude.
Prefiero generar esos resplandores con un poco de apilamiento. La primera imagen usa la siguiente regla de filtro CSS:
blur(5px) grayscale(1) sepia(1) saturate(10000%) invert(1)
Esto le da un brillo algo más grande que la base ''botella'' en azul.
A continuación, cargue una segunda copia de la imagen en las mismas coordenadas, dándole la botella con un fondo transparente encima del borroso halo azul con un fondo transparente similar.
Si tiene que hacer esto a más de 500 imágenes, lo que haría sería un gran PNG transparente del inverso de la botella con bordes emplumados alrededor de la botella y colocarlo sobre un DIV con el color de fondo debajo y la imagen de la botella en el medio . Esto hará que el color de fondo sólido parezca desvanecerse en la botella inversa PNG y todo lo que tendrías que hacer para cambiar el color del brillo es cambiar el valor del CSS.
Escribe algo de jQuery para permitirte ingresar el valor HEX y estás listo;)
EDIT *
¡Problema resuelto!
http://phillipjroth.com//8693733/index.html
Edite la línea 19 del código CSS "color de fondo" y actualizará el resplandor. Los PNG son de baja calidad, pero puede ajustarlos para eliminar los bordes estriados.
Tan fácil como un pastel. Solo usa la misma imagen dos veces, una encima de la otra.
<div class="container">
<img class="main" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" />
<img class="glow" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" />
</div>
Simplemente trabaja en la imagen de abajo, escala un poco, brilla hasta que sea blanca y luego difumina. Luego establece su opacidad en 0 y la vuelve a establecer en uno cuando la imagen de arriba está suspendida.
.container {
position:relative;
background-color:#444444;
width:600px;
height:600px;
}
img {
position:absolute;
max-height:90%;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
img.main {
z-index:2;
}
img.glow {
z-index:1;
transform: scale(1.01) translate(-50%, -50%);
-webkit-transform: scale(1.01) translate(-50%, -50%);
filter: brightness(0) invert(1) blur(5px);
-webkit-filter: brightness(0) invert(1) blur(5px);
opacity:0;
}
img.main:hover ~ img.glow {
opacity:1;
}
No se requiere Javascript en absoluto.
aquí hay un complemento que encontré temprano que hace el truco en la imagen PNG ...
Uso:
Habilita el brillo y establece el color y el radio:
$("#testimg").glow({ radius: "20", color:"green"});
Deshabilitar brillo
$("#testimg").glow({ radius: "20", color:"green", disable:true });
o
$("#testimg").glow({ disable:true });