Un brillo exterior suave 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 exterior agregado a un objeto en Photoshop.
Primero crea el elemento para 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 un fondo negro. El DIV externo no es necesario para el brillo, pero es difícil ver el brillo sobre un fondo blanco.
Dale a la DIV una clase de brillo:
Establecer el tamaño y el color del elemento
Después de elegir el elemento que va a adornar con un brillo, adelante, agregue los estilos que desee, como el color de fondo, el tamaño y las fuentes. 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 un margen para colocar el elemento en el centro del elemento contenedor negro.
Redondear las esquinas
Crear un rectángulo con esquinas redondeadas es fácil con CSS3. Agregue la propiedad de estilo de borde de radio a su clase de brillo. Solo recuerda usar los prefijos –webkit– y –moz– para la mayor compatibilidad.
-webkit-border-radius: 15px;-moz-border-radius: 15px;radio del borde: 15px; Añade el brillo con una sombra de caja
El resplandor en sí se crea con un cuadro de sombra. Debido a que desea que halo todo el elemento y no proyecte el brillo de un lado como una sombra, configure 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 esos ajustes para determinar qué tan ancho y difuso desea que sea el brillo. El color rgb (255,255,190) es un color amarillo con una transparencia alfa RGBa establecida en 75 por ciento, rgba (255,255,190, .75). Elija un color brillante que funcione mejor para su proyecto. Al igual que con redondear las esquinas, no olvide utilizar los prefijos del navegador (–webkit– y –moz–) para obtener la mejor compatibilidad.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);caja-sombra: 0px 0px 15px 5px rgba (255, 255, 190, .75); Prueba la caja brillante
Pruebe la caja brillante en uno o más navegadores y realice los ajustes necesarios para obtener el efecto brillante que mejor se adapte a su página web.
