Opacidad en Textos e Imágenes con CSS

Buenos Días, aquí les traigo una nueva técnica que es muy bien empleada por los mejores diseñadores a la hora de hacer una página web, yo lo he utilizado una sola vez, a esta técnica la he visto en FlepStudio me ha interesado mucho, porque yo antes, cuando quería que una imagen se vea un poco transparente y cuando pasen el cursos por ella se vea bien, usaba dos imágenes diferentes, pero esta técnica me facilito esto, solo uso una imagen y obtengo el mismo resultado pero un poco más rápido al cargar, no es mucha la diferencia pero algo es . Esta técnica creo que forma parte de la nueva generación de CSS (Cascading Style Sheet), creo que se hace llamar, CSS3. Si no entendiste, esta propiedad CSS3 permite agregar transparencia a un elemento, para darle a un elemento transparencia al 100% tenemos que usar de valor, 0.0 y si no quieres transparencia, 1.0.

Ejemplo de Transparencia al 50%:

opacity: 0.5;

Como siempre, Internet Explorer te da un problema, no soporta esta propiedad CSS, por lo que deberemos usar también la propiedad “alpha filter” creada por Microsoft. Esta propiedad “alpha filter” necesita entre un valor de 0 (Completamente Transparente) a 100 (Sin Transparencia), es igual que el anterior, solo que este no usa puntos.

Ejemplo de el alpha filter para una Transparencia de 50%:

filter: alpha(opacity=50); /*for Internet Explorer 6/7*/
filter: “alpha(opacity=50)”; /*for Internet Explorer 8*/

A continuación podre unos ejemplos con imágenes y textos, tengan en cuenta, que el último ejemplo en el texto, Internet Explorer requiere algunos valores más para que nosotros podamos ver el efecto.

1- Transparencia de 50% en una Imagen:

Estos valores voy a usar en este ejemplo:

img{
opacity:.50;
filter:alpha(opacity=50);
filter: “alpha(opacity=50)”;
}

2- Transparencia de 100% en una Imagen, igual a ninguna transparencia, solo para mostrar el efecto:

Estos valores voy a usar en este ejemplo:

img{
opacity:1;
filter:alpha(opacity=100);
filter: “alpha(opacity=100)”;
}

3- Transparencia de 100% a 50% en una Imagen con Link:

Estos valores voy a usar en este ejemplo:

a:hover img{
opacity:.50;
filter:alpha(opacity=50);
filter: “alpha(opacity=50)”;
}

4- Transparencia de 50% a 100% en una Imagen con Link:

Estos valores voy a usar en este ejemplo:

a img{
opacity:.50;
filter:alpha(opacity=50);
filter: “alpha(opacity=50)”;
}
a:hover img{
opacity:1;
filter:alpha(opacity=100);
filter: “alpha(opacity=100)”;
}

5- Diferencie entre un texto normal y un texto con opacidad de 50%:

Yo he usado un tamaño en la fuente de 2em (200%) para ver mejor el efecto:

p.opacity{
font-size:2em;

Las siguientes lineas son necesarias para ver el efecto en Internet Explorer.
Tenemos que agregarle una anchura de 100% ya que Internet Explorer no aplicar un efecto al texto si no esta definida una altura o una anchura. Agreguen la siguiente linea a continuacion de lo anterior puesto:

width:100%;

Todavia falta una cosa por poner pra que el efecto funcione correctamente en Internet Explorer, debemos ponerle un fondo al texto para solucionar este problema. Copien y pegen la siguiente linea a continuacion de lo anterior:

background-color: #FFFFFF;

Ahora nos toca ingresar el los atributos por la opacidad, al final, nos deberia quedar asi:

p.opacity{
font-size:2em;
width:100%;
background-color: #FFFFFF;
opacity:.50;
filter:alpha(opacity=50);
filter: “alpha(opacity=50)”;
}

El resutlado de todo esto es este:

Texto con una Opacidad a 100%

Texto con una Opacidad a 50%

Listo, hemos terminado, espero que utlizen esta tecnica.

Link | Css3 opacity: transparency of an element in css

Saludos!