miércoles, 3 de junio de 2009

Aplicar marca de agua con opacidad

Un efecto muy bonito y vistoso, que lo podemos usar para adornar una entrada o usarlo como pullquote o blockquote para resaltar alguna cita textual.
Bueno, para empezar diré que hay muchas formas de crear una marca de agua. En este caso, haremos una marca de agua usando opacidad, para que la imagen se vea como un fondo, como una marca de agua.

Lo único que tenemos que hacer es pegar el siguiente código en algún post o entrada:

<div style="width:300px;height:225px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(AQUÍ-URL-DE-LA-IMAGEN)">
</div>
<p style="width:290px;text-align:justify;position:relative;top:-225px;color:black;">Aquí pones tu texto o algún enlace</p>

♠ No es necesario que la imagen sea ya casi transparente, sólo basta que pongamos la URL de la imagen a "todo color" y el script que les di se encargará del resto.

♠ También es muy importante que adecuemos el ancho y el alto con la imagen que usamos. Por ejemplo , si la imagen que vamos a usar mide 200x300 px, entonces cambiamos los valores width:300px;height:225px; por width:200px;height:300px; claro que deberemos de buscar una imagen no muy grande.

♠ Con top:-225px; podrás centrar el texto que pongas sobre la marca de agua.

Ahora un ejemplo:

» La imagen original:



» La misma imagen que con el script se convertirá en marca de agua:

Este es un ejemplo: aquí
pones tu texto o algún enlace

No hay comentarios:

Publicar un comentario