Técnicas CSS: Opacidad

Técnicas CSS

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.

8 comentarios

  1. pasky escribe:

    Hola, estoy aprendiendo css y estaba haciendo ejercicios, buscaba algo así pero no me funcionaba nada. Muchas gracias por la aportación.

  2. katty escribe:

    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

  3. ruben escribe:

    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;
    }

  4. katty escribe:

    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.

  5. Carles escribe:

    Hola, y si quiero que solo se aplique en el padding de la pagina?

    Saludos y gracias

  6. willy escribe:

    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

  7. IAEJEAN escribe:

    “ea aebo” ya pude hacer mas “kremoso” mi menu stilo acordio XD gracias man

  8. Mathias escribe:

    Amigo no logro que el texto no se ponga transparente, segui tus pasos y nada, el “cuadrado” y el “texto” pierden la nitidez :( ayudameee

Envia un comentario

Tienes que estar autentificado para enviar un comentario.