Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

CSS3 versus Photoshop: Opacidad y Transparencia

by
Length:MediumLanguages:
This post is part of a series called CSS3 vs. Photoshop.
CSS3 vs. Photoshop: Rounded Corners and Box Shadows
CSS3 vs Photoshop: Transforms

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:

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

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:

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:

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í:

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.

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

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

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:

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:

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

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.

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

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).

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":

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.