Portanto, o que antes era um verdadeiro estorvo e peso adicional desnecessário para nossas páginas, agora pode ser feito com umas simples propriedades de CSS 3. Como dissemos, já explicamos a propriedade box-shadow de CSS 3 e vimos exemplos para utilizá-la de modo que possamos produzir sombras. Neste artigo, veremos uma pequena prática para utilizar essa mesma propriedade e assim obter outro estilo de camada diferente, que é o resplendor exterior.
Acontece que um resplendor exterior é justamente uma sombra, mas em lugar de escura, é de cor clara. Assim que, fazendo uso da mesma propriedade CSS para a criação de sombras, podemos criar os resplendores que desejemos. Isso sim, teremos que colocar um fundo escuro na nossa página para vê-los, por obvias razões de contraste.
Na realidade estas são as propriedades CSS que necessitaremos para criar uma sombra, porém de cor branca, com o que se conseguirá o mencionado resplendor exterior.
-moz-box-shadow: 0px 0px 30px #ffffff;
-webkit-box-shadow: 0px 0px 30px #ffffff;
box-shadow: 0px 0px 30px #ffffff;
A primeira propriedade -moz-box-shadow serve para Firefox, a segunda -webkit-box-shadow é para Safari e Chrome e a terceira propriedade box-shadow serve para todos os navegadores que já incorporaram CSS 3 como se fosse um padrão já aprovado, como Opera e Internet Explorer 9.
Se quisermos fazer o resplendor com outra cor, por exemplo verde, teremos que mudar unicamente o RGB das propriedades CSS, tal como se pode ver a seguir.
-moz-box-shadow: 0px 0px 30px #A3FF0F;
-webkit-box-shadow: 0px 0px 30px #A3FF0F;
box-shadow: 0px 0px 30px #A3FF0F;
Preparamos um exemplo de página web onde criei dois resplendores. Como se pode ver, coloquei um fundo de página negro, para que os resplendores possam ser vistos corretamente. Também, coloquei alguns estilos adicionais, como uma borda para ressaltar o resplendor ou um padding para fazer com que a caixa pareça um pouquinho mais folgada.
Para que fiquem claros todos os estilos CSS que definimos para a realização deste exemplo, vamos mostrar a continuação o código fonte completo gerado.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Fazer um resplendor exterior com CSS3</title>
<style type="text/css">
body{
font-family: Trebuchet MS, verdana, sans-serif;
background-color: #000;
color: #fff;
}
#resplendorbranco{
-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="resplendorbranco">
Esta camada tem um resplendor exterior!!
</div>
<br>
<br>
<div id="resplendorverde">
Esta camada tem um resplendor exterior, mas agora utilizei um resplendor de cor verde!!
</div>
</body>
</html>
Para finalizar, podemos ver o exemplo em funcionamento em uma página à parte.
