Hace años conseguir un efecto de resplandor requería apoyarnos en imágenes generadas desde programas de diseño gráfico como Photoshop. Sin embargo, CSS permite separar el contenido de la presentación y ofrece a los diseñadores un completo control de la apariencia, sin tener que acudir a elementos externos a los propios estándares de la web. En este artículo, conseguiremos que diversos elementos de la página tengan un resplandor exterior, creando el efecto de emisión de luz, y lo haremos únicamente con hojas de estilo CSS.
Para hacerlo, supongamos que, tras contar con tu alojamiento web y tu dominio, estás diseñando tu web y nos vamos a apoyar en las sombras CSS, un recurso del que ya hemos hablado en diversos artículos. Puede parecer un poco extraño que con algo como una sombra, que se supone oscura, podamos conseguir un resplandor, pero en la práctica es posible, ya que somos capaces con CSS de definir el color de la sombra… ¡Y con esas sombras de colores claros ya tendremos el buscado resplandor!
Comencemos echando un vistazo al efecto en los elementos que vamos a reproducir:
Sombras CSS como resplandor
Como hemos dicho, usamos una sencilla sombra CSS para conseguir el efecto de resplandor, coloreando dicha sombra con tonalidades claras.
Las sombras en CSS permiten aplicarse tanto a cajas como a textos. La propiedad de CSS cambia en cada caso, pero los valores que vamos a indicar son exactamente los mismos.
Aplicamos sombras a textos mediante text-shadow:
text-shadow: 0 0 30px #fff;
Para aplicar las sombras sobre cajas, usamos la propiedad box-shadow como sigue:
box-shadow: 0 0 20px #4f9;
Los valores que hemos indicado para ambas propiedades corresponden con los siguientes:
- Desplazamiento horizontal de la sombra (cualquier unidad de CSS es válida).
- Desplazamiento de la sombra en vertical (cualquier unidad de CSS).
- Cantidad de distancia del degradado (unidades CSS).
- Color de la sombra.
Para conseguir nuestro resplandor generalmente no vamos a aplicar desplazamiento a la sombra, ya que la iluminación debe partir del centro del objeto. Luego, la cantidad de distancia del degradado afecta a la cantidad de luz que va a emitir el objeto. A más distancia, el halo será mayor y, por tanto, el objeto tendrá un resplandor más remarcado.
En lo que respecta al color, podemos jugar con cualquiera que nos interese. La luz puede ser blanca, pero también amarilla, verde, etc. Lógicamente, esta luz se verá más clara cuanto el color de la sombra sea más brillante y también cuando el fondo donde se sitúa el elemento sea más oscuro.
Ejemplos de elementos con resplandor
En el código que vemos a continuación tenemos los tres elementos de la imagen anterior, con los estilos CSS que hemos preparado para definir su aspecto. Aunque haya bastantes estilos CSS, realmente lo que respecta al efecto de resplandor se consigue con los atributos comentados en el punto anterior: text-shadow y box-shadow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resplandor</title>
<style>
body {
background-color: #444;
font-family: trebuchet ms;
display: flex;
justify-content: space-around;
flex-direction: column;
margin: 40px;
}
h1 {
color: #ffa;
text-shadow: 0 0 30px #fff;
}
input {
font-size: 1.1em;
background-color: #ddd;
border: 3px solid #9fc;
border-radius: 5px;
padding: 8px;
width: 400px;
box-shadow: 0 0 20px #4f9;
}
div {
padding: 20px;
background-color: #333;
color: #ddd;
width: 300px;
font-size: 1.2em;
box-shadow: 0 0 40px #03f;
border-radius: 16px;
}
</style>
</head>
<body>
<h1>Este texto tiene resplandor</h1>
<br>
<input type="text" value="Esto es un campo de texto...">
<br><br>
<div>Esta es una división normal con resplandor neón azul</div>
</body>
</html>
Si te ha gustado este tema, echa un vistazo a este tutorial para aplicar sombras y otros efectos a los textos también con el atributo text-shadow.