Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

Ultima revisión 15/10/2012

Transparencias en CSS3

Antes de CSS3, las transparencias sólo se podían hacer en Internet Explorer con la propiedad filter y en los demás con opacity. Esto era un poco caótico y encima funcionaba de aquella manera ya que tenía las limitaciones de aplicarse a todo el recipiente o contenedor.

Ejemplo

Prueba con transparencia mediante opacity

Prueba con transparencia mediante filter sólo aplicable a IE7 en inferiores

Prueba con transparencia mediante -ms-filter sólo aplicable a IE8

.transparencia1 { // para todos los navegadores incluyendo IE9+
    opacity: .5 !important;
    color: #283a64 !important;
}

.transparencia2 { // para IE5-7
    filter: alpha(opacity=50);
    color: #ffffff !important;
}

.transparencia3 { // para IE8
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    color: #ffffff !important;
}

Ahora todo es mucho más sencillo y estandar ya que con CSS3 podemos aplicar transparencias sólo a los fondos o background de la capa actual sin tocar ni el texto ni sus capas subyacentes.

.transparencia_background {
    background-color: rgba(153,153,153, 0.5);  
}

O establecer una transparencia al texto sin tocar el color de background.

.transparencia_texto {
    color: rgba(153,153,153, 0.5);  
}

Esto tiene una ventaja añadida y es que además ayuda o mejora el Cross Browsing

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.