Taller de CSS, Opacity

Valoración del artículo:
Explicamos como hacer efectos de transparencia, cambiando la opacidad de elementos como capas, formularios e imágenes entre otros.
Publicado: 08/3/05
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
En esta ocasión mostraré un efecto bastante simpático que podemos aplicar en capas, imágenes, formularios, etc…

La propiedad opacity funciona tanto en Internet Explorer como en Firefox:

IE:

filter: alpha(opacity=50)

Firefox:

opacity: .5

Mozilla:

-moz-opacity:0.5

El siguiente ejemplo funciona en los dos navegadores:

<style type=”text/css”>
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>

<p class="ejemplo">Ejemplo sin opacity.</p>
<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>
<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" class="opaco" width="100" height="109"></p>


Ver ejemplo en marcha
Referencia: Os dejamos un link a otro artículo de DesarrolloWeb.com donde se ofrecen explicaciones adicionales y actualizadas sobre cómo crear transparencia con CSS.

Comentarios
Fueron enviados 4 comentarios al artículo
1 comentario no revisado
3 comentarios revisados:
Por: Christian González
09/3/05
Excelente articulo, lo he probado y con las imagenes y capas no tiene drama, pero cuando lo aplico a los formularios, en Firefox anda bien pero IE no. Además me gustaría que hicieran un artículo explicando todos los filtos existente y su aplicacion para ambos navegadores, como yo trabajo con DreamWeaver y algunos los he entendido pero me gustaría que hicieran un ampliación de su utilización, siempre para ambos navegadores, puesto que son los que tenemos en cuenta los desarrolladores a la hora de programar.
- Un abrazo. :-)
Por: Elmer John
10/5/05
Ok pero que pasa en linux y otros browser tenemos q tener en cuenta eso a la hora de implementar un soft en la web ... Pero buen comienzo un abrazo bye :-)
Por: Anyul Rivas
24/9/05
Excelente Curso.
He encontrado una forma de aplicar degradados a fondos de etiquetas. tan solo tienes que poner lo siguiente

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ff333333');}

donde StratColorStr y EndColorStr son los colores de degradado, pones #ff y luego el codigo hexadecimal

Genial !!!, no?

Manuales relacionados
Categorias relacionadas
El autor
Lectura recomendada
Compra este libro en Agapea, la librería urgente a domicilio.
Últimas noticias
Alojados en el grupo