octubre 16, 2009

Colocar marcas de agua -WaterMark- utilizando CSS.

Para lograr este efecto sin tener que utilizar programas especializados en el tema, debemos hacer lo siguiente: en primera instancia tener una imágen predeterminada para usarla como marca de agua. Luego, esta imágen, subirla a un hosting -Fileden, MediaFire, etc.-, puesto que necesitaremos, más adelante, una URL de la misma para implementarla. Luego de haber realizado éste primer paso, que es de suma importancia, vamos con el código CSS para su implementación, y que debemos colocarlo sobre   </head>.

.transp-block {
 background: #000 url(watermark.jpg) no-repeat;
 width: 575px;
 height: 335px;
}
img.transparent {
 filter:alpha(opacity=75);
 opacity:.75;
}


Este código debe estar entre estas dos etiquetas  <style type='text/css'> </style>  no lo olvides. Ahora bien, el siguiente código es para la presentación de la imágen con el efecto:

<div class="transp-block">

<img class="transparent" src="sample.jpg" alt="" />

</div>


Podrán observar al finalizar una imágen como la del ejemplo:





Espero les halla sido de utilidad.








1 comentarios:

  • 10 de julio de 2012, 12:46
    Anónimo Comenta:

    a

    delete

Publicar un comentario

Bienvenido, eres libre de expresar tus opiniones.
Para mi no existen comentarios negativos, todos
son positivos porque nos dejan una enseñanza.

Si necesitas contactar conmigo puedes hacerlo a
través de: mitesterlab@gmail.com

 

Mi laboratorio de pruebas Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger