domingo, 16 de mayo de 2010

CSS text-shadow efecto iluminación


Johnson Zachary es el creador de este fantástico efecto de iluminación creado con la propiedad text-shadow. Utiliza una imagen PNG que es la que aporta la iluminación al efecto y JavaScript con el fin de simular las sombras en tiempo real de la propiedad text-shadow.

Funciona en Firefox, Safari, Opera y Chrome. Si queremos ver el efecto en nuestro blog aunque sea simplemente por curiosidad podemos añadirlo en un gadget de html de la siguiente forma.

Antes de </head> pegamos el contenido del siguiente archivo que son el script y los estilos,

El archivo contiene la imagen PNG de fondo, recuerdo que es conveniente alojarla en nuestro propio servidor para evitar futuros problemas con el servidor donde la he alojado.
Se encuentra en los estilos en background: url(spotlight.png) top center; 
Guardamos los cambios y nos situamos en plantilla de diseño, allí editamos un nuevo gadget de HTML y pegamos en su interior lo siguiente:

<div id="text-shadow-box">
<div class="wall">
<p id="tsb-text">
Gem@ BLOG</p>
<div>
</div>
</div>
<div id="tsb-spot">
</div>
</div>

Sustituimos Gem@ BLOG por vuestro título y para que ocupe todo el ancho y alto de vuestro gadget modificamos el ancho en width: 990px y el alto en height: 406px lo haremos en los estilos donde dice:

#text-shadow-box {
position: relative;
width: 990px;
height: 406px;
background: #666;
overflow: hidden;
cursor: none;
border: 1px solid #333;
}

No hay comentarios:

Publicar un comentario