CSS3 versus Photoshop: Opacidad y Transparencia

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Durante este tutorial rápiod, nos agarraremos de los conceptos de Opacidad y Transparencia en los elementos HTML. Jugaremos con un conjunto de efectos que, antes de CSS3, solamente se podrían haber logrado usando varias imágenes creadas en Photoshop.

Nota: Todas las imágenes siguientes fueron probadas en Mozilla Firefox, Safari y Chrome. Así que si usted quiere conseguir algo similar en Internet Explorer o en cualquier otro navegador, entonces deje un comentario y estaré contento en ayudarle.

Antes de que comencemos.

En este tutorial usaremos: Gradient Background (Degradado de Fondo), Box Shadows (Sombra de Cajas) y Multiple Images Backgrounds (Múltiples Imágenes de Fondos), aunque todos estos temas se abordaron en los primeros dos tutoriales de esta serie:

Paso 1: Opacidad

Si alguna vez utilizó Photoshop o un paquete de gráficos parecido, entonces estará familiarizado con Opacity Value. Mágicamente funciona incrementando o disminuyendo la transparencia de cualquier elemento gráficos en un valor de porcentajes, desde 0% (Completamente invisible) hasta 100% (Totalmente visible). Este porcentaje es un valor "Alpha", explicaré cómo funciona esto en el tutorial.

CSS3 incluye la propiedad opacidad; "opacity", y está lista para implementarse en todos los navegadores modernos, pero ¿cómo funciona? Imagine que usted tiene tres elementos Photoshop dentro de una carpeta, tal y como se muestra en la captura de pantalla abajo: una imagen, una linea de texto y un cuadro sólido sobre una imagen de fondo. La imagen, el texto y el cuadro amarillo están dentro de la carpeta llamada "Section". Al reducir el porcentaje de "Opacity" de esa carpeta, todas las capas dentro de ella aparecerán más transparentes.

En CSS3, las cosas funcionan prácticamente igual. La carpeta se ha convertido en un elemento HTML contenedor (es decir, un div, un párrafo, una sección, etc.). Por lo tanto, cuando alteramos la propiedad "opacity" de ese elemento (tal y como se hace en Photoshop) incrementaremos o disminuiremos la visibilidad de todos los elementos que están dentro. Tome, por ejemplo, este marcado HTML:


   <section class="box opaque">
    <img src="images/thumb.jpg" width="180" height="180" alt="Thumb">
    This is a 100% Opaque element, everything inside this tag is fully visible
    </section>
    
<section class="box translucent60">
    <img src="images/thumb.jpg" width="180" height="180" alt="Thumb">
    This is a 60% Opaque element, you notice that this text is hard to read because Opacity affects the entire element and all the content inside it. </section>

Ahora, vamos a ver el código CSS para el marcado anterior.


/*Full page image background */
body.image{
	background-image:url(images/bg.jpg);
	background-position:top center;
	background-attachment:fixed;
	background-repeat:no-repeat;
}

/*Opacity Test*/
.opaque{
	opacity: 1;
}

.translucent60{
	opacity: 0.6;
}

Como puede ver, cambiar la opacidad es bastante fácil, pero ¿cuándo lo usaría? Bueno, una técnica muy efectiva es incrementar la opacidad en la pseudoclase :hover, como se muestra a continuación:


.translucent_on_hover{
	opacity: 0.4;
}

	.translucent_on_hover:hover{
		opacity: 0.9;
	}

Sin embargo, si quiere un efecto realmente impresionante, usted puede añadir algunas transiciones...

Efecto Transiciones

Un efecto de transición interpola los estados intermedios entre dos etapas o instancias de cualquier estilo de un elemento HTML.

Por ahora, para conservar las cosas sencillas, vamos a ver el código base de un efecto de transición (en un lapso de tiempo de 1 segundo).

-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;

Sugerencia: Para garantizar que no está perdiendo ninguno de los prefijos de varios navegadores, revise el siguiente tutorial: Jeffrey Way, recientemente publicó la herramienta Prefxr. ¡Es fenomenal!

Usted solamente necesita adjuntar esta regla CSS para los elementos que usted quiere animar con un efecto de transición como éste:


  .translucent_transition{
  opacity: 0.4;
  
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  }
  
  .translucent_transition:hover{
  opacity: 0.9;
  }

El estilo "ease-in-out" significa que la transición de la opacidad ocurrirá cuando se active el evento on hover (incrementando la opacidad) y revirtiéndo (es decir, disminuyendo la opacidad) al valor original cuando el cursor del mouse se desplaza hacia afuera del elemento.

