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

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
¿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.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio