DIPLOX

Marcas de agua con css

Por sereno

Sábado, 19/03/2011

CSS Watermark es una forma sencilla de crear una marca de agua para nuestras imágenes. Se puede personalizar el lugar donde aparecerá la marca de agua: superior-izquierda (topleft), superior-derecha (topright), inferior-izquierda (bottomleft) e inferior-derecha (bottom-right).

Simplemente hay que incluir el CSS:

y añadir el siguiente código cada vez que deseemos añadir una imagen con marca de agua:

<div class=¨watermark posicion¨>
<div class=¨text¨>Marca de agua</div>
<img src=¨Nombre_Imagen.jpg¨ width=¨300¨ height=¨199¨ alt=¨alt imagen¨ >
</div>

donde ¨posicion¨ puede tomar los valores: topleft, topright, bottomleft, bottomright.

Podemos modificar tanto el formato del texto, como la opacidad del mismo si modificamos la siguiente clase CSS incluida en el fichero Watermark.css:

div.watermark .text {
position: absolute;
cursor: default;
font: bold 22px Verdana, Arial, Sans-serif;
color: White;
margin: 4px;
line-height: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha (opacity=50);
opacity: .5;
-moz-opacity: .5;
}

EJEMPLO

http://Www.webintenta.com/Files/Images/v8/watermark.html

DESCARGAR:

http://Www.webintenta.com/Files/Images/v8/watermark.html

Por sereno