Un brillo exterior suave agregado a un elemento en su página web hace que el elemento se destaque para el espectador. Usar CSS3 y HTML para aplicar un brillo alrededor de los bordes exteriores de un objeto importante. El efecto es similar a un resplandor exterior agregado a un objeto en Photoshop.
Crea 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 un ejemplo de caja rectangular de esquinas redondeadas, un elemento DIV se coloca en otro elemento DIV con un fondo negro. El DIV externo no es necesario para el resplandor, pero es difícil ver el resplandor sobre un fondo blanco.
Establecer el tamaño y el color del elemento
Después de elegir el elemento que va a embellecer con un brillo, agregar estilos a él, como el color de fondo, el tamaño y las fuentes.
Este ejemplo es un rectángulo azul; el tamaño se establece en 147 px por 90 px; y el color de fondo se establece en # 1f5afe, un azul real. Incluye un margen para colocar el elemento en medio del elemento contenedor negro.
Alrededor de las esquinas
Crear un rectángulo con esquinas redondeadas es fácil con CSS3. Agregue la propiedad de estilo border-radius a su clase de brillo. Solo recuerda usar el –Kit web– y –Moz– prefijos para la máxima compatibilidad.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
radio de borde: 15px;
Agregue el brillo con una sombra de caja
El brillo en sí se crea con una sombra de caja. Debido a que halos todo el elemento sin proyectar el brillo de un lado como una sombra, establezca las longitudes horizontal y vertical 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 esa configuración para determinar qué tan ancho y difuso desea que sea el brillo. El color rgb (255,255,190) es un color amarillo con transparencia alfa RGBa establecida en 75 por ciento—rgba (255,255,190, .75). Elija un color de brillo que funcione mejor para su proyecto. Al igual que con el redondeo de las esquinas, no olvide utilizar los prefijos del navegador (–Kit web– y –Moz–) para obtener la mejor compatibilidad.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-caja-sombra: 0px 0px 15px 5px rgba (255, 255, 190, .75);
sombra de cuadro: 0px 0px 15px 5px rgba (255, 255, 190, .75);