Visualizar el Demo

Paso 2: Transparencia

Cada pixel de color se puede crear al combinar tres conjuntos de valores: Rojo, Verde y Azul, cada uno desde 0 hasta 255.

Por lo general, usamos valores Hexadecimales para los colores en sus hojas de estilo, por ejemplo, los colores básicos:

Rojo: #FF0000
Azul: #0000FF
Verde: #00FF00
Negro: #000000
Blanco: #FFFFFF

Usted puede conseguir los mismos colores usando los valores RGB en CSS de la siguiente manera: rgb(<red>, <green>, <blue>).

Rojo: rgb(255, 0, 0)
Azul: rgb(0, 0, 255)
Verde: rgb(0, 255, 0)
Negro: rgb(0, 0, 0)
Blanco: rgb(255, 255, 255)

Una forma fácil de conseguir los valores RGB de cualquier color es usando el Selector de Color de Photoshop, tal y como se muestra en la siguiente imagen:

Y, ¿dónde está la Transparencia?

Cuando aplicamos la propiedad "opacity" en CSS, ésta afecta el a todo el contenedor y a todo lo que está dentro de él. Algunas veces esto es útil, pero tal vez usted solamente quiere tener el fondo transparente y dejar el texto y la imagen 100% opaca. Aquí aparece de nuevo el valor "Alpha".

CSS3 nos permite usar un formato de color RGB incluyendo un cuarto valor llamado Alpha. Esto no es un concepto nuevo, las imágenes PNG usan el canal alfa para ajustar la transparencia de los pixeles en una imagen en un valor desde 0 hasta 1 (0% hasta 100%). Esto crea un mejor efecto de transparencia que el de las imágenes GIF, ya que ellas solamente pueden ajustar el valor para los pixeles a visible/no visible.

Tome como ejemplo el siguiente gráfico:

Observe que solamente estoy cambiando la opacidad en la capa de fondo de color amarillo.

Para este tipo de efectos hay el valor de color "RGBA" (Red, Green, Blue, Alpha).

rgba(<red>, <green>, <blue>, <alpha>) donde alpha es el número entre 0 y 1 que establece la opacidad del color. Si usted quiere usar el color rgba para un fondo completamente visible, usted puede hacerlo así:

1	.opaque{
2	background-color:rgba(255, 150, 0, 1); /Alpha = 1 means 100% opaque/
3	}

Y si usted quiere reducir la opacidad del fondo para hacerlo traslúcido, es tan fácil como cambiar el último valor en los parámetros de color rgba.

1
2	.translucent{
3	background-color:rgba(255, 150, 0, .6); /Alpha = .6 means 60% opaque/
4	}

Como el color rgba se comporta como un clásico color hexadecimal, usted puede usarlo en un Fondo de Degradado Lineal.


.translucent_gradient{	
	background-image:-moz-linear-gradient(top, rgba(255, 150, 0, .9), rgba(255, 150, 0, .1));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 150, 0, .9)), to(rgba(255, 150, 0, .1)), color-stop(1,rgba(255, 150, 0, .1)));
}

Por supuesto, usted puede combinarlo con el estilo de la opacidad para crear magníficos efectos de transición.


.translucent_transition{
	opacity: 0.4;
	
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	
	background-image:-moz-linear-gradient(top, rgba(255, 150, 0, .9), rgba(255, 150, 0, .1));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 150, 0, .9)), to(rgba(255, 150, 0, .1)), color-stop(1,rgba(255, 150, 0, .1)));
}

	.translucent_transition:hover{
		opacity: 1;
	}

Visualizar el Demo

Paso 3: Combine Varios Estilos para Crear Efectos Impresionantes

Ahora, vamos a probar algo más complejo. Combinaremos varias imágenes de fondo usando la transparencia, un efecto de opacidad en el evento hover, y las esquinas redondas y la sombra de caja para crear algo de profundidad.

Vamos a comenzar con Photoshop, en los recursos del tutorial usted encontrará el archivo PSD del siguiente gráfico:

Vamos a tratar de conseguir un resultado exacto usando solamente estilos CSS3. Habrá un par de imágenes de muestra para las miniaturas en las secciones, y un patrón de fondo (usted puede crear el suyo). Esta vez yo utilice bgpatterns.com para crear una imagen repetida.

Vamos a empezar con el marcado HTML, nada que sea muy complicado:



