18 marzo 2010

Colocar opacidad a tus imágenes con CSS

 
El efecto opacidad es uno de los efectos mas importante y populares que se pueden usar en los blog, por que es mucho mejor usar una imagen con link que al pasar el puntero sobre ella de un poco de luz que tener una simple imagen que no atrae a nada con ningun efecto en tu blog. Aqui te dejo estas muestras para que sepas de que te hablo.



Lo mejor de todo, es que no utilizaras
ningún Script para realizar este efecto, solo basta con agregar algún estilo CSS en tu blog, y un pequeño fragmento de código que deberás colocar al empezar a realizar los enlaces con las imágenes. Te muestro que hacer.

[1] En el código HTML de tu blog, busca la etiqueta </head> y pega el siguiente código justo antes de lo que acabas de buscar.


<!--LINK-OPACITY-STARTS-->
<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>
<!--LINK-OPACITY-STOPS-http://frikibloggeo.com.ar-->


[2] Guarda la plantilla. Para empezar a usar el codigo, solo debes agregar el fragmento class='linkopacity' para hacer funcionar el efecto. Te muestro un ejemplo.


<a class='linkopacity' href='URL del enlace'><img src='URL de la imagen'></a>


Eso es todo lo que debes hacer... Verdad que no es nada difícil.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo