Share
Durante este rápido tutorial nos familiarizaremos con los conceptos de opacidad y transparencia en los elementos HTML. Jugaremos con un conjunto de efectos que, antes de CSS3, solo se podrían lograr utilizando varias imágenes creadas en Photoshop..
Nota: Todos los ejemplos siguientes se probaron en Mozilla Firefox, Safari y Chrome. Si quieres obtener algo similar en IE o en cualquier otro navegador, deja un comentario y estaré encantado de ayudarte..
En este tutorial usaremos Fondos degradados, Sombras de cuadro y Fondos de imágenes múltiples, temas que se tratan en los dos primeros tutoriales de esta serie:
Si alguna vez ha usado Photoshop o un paquete de gráficos similares, estará familiarizado con el valor de opacidad. Esta magia funciona aumentando o disminuyendo la transparencia de cualquier elemento gráfico en un valor de porcentaje, desde 0% (completamente invisible) hasta 100% (totalmente visible). Este porcentaje es el valor "Alfa", explicaré cómo funciona más adelante en el tutorial..
CSS3 incluye la propiedad "opacidad", lista para implementarse en todos los navegadores modernos, pero ¿cómo funciona? Imagina que tienes tres elementos de Photoshop dentro de una carpeta, como se muestra en la siguiente captura de pantalla: una imagen, una línea de texto y un cuadrado sólido sobre el fondo de una imagen. La imagen, el texto y el cuadrado amarillo están dentro de una carpeta llamada "Sección". Al reducir el porcentaje de opacidad de esa carpeta, todas las capas dentro de ella aparecerán más transparentes.
En CSS3 las cosas funcionan de la misma manera. La Carpeta se ha convertido en un elemento contenedor HTML (un div, un párrafo, una sección, etc.) Por lo tanto, la modificación de la propiedad de "opacidad" de ese elemento aumentará o disminuirá (al igual que en Photoshop) la visibilidad de todos los elementos que contiene. Tomemos, por ejemplo, este marcado HTML:
Este es un elemento 100% opaco, todo lo que está dentro de esta etiqueta es completamente visible
Ahora, veamos el CSS para el marcado anterior..
/ * Fondo de imagen de página completa * / body.image background-image: url (images / bg.jpg); posición de fondo: centro superior; adjunto de fondo: fijo; repetición de fondo: no repetición; / * Prueba de opacidad * / .opaque opacidad: 1; .translucent60 opacidad: 0.6;
Como ve, cambiar la opacidad es realmente fácil, pero ¿cuándo lo usaría? Una técnica muy efectiva es aumentar la opacidad en el :flotar pseudoclase
.translucent_on_hover opacidad: 0.4; .translucent_on_hover: hover opacity: 0.9;
Pero si quieres un De Verdad Efecto impresionante, puedes lanzar en algunas transiciones.?
Un efecto de transición interpola los estados intermedios entre dos etapas o instancias de cualquier estilo de elemento HTML.
Para mantener las cosas simples por ahora, veamos el código básico de un efecto de transición (en un lapso de tiempo de 1 segundo).
-webkit-transición: todos los 1s de fácil acceso;
-transición-moz: todos los 1s de facilidad de entrada;
-o-transición: todas las 1s de facilidad de entrada;
-ms-transición: todos los 1s de facilidad de entrada;
transición: todas las 1s de fácil salida;
Insinuación: Para garantizar que no está perdiendo ninguno de los varios prefijos del navegador, consulte la herramienta Prefxr recientemente lanzada por Jeffrey Way. Se mece.
Solo necesita adjuntar esta regla CSS al elemento que desea animar con un efecto de transición, como este:
.translucent_transition opacidad: 0.4; -webkit-transición: todas las 1s de facilidad de entrada; -moz-transición: todas las 1s de facilidad de entrada; -o-transición: todos los 1s de facilidad de entrada; -ms-transición: todas las salidas son fáciles de usar; transición: todas las 1s de fácil salida; .translucent_transition: hover opacity: 0.9;
El estilo de "facilidad de entrada" significa que la transición de opacidad ocurrirá al pasar el mouse (aumentando la opacidad) y se revertirá (disminuirá la opacidad) al valor original cuando el cursor se mueva fuera del elemento..
Cada píxel de color se puede crear combinando tres conjuntos de valores: rojo, verde y azul, cada uno de 0 a 255.
Usualmente usamos valores hexadecimales para los colores en sus hojas de estilo, por ejemplo, los colores básicos:
Puede obtener los mismos colores utilizando los valores RGB en CSS, de la siguiente manera: rgb.
Una forma fácil de obtener los valores RGB de cualquier color es usar el Selector de color de Photoshop, como se muestra en la siguiente imagen.
Al aplicar la propiedad "opacidad" en CSS, afecta a todo el contenedor y todo el contenido que contiene. Esto es útil a veces, pero es posible que solo desee tener el fondo transparente y dejar el texto y la imagen 100% opacos. Aquí viene el valor "alfa" de nuevo.
CSS3 nos permite utilizar un formato de color RGB que incluye un cuarto valor denominado Alpha. Este no es un concepto nuevo, las imágenes PNG usan el canal alfa para establecer la transparencia de los píxeles en una imagen en un valor de 0 a 1 (0% a 100%). Esto crea un efecto de transparencia mejor que el que administran las imágenes GIF, ya que solo establecen un valor visible / invisible a los píxeles.
Tomemos por ejemplo el siguiente gráfico:
Observe que solo estoy cambiando la opacidad en la capa de fondo amarillo.
Para este tipo de efectos existe la "RGBA"Valor de color (rojo, verde, azul, alfa):
rgba
.opaco color de fondo: rgba (255, 150, 0, 1); / * Alfa = 1 significa 100% opaco * /
Y si desea reducir la opacidad del fondo para hacerlo translúcido, es tan fácil como cambiar el último valor en los parámetros de color rgba.
.translúcido color de fondo: rgba (255, 150, 0, .6); / * Alfa = .6 significa 60% opaco * /
Como el color rgba se comporta como un color hexadecimal clásico, puede usarlo en un fondo con degradado lineal.
.translucent_gradient background-image: -moz-linear-gradient (top, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); imagen de fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (rgba (255, 150, 0, .9)), hasta (rgba (255, 150, 0, .1)) , parada de color (1, rgba (255, 150, 0, .1)));
Y, por supuesto, puede combinarlo con el estilo de opacidad para crear agradables efectos de transición..
.translucent_transition opacidad: 0.4; -webkit-transición: todas las 1s de facilidad de entrada; -moz-transición: todas las 1s de facilidad de entrada; -o-transición: todos los 1s de facilidad de entrada; -ms-transición: todas las salidas son fáciles de usar; transición: todas las 1s de fácil salida; imagen de fondo: -moz-lineal-gradiente (arriba, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); imagen de fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (rgba (255, 150, 0, .9)), hasta (rgba (255, 150, 0, .1)) , parada de color (1, rgba (255, 150, 0, .1))); .translucent_transition: hover opacity: 1;
Ahora, intentemos algo más complejo. Combinaremos múltiples fondos de imagen con transparencia, un efecto de opacidad de desplazamiento, y esquinas redondeadas y sombras de cuadros para crear una sensación de profundidad..
Comencemos con photoshop, en el tutorial de recursos encontrará la PSD del siguiente gráfico:
Intentaremos obtener un resultado exacto utilizando solo estilos CSS3. Habrá un par de imágenes de muestra para la miniatura en las secciones, y un fondo de patrón (le invitamos a crear su propia imagen). Esta vez usé bgpatterns.com para crear una imagen repetida.
Vamos a empezar con el formato HTML, nada demasiado complicado:
Transparencia y opacidad
Algun texto aqui
Transparencia y opacidad
Algun texto aqui
Ahora la parte divertida, el CSS. Primero restablezca los estilos predeterminados, configure la tipografía del cuerpo y establezca los estilos para la sección de envoltura:
/ * Restablecer * / html, cuerpo, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, forma, fieldset, tabla, th, td , img margen: 0; relleno: 0; frontera: 0px; encabezado, sección, pie de página, aparte, navegación, artículo, figura pantalla: bloque; / * End of Reset * / body font-family: Arial, Helvetica, sans-serif; color: # 333; html altura: 100%; / * Para agregar un gradiente de CSS3 de cuerpo de página completo, debe establecer esta altura en 100% * / .wrapper margen: 0px auto; ancho: 960px; relleno: 60px 0px 60px 0px; .left text-align: left;
A continuación, establezca el fondo del cuerpo, básicamente una imagen que se repite (puede usar la imagen que desee)
/ * Fondo de la imagen del cuerpo * / cuerpo altura: 100%; fondo: url (images / bg.png); / * Fondo de imagen * /
Ahora, estableceremos los estilos de otra división de envoltura llamada "página", esta división tendrá básicamente el mismo ancho y alto que la ventana del navegador, y lo que es más importante, agregaremos un fondo de degradado lineal utilizando colores RGBA.
/ * Degradado transparente * / .page ancho: 100%; altura: 100%; Fondo: -moz-lineal-gradiente (arriba, rgba (15,20,5,0.75) 0%, rgba (15,20,5,0) 50%, rgba (15,20,5,0.75) 100%) ; / * Gradiente transparente * / fondo: -webkit-gradiente (lineal, arriba a la izquierda, abajo a la izquierda, desde (rgba (15,20,5,0.75)), parada de color (0,5, rgba (15,20,5,0) )), a (rgba (15,20,5,0.75))); / * Pendiente transparente * /
Ahora, establezca el estilo de la sección del contenedor, una caja de esquina redondeada con un fondo translúcido.
/ * Fondo transparente RGBA * / .container ancho: 770px; relleno: 15px; altura: 460px; margen: 0px auto; / * Fondo translúcido * / fondo: rgba (89, 113, 29, 0.5); / * Radio del borde * / borde: 1px sólido # 71941D; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; radio del borde: 20px; / * Deshazte de Bleed * / -moz-background-clip: relleno; -webkit-background-clip: padding-box; clip de fondo: caja de relleno; / * 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);
Está empezando a tomar forma. Ahora establece los estilos de los cuadros de contenido. Establezca la posición, un efecto de esquina redondeada, un fondo translúcido degradado y lo combinaremos con un efecto de desplazamiento, aumentando la opacidad del mouse (para habilitar los efectos de transición).
.cuadro / * Posición * / relleno: 10px; margen inferior: 20px; min-height: 200px; / * Fondo de degradado translúcido * / fondo: -degroluz lineal-lineal (arriba, rgba (26,35,8,0), rgba (26,35,8,0.85)); / * Gradiente transparente * / fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, desde (rgba (26,35,8,0.15)), hasta (rgba (26,35,8,0.85))); / * Degradado transparente * / / * Esquinas redondeadas * / -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; radio del borde: 5px; / * Corregir el sangrado * / -moz-background-clip: relleno; -webkit-background-clip: padding-box; clip de fondo: caja de relleno; / * Ocúltelo un poco hasta que el mouse pase sobre * / opacidad: 0.4; / * Habilitar los efectos de transición * / -webkit-transition: todos los 1s de facilidad de entrada; -moz-transición: todas las 1s de facilidad de entrada; -o-transición: todos los 1s de facilidad de entrada; -ms-transición: todas las salidas son fáciles de usar; transición: todas las 1s de fácil salida; .box: hover opacidad: 1;
Ahora agreguemos los toques finales, para los elementos HTML dentro de las cajas. Puede intentar agregar más efectos a los elementos en modo estático y al pasar el mouse, esta vez haré una sombra de cuadro visible en la etiqueta "img" cuando el mouse esté sobre la sección "cuadro":
.box img float: left; margen derecho: 20px; borde: 1px sólido # 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: negrita; color: # 8eb548; transformación de texto: mayúsculas; parte inferior de relleno: 20px; .box p color: # c0cf9d; tamaño de fuente: 11px; línea de altura: 150%;
Y eso es todo, veamos cómo se ve en un navegador:
No hay límite a lo que se puede hacer utilizando transparencias y efectos de opacidad combinados con otros estilos CSS3. Pruebalo ahora!
Accentsconagua
Este es un elemento 100% opaco, todo lo que está dentro de esta etiqueta es completamente visible 