<div class="page">
	<div class="wrapper">
        <section class="container">
            <section class="box">
            	<img src="images/pic1.jpg" />
                <hr /><h2><span>Transparency and Opacity</h2>
                <p>Some text here</p>
            </section>
            
            <section class="box">
            	<img src="images/pic2.jpg" />
                <hr /><h2><span>Transparency and Opacity</h2>
                <p>Some text here</p>
            </section>
        </section>
    </div>
</div>

Ahora la parte divertida, el CSS. Primero, vamos a reiniciar los estilos predeterminados, ajusta la tipografía del body y ajustar los estilos para envolver la sección:


/* Reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, img{
    margin: 0;
    padding: 0;
	border:0px;
}

header, section, footer, aside, nav, article, figure {
    display: block;
}
/* End of Reset */

body{
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
}

html{
	height:100%; /* To add a full page body CSS3 gradient you need to set this height to 100% */
}

.wrapper{ margin:0px auto; width:960px; padding:60px 0px 60px 0px;}

.left{ text-align:left;}

Luego, ajustamos el fondo del elemento body, básicamente, una imagen repetida (usted puede usar cualquier imagen que usted queira).

/* Body image background */
body{
	height:100%;
	background: url(images/bg.png); /*Image Background*/
}

Ahora, ajustaremos los estilos de otro div contenedor llamado "page", este div tendrá la misma anchura y altura que la ventana del navegador y, más importante aún, añadiremos un fondo de degrado lineal usando los colores RGBA.


/* Transparent Gradient */
.page{
	width:100%;
	height:100%;
	background: -moz-linear-gradient(top, rgba(15,20,5,0.75) 0%, rgba(15,20,5,0) 50%, rgba(15,20,5,0.75) 100%); /*Transparent Gradient*/
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(15,20,5,0.75)), color-stop(0.5, rgba(15,20,5,0)), to(rgba(15,20,5,0.75)));/*Transparent Gradient*/
}

Ahora, ajustemos el estilo del contenedor de la sección, un cuadro con esquinas redondeadas y un fondo traslúcido.


/* RGBA transparent background */
.container{
	width:770px;
	padding:15px;
	height:460px;
	margin:0px auto;	
	
	/*Translucent Background*/
	background:rgba(89, 113, 29, 0.5);
	
	/*Border Radius*/
	border:1px solid #71941D;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	border-radius: 20px;
	
	/*Get rid of Bleed*/
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
	
	/*Box Shadow*/
	box-shadow: 0px 0px 25px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 25px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 0px 25px rgba(0,0,0,0.75);
}

Esto está empezando a tomar forma. Ahora ajustemos los estilos de los cuadros de contenidos. Ajuste la posición, un efecto de esquina redondeada, un degradado traslúcido para el fondo y los combinaremos con un efecto hover incrementando la opacidad de cuando el cursor del mouse esté sobre el elemento (para esto active los efectos de transición).


.box{
	/*Position*/
	padding:10px;
	margin-bottom:20px;
	min-height:200px;
	
	/*Translucent Gradient Background*/
	background: -moz-linear-gradient(top, rgba(26,35,8,0), rgba(26,35,8,0.85)); /*Transparent Gradient*/
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(26,35,8,0.15)), to(rgba(26,35,8,0.85)));/*Transparent Gradient*/
	
	/*Rounded Corners*/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;	
	border-radius: 5px;
	
	/*Fix the bleed*/
	-moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
	
	/*Hide it a little bit until mouse over*/
	opacity: 0.4;
	
	/*Enable Transition effects*/
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
	.box:hover{
		opacity:1;
	}

Ahora vamos añadir los toques finales, para los elementos HTML dentro de los cuadros, Usted puede probar añadir más efectos a los elementos en modo estático y cuando ocurra el evento hover, esta vez yo haré una sombra de un cuadro visible en la etiqueta "img" cuando el mouse pase por encima de la sección "box":


.box img{
	float:left;
	margin-right:20px;
	
	border:1px solid #71941D;
}

	.box:hover img{
		box-shadow: 5px 5px 5px rgba(0,0,0,0.50);
		-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.30);
		-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.30);
	}

.box h3{
	font-size:14px;
	font-weight:bold;
	color:#8eb548;
	text-transform:uppercase;
	padding-bottom:20px;
}

.box p{
	color:#c0cf9d;
	font-size:11px;
	line-height:150%;
}

Y eso es todo, vamos a ver como se ve en un navegador:

Visualizar Demo

Conclusión

No existen limites para lo que se puede hacer usando los efectos de transparencia y opacidad en combinación con los demás estilos CSS3. ¡Pruébelo ahora!