En realidad, deberíamos hablar más bien de opacidad, porque así es como lo tratan la mayoría de navegadores. Podemos definir una opacidad del 100% para figuras totalmente opacas u otro valor inferior para distintos grados de imágenes traslúcidas. Olvidaros del 0% porque para ponerlo transparente del todo creo que mejor no lo ponemos ;)
Los distintos códigos que conozco en versión CSS son:
- Internet Explorer --> filter:alpha(opacity=100);
- Internet Explorer 8 -->
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - Firefox, Netscape, Mozilla --> -moz-opacity:0.1;
- Opera, Safari, Chrome --> opacity: 0.1;
- Khtml --> -khtml-opacity: 0.1;
Así las cosas y para evitar problemas, lo mejor que no lo más práctico, será añadir a nuestra etiqueta STYLE, todos los códigos conocidos:
<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;-khtml-opacity: 0.5;" src="URL_IMAGEN"/>
Cuando vayamos a utilizar con cierta frecuencia el efecto de transparencia, lo más cómodo será crear una clase... o varias:
.transparencia80 {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}
.transparencia60 {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
}
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}
.transparencia60 {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
}
Luego sólo habría que aplicar la clase deseada al elemento que queramos: DIV, IMG, LI,... Por ejemplo:
<div class='transparencia50'>
Texto
</div>
Texto
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Por último otra manera algo más farragosa cuando hay que usarla para muchos elementos, pero que no falla con ningún navegador: con eventos Javascript. Así de paso le metemos un fácil rollover.
<img style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=0.7;this.filters.alpha.opacity=70" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30" src="URL_IMAGEN" />
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
hehe, genial dato hermano
ResponderEliminarPero esto no es antiestandar?
ResponderEliminarSalu2
Seguro que lo es PDD20, pero las soluciones alternativas creo que no merecen la pena. Todavía nadie me ha explicado para qué sirve tener una página 100% validada si cada navegador hace con los estándares lo que le da la gana.
ResponderEliminarPues por explicarlo todo tan facil y para Blogger, y porque me gusta como lo dices, mi voto para ti en los premios 20 Blogs...
ResponderEliminarY si, el que no llora...
Un saludo!
El Mar No Cesa.
"Has votado a este blog en esta categoría".
ResponderEliminarPues eso: un voto más. A seguir así.
Un saludo.
Hey, primero felicitarte por el blog, es la primera vez que entro y me estoy quedando alucinado de la gran variedad de cosas que se le puede hacer a un blog.
ResponderEliminarTe comento una duda:
Tengo una plantilla descargada y no quiero estropearle la cabecera, por lo tanto tengo el titulo escrito con las fuentes predeterminadas. Me gustaria que me explicases como recortar una imagen para que lo restante se quedara transparente (es decir opacidad 0) y poder sustituirlo por dicha fuente. Es decir como la primera imagen que tienes en el post.
Si no me has entendido bien te ruego que te pongas en contacto conmigo.
Muchas gracias y a seguir asi!
http://www.pirapnhas.blogspot.com
Hmmm... No sé si es exactamente esto lo que preguntas, pero tienes que utilizar un editor de imágenes (Photofiltre, Gimp, Photoshop, etc.) y con él podrás manipular la imagen. Primero seleccionas (normalmente por color) la parte a quitar y una vez marcada la borras. Luego grabas la imagen como GIF para que te guarde la parte sin contenido como transparente.
ResponderEliminarhola olo, mi consulta es media pretenciosa, necesito hacer es modificar u omitir el panel de blogger para asi limitar a algunos usuarios solamente a crear o modificar los post sin la necesidad que me muestre aspectos tecnicos... si me pudieras orientar te agradeceria. se bastante de html y css. gracias
ResponderEliminarA ver si lo entiendo... Tiene un blog compartido y quieres que el resto de autores sólo tengan acceso a las entradas ¿es así? Pues para eso sólo tienes que invitarlos al blog pero sin hacerlos administradores.
ResponderEliminarSaludos.
hola olo, mas o menos es lo que me recomendas, pero para ser mas especifico me gustaria ocultar la plataforma blogger, armarme un administrador propio con mi diseño. saludos olo
ResponderEliminarYo sólo entiendo un poco de Blogger. De todas formas, una opción es comprar un dominio y redireccionar tu blog Blogger a esa dirección. El panel, el control de los autores y prácticamente todo, será lo mismo que ahora, pero la dirección será la tuya. En Blogger seguro que puedes hacer lo que dijiste: diseño propio y autores sin administración.
ResponderEliminar