Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad box-shadow.
Así pues, lo que antes era un verdadero engorro y peso adicional innecesario para nuestras páginas, ahora se puede hacer con unas sencillas propiedades de CSS 3. Como decíamos, ya explicamos la propiedad box-shadow de CSS 3 y vimos ejemplos para utilizarla de modo que podamos producir sombras. En este artículo veremos una pequeña práctica para utilizar esa misma propiedad para obtener otro estilo de capa diferente, que es el resplandor exterior.
Pues resulta que un resplandor exterior es justamente una sombra, pero en lugar de oscura, de color claro. Así que, haciendo uso de la misma propiedad CSS para la creación de sombras, podemos crear los resplandores que deseemos. Eso si, tendremos que colocar un fondo oscuro a nuestra página para verlos, por obvias razones de contraste.
En realidad estas son las propiedades CSS que necesitaremos para crear una sombra, pero de color blanco, con lo que se obtendrá el mencionado resplandor exterior.
-moz-box-shadow: 0px 0px 30px #ffffff;
-webkit-box-shadow: 0px 0px 30px #ffffff;
box-shadow: 0px 0px 30px #ffffff;
La primera propiedad -moz-box-shadow sirve para Firefox, la segunda -webkit-box-shadow es para Safari y Chrome y la tercera propiedad box-shadow sirve para todos los navegadores que ya han incorporado CSS 3 como si fuera un estándar ya aprobado, como Opera e Internet Explorer 9.
Si queremos hacer el resplandor con otro color, por ejemplo verde, tendríamos que cambiar únicamente el RGB de las propiedades CSS, tal como se puede ver a continuación.
-moz-box-shadow: 0px 0px 30px #A3FF0F;
-webkit-box-shadow: 0px 0px 30px #A3FF0F;
box-shadow: 0px 0px 30px #A3FF0F;
Hemos preparado un ejemplo de página web donde he creado un par de resplandores. Como se puede ver, he colocado un fondo de página negro, para que los resplandores se puedan ver correctamente. Asimismo, he colocado algunos estilos adicionales, como un borde para resaltar el resplandor o un padding para hacer que la caja se vea un poquito más holgada.
Para que queden claros todos los estilos CSS que hemos definido para la realización de este ejemplo, vamos a mostrar a continuación el código fuente completo generado.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Hacer un resplandor exterior con CSS3</title>
<style type="text/css">
body{
font-family: Trebuchet MS, verdana, sans-serif;
background-color: #000;
color: #fff;
}
#resplandorblanco{
-moz-box-shadow: 0px 0px 30px #ffffff;
-webkit-box-shadow: 0px 0px 30px #ffffff;
box-shadow: 0px 0px 30px #ffffff;
padding: 10px;
border: 1px solid #fff;
width: 160px;
margin: 40px;
}
#resplandorverde{
-moz-box-shadow: 0px 0px 30px #A3FF0F;
-webkit-box-shadow: 0px 0px 30px #A3FF0F;
box-shadow: 0px 0px 30px #A3FF0F;
padding: 10px;
border: 1px solid #66ff00;
width: 160px;
margin: 40px;
}
</style>
</head>
<body>
<div id="resplandorblanco">
Esta capa tiene un resplandor exterior!!
</div>
<br>
<br>
<div id="resplandorverde">
Esta capa tiene un resplandor exterior, pero ahora he utilizado un resplandor de color verde!!
</div>
</body>
</html>
Para finalizar, podemos ver el ejemplo en marcha en una página aparte.
Jhon Nadie
Redacción en DesarrolloWeb.com