Un suave brillo exterior agregado a un elemento en su página web hace que el elemento se destaque al espectador. Use CSS3 y HTML para aplicar un brillo alrededor de los bordes exteriores de un objeto importante. El efecto es similar a un brillo externo agregado a un objeto & amp; amp; nbsp; en Photoshop.
Cree el elemento para brillar
Los efectos de brillo funcionan en cualquier fondo, pero se ven mejor en fondos oscuros porque entonces el brillo parece brillar más. En una esquina redondeada & amp; amp; nbsp; caja rectangular & amp; amp; nbsp; ejemplo, & amp; amp; nbsp; a DIV & amp; amp; nbsp; element & amp; amp; nbsp; se coloca en otro DIV & amp; amp; nbsp; elemento con fondo negro. El DIV externo & amp; amp; nbsp; no es necesario para el brillo, pero es difícil ver el brillo en un fondo blanco.
Video destacado
Establezca el tamaño y el color del elemento
Después de elegir el elemento you & amp; # x2019; va a embellecer con un brillo, agregarle estilos, como & amp; amp; nbsp; color de fondo, tamaño y & amp; amp; nbsp; fonts.
Este ejemplo es un rectángulo azul; el tamaño se establece en 147px por 90px; y el color de fondo se establece en # 1f5afe, un azul real. Incluye & amp; amp; nbsp; un margen para colocar el elemento en el medio del elemento contenedor negro.
Redondo de las esquinas
Crear un rectángulo con & amp; amp; nbsp; esquinas redondeadas & amp; amp; nbsp; es fácil con CSS3. Agregue el border-radius & amp; amp; nbsp; style a su luminoso & amp; amp; nbsp; class. Solo recuerde usar el & amp; amp; nbsp; & amp; # x2013; webkit & amp; # x2013; & amp; amp; nbsp; y & amp; amp; nbsp; & amp; # x201bs.& amp; amp; nbsp;
& lt; pre & gt; – webkit-border-radius: 15px; & lt; br & gt ;
-moz-border-radius: 15px; & lt; br & gt ;
radio de borde: 15px; & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Agregue el resplandor con una sombra de caja
El brillo en sí se crea con una sombra de caja & amp; amp; nbsp;. Debido a que halos todo el elemento sin proyectar el brillo de un lado como una sombra, establezca las longitudes horizontales y verticales en 0px.
En este ejemplo, el radio de desenfoque se establece en 15px y la extensión del desenfoque es de 5px, pero puede jugar con esas configuraciones para determinar qué tan ancho y difuso desea que sea el brillo. El color rgb (255,255,190) & amp; amp; nbsp; es un color amarillo con transparencia alfa RGBa establecida en 75 por ciento & amp; # x2014; rgba (255,255, 7) . Elija un color brillante que funcione mejor para su proyecto. Al igual que con el redondeo de las esquinas, don & amp; # x2019; t olvide usar los prefijos del navegador ( & amp; # x2013; webkit & amp; # x2013; & amp; nbsp; y & amp; nbsp; (tix.
& lt; pre & gt; -webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75); & lt; br & gt ;
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75); & lt; br & gt ;
sombra de caja: 0px 0px 15px 5px rgba (255, 255, 190, .75); & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
& amp; # x203A; Informática
