Técnicas CSS: Opacidad
Antes de nada quería pedir perdón por este aparente abandono del Blog durante un mes, podría poner como excusa que he estado muy ocupado estas últimas semanas y aunque en parte sería cierto, no lo es suficiente como para justificar el haber dejado sin actualizar esto tanto tiempo.
En fin, para empezar esta nueva temporada, continuaré con la prometida serie de tutoriales sobre técnicas CSS. Hoy trataré un tema muy sencillo y poco utilizado, pero con mucho juego: la opacidad.
Como todos sabemos la opacidad es la capacidad que tienen algunos objetos de no dejar pasar la luz, de manera que si le vamos restando esta propiedad podemos empezar a ver a traves de ellos.
En CSS podemos jugar con la opacidad de todos elementos de una web. Imaginemos que tenemos un div identificado por #transparente al que darle una opacidad del 50%, sería tan sencillo como incluir estas líneas CSS:
#transparente {
opacity: .5;
filter: alpha(opacity=50);
-moz-opacity: .5
}
Como podemos observar hay varias propiedades, una primera para la mayoría de navegadores comprometidos con los estandares y una adicional para nuestro amigo Internet Explorer que como siempre va a su rollo, tambien podemos poner una tercera propiedad para navegadores basados en el motor de Mozilla (Gecko) que no esten lo suficiente actualizados.
Un ejemplo de esta técnica.
25 de Enero de 2008 a las 13:06
Hola, estoy aprendiendo css y estaba haciendo ejercicios, buscaba algo así pero no me funcionaba nada. Muchas gracias por la aportación.
3 de Abril de 2008 a las 17:18
Hola,
Utilizé esta técnica según lo mostraste y salió bien. Lo utilicé en una especie de panel y necesito poner encima de este panel un texto, pero al reducir la opacidad del panel también se reduce la opacidad del texto, lo que no me es conveniente. Siempre será así o hay alguna otra técnica para tener un div con opacidad digamos de .5 y el texto o cualquier otro contenido o div interior mantega opacidad completamente visible. Saludos
4 de Abril de 2008 a las 9:07
Buenas,
Lo que tu planteas si que es posible y es relativamente sencillo. La idea sería tener 3 elementos: uno para el texto, otro para el fondo y otro que contenga ambos. Por ejemplo:
<div id=”contenedor”>
<div id=”texto”>Hola</div>
<div id=”fondo”></div>
</div>
Con esta estructura podemos dar opacidad independiente al fondo y luego solo quedaria posicionar el texto de manera absoluta para que quede encima del fondo. Por ejemplo:
fondo {
width: 200px;
height: 200px;
padding:10px;
background-color: red;
filter: alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
}
texto {
width: 200px;
height: 200px;
padding:10px;
position: absolute;
}
6 de Abril de 2008 a las 17:35
Gracias por el consejo, me ayudo bastante y salió bastante bien a pesar que soy verdaderamente novata en esto de css. Gracias nuevamente y felicitaciones por los interesantes artìculos.
8 de Octube de 2008 a las 8:18
Hola, y si quiero que solo se aplique en el padding de la pagina?
Saludos y gracias
17 de Febrero de 2009 a las 0:43
los div con opacity son muy usados para imagenes o generalmente para desabilitar elementos y ponerlo como protector de la pagina mientras hay alguna ejecución o quisa para mostrar algo.
aca un ejemplo de como funcióna un div com protector de paguina en pantalla completa
http://soa-pe.blogspot.com/2009/02/div-layer-en-pantalla-completa-con.html
25 de Marzo de 2010 a las 7:02
“ea aebo” ya pude hacer mas “kremoso” mi menu stilo acordio XD gracias man
12 de Septiembe de 2010 a las 6:12
Amigo no logro que el texto no se ponga transparente, segui tus pasos y nada, el “cuadrado” y el “texto” pierden la nitidez
ayudameee