Tutorial: Transparencias en Imagenes y Textos mediante CSS

  • Autor Autor Gonzalo Castillo
  • Fecha de inicio Fecha de inicio
G

Gonzalo Castillo

Gamma
Diseñador
Hola, esta es una nueva tecnica que aprendi. Talvez muchos de ustedes la conozca pero algunos no asi que se las dejo. Con esta tecnica podemos aplicar transparencia a imagenes o textos mediante unas lineas de CSS. Es muy util a la hora de hacer botones o enlaces de imagenes.

Para ver las tecnicas tienes que entrar aqui.

Saludos!
 
Excelente! Va a venir muy bien para muchos, a ver si el IE se porta bien con esta tecnica.

A la próxima podrías poner todo el tuto por aquí?
 
jaja sabian que me hiban a decir eso, asi que pense una respuesta, no lo puse por que tengo que usar css en las imgs y aca no se puede asi que mejor se pasan por el blog y ven bien.

Saludos!
 
Movido a tutoriales
 
Ya lo había leído en tu fuente 😛

2 criticas constructivas.
Checa tu texto antes de publicarlo, tienes muchas faltas de ortografía y comas de mas XD.
Te hubieras inventado otros ejemplos, por lo que veo hiciste una traducción nomas.

Una forma de usarlo en una imagen dentro de cada post es haciendo una clase como se muestra en el tuto.

imagentrans{
color:blabla..
trans... blabla..
}

Y llamarla en los post así:
<img src="http://imagen.....jpg" class="imagentrans" />
Hacer clic para expandir...

así te ahorras escribir el style="bla:center;............"

A mi me gusta este efecto
.sombra{
color:#77866F;
width:100%;
filter:dropshadow(color=#333333,offx=1, offy=1, positive=1), glow(color=#333333, strength=0);
}

<span class="sombra"> Efecto Sombra en el texto</span>
Hacer clic para expandir...
 
Última edición:
Excelente forma de hacerlo Daniel, si tienes unos parámetros, como el de las transparencias en los hovers, ahorra muchísimo tiempo con las class...
 
Muy buen aporte 😀
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba