¿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.

Índice de contenidos

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

casa-airbnb-en-Santa-Cruz-de-Tenerife

Viajar solo: una opción con funciones añadidas en Airbnb

Viajar solo es una experiencia única según testimonios que se lanzan a hacer turismo en solitario. Te ayuda a conocerte a ti mismo más y mejor, te exige sacar tus habilidades sociales para conectar con gente durante la travesía y, al no tener ataduras conyugales, te permite encontrar un ligue allá donde estés. Índice de

sinalogy-BC500-y-TC500

Estas cámaras de videovigilancia de Sinalogy merecen la pena

Las cámaras de videovigilancia son un elemento fundamental para todo aquel quiera reforzar la seguridad en una casa o en una empresa. Recientemente, se ha conocido que la vivienda del jugador del Real Madrid, Rodrygo, era asaltada mientras el delantero disputaba la final de la Copa del Rey en Sevilla. No es la primera que

beneficios-de-chatGPT-para-emprendedores

8 usos de ChatGPT para cualquier emprendedor

Estamos en la era de ChatGPT y el boom de las aplicaciones de inteligencia artificial. Junto al popular desarrollo de OpenAI, han aparecido un sinfín de soluciones para usuarios y empresas. De hecho, se ha popularizado tanto la inteligencia artificial que es necesario parar porque no se sabe hasta qué punto podría ser dañina. Como

Tecnologia Linea de Gol

La tecnología detrás de la Tecnología de la Línea de Gol

La Tecnología de la Línea de Gol utiliza cámaras de alta velocidad para determinar si el balón ha cruzado completamente la línea, asegurando que los goles sean concedidos de manera más precisa. Este sistema se ha vuelto obligatorio en competiciones de fútbol en todo el mundo desde el 2012, y ha tenido un impacto positivo en la eliminación de controversias y en mejorar la experiencia de los aficionados.

iOS-16

¿La última actualización de iOS 16 antes de que llegue iOS 17?

Los expertos en el mundo Apple pensaban que iOS 16 tendría unas cuantas actualizaciones y no han fallado. Los últimos rumores sobre un nuevo desarrollo del sistema operativo de los iPhone apuntan a la versión de iOS 16.6. Y es que apenas se estaba trabajando en la versión de iOS 16.5, cuando un informe de