¿Cómo añadir un brillo a un elemento de la página web con CSS?

¿Cómo añadir un brillo a un elemento de la página web con CSS?

¿Cómo añadir un brillo a un elemento de la página web con CSS?

VALORACIÓN DEL ARTÍCULO:
5/5


Un suave resplandor exterior añadido a un elemento de su página web hace que el elemento destaque ante el espectador. Utilice CSS3 y HTML para aplicar un brillo alrededor de los bordes exteriores de un objeto importante. El efecto es similar a un resplandor exterior añadido a un objeto en Photoshop.

Primero cree el elemento a brillar

Los efectos de brillo se pueden hacer en cualquier fondo de color, pero se ven mejor en fondos oscuros porque entonces el brillo parece brillar más. En este ejemplo de caja rectangular de esquina redondeada, un elemento DIV se coloca en otro elemento DIV con fondo negro. El DIV externo no es necesario para el resplandor, pero es difícil ver el resplandor en un fondo blanco.

Dale al DIV una clase de brillo:

Establecer el tamaño y el color del elemento

Después de elegir el elemento que vas a embellecer con un resplandor, sigue adelante y agrega cualquier estilo que desees, como el color de fondo, el tamaño y las fuentes. Este ejemplo es un rectángulo azul; el tamaño está ajustado a 147px por 90px; y el color de fondo está ajustado a #1f5afe, un azul real. Incluye un margen para colocar el elemento en el centro del elemento contenedor negro.

.glow {
margen: auto
ancho: 147px;
altura: 90px;
color de fondo. Alrededor de las esquinas

Crear un rectángulo con esquinas redondeadas es fácil con CSS3. Añade la propiedad border-radius style a tu clase de brillo. Sólo recuerda usar los prefijos -webkit- y -moz- para obtener la máxima compatibilidad.

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
radio del borde: 15px;

Agregar el brillo con una sombra de caja

El brillo en sí mismo se crea con una sombra de caja. Debido a que quieres que halo todo el elemento y no proyectar el brillo de un lado como una sombra, se establecen las longitudes horizontal y vertical a 0px. En este ejemplo, el radio del desenfoque se ajusta a 15px y la extensión del desenfoque es de 5px, pero usted puede jugar con esos ajustes para determinar qué tan amplio y difuso quiere que sea el brillo. El color rgb(255,255,190) es un color amarillo con transparencia alfa RGBa establecida en 75 por ciento de ergba(255,255,190, .75). Elija el color que mejor se adapte a su proyecto. Al igual que con el redondeo de las esquinas, no olvides usar los prefijos del navegador (-webkit- y -moz-) para obtener la mejor compatibilidad.

-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-Sombra de caja: 0px 0px 0px 15px 5px rgba(255, 255, 190, .75);
sombra de caja: 0px 0px 0px 15px 5px rgba(255, 255, 190,.75);

Probar la caja incandescente

Pruebe la caja incandescente en uno o más navegadores y realice los ajustes necesarios para obtener el efecto incandescente que mejor se adapte a su página web.

TAMBIÉN TE INTERESA

OPPO-Snapdragon-8-Gen-2

El chip Snapdragon 8 Gen 2 se estrenará en el próximo Find X de OPPO

OPPO ha participado en la Snapdragon Summit 2022 para presentar su colaboración con Qualcomm Technologies en materia en la tecnología Ray Tracing para dispositivos móviles. Las dos empresas, que llevan trabajando conjuntamente desde la primera fase de desarrollo del procesador de nueva generación, harán posible que los usuarios disfruten de la tecnología una ray tracing basada

e-bike-Bike-Ocasion

Black Friday: ¿buen momento para hacernos con una e-bike?

Sin duda, el Black Friday es una oportunidad para comprar muchos productos de tecnología entre los que cabría pensar en una e-bike. Este tipo de bicicletas tienen mucho componente tecnológico y han subido en ventas como la espuma desde principios de la pandemia, allá por marzo de 2020.   En este post nos sumergiremos como

reloj Haylou GST Lite

Haylou GST Lite, un reloj inteligente con un precio y rendimiento imbatibles

De todos los modelos de relojes inteligentes, encontramos uno, el Haylou GST Lite, que sorprende por su alto rendimiento, bajo precio y las muchas funciones que incorpora para nuestro día a día. Comparado con otros dispositivos similares, parece difícil encontrar uno reloj como este desde el punto de vista de su rendimiento y el precio.

problemas-de-conexion-reuniones-virtuales

Los problemas más habituales de las reuniones virtuales

Es un hecho que una de las consecuencias más palpables tras la pandemia en entornos laborales ha sido un aumento de las reuniones virtuales por parte de miembros de un equipo de trabajo. Inicialmente para muchos, este paso hacia la pantalla supuso muchos problemas en cuanto a experiencia o la adopción de tecnologías en su

marketplace

Un servicio de mecanizado CNC operable como un marketplace

La producción automatizada es la gran tendencia de la industria tras la llegada de la digitalización al sector y factores como la crisis sanitaria y los consecuentes cuellos de botella en la cadena de suministro han impulsado este tipo de gestión en las empresas. Contar con un servicio de mecanizado CNC es la forma más

whatsapp-business

WhatsApp Business podría ayudar a la sanidad española con estas 5 acciones

Si bien es cierto que WhatsApp Business está pensado para ayudar a pequeños y medianos negocios en su comunicación con los clientes, la popular aplicación también puede ser útil para la gestión de la sanidad. Es verdad que hay mucha diferencia en cuanto a tamaños y volumen de individuos en cuanta a la atención, pero hay