El lector Rob Young envió un efecto genial visto en Newsweek.com:
Captura de pantalla de aquí
El texto se desvanece en la parte inferior y tiene un enlace “Más …”. El desvanecimiento del texto no es nada nuevo por aquí. He tenido una demostración para eso durante años, que usa un archivo PNG transparente colocado sobre el texto. Pero dado que esta es una idea ligeramente diferente y los tiempos están cambiando, podemos ser un poco más progresistas con esta idea.
Supongamos que estos pequeños cuadros de texto se utilizan en una barra lateral, por lo que nuestro marcado HTML será un div con la clase de sidebar-box. Este div puede contener cualquier número de elementos de párrafo, el último de los cuales tendrá un nombre de clase de read-more que contiene un botón de enlace.
<div class="sidebar-box">
<p>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="read-more"><a href="https://css-tricks.com/text-fade-read-more/#" class="button">Read More</a></p>
</div>La caja estará limitada en altura por la propiedad apropiada. max-height con su overflow establecido en oculto. También usaremos el posicionamiento relativo, ya que lo necesitaremos para usar el posicionamiento absoluto en el párrafo de lectura más, que está bloqueado en la parte inferior del cuadro y usa degradados CSS3 para lograr que el texto se desvanezca.
.sidebar-box {
max-height: 120px;
position: relative;
overflow: hidden;
}
.sidebar-box .read-more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0; padding: 30px 0;
/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to bottom, transparent, black);
}Lo que nos da:
El “Reveal” con jQuery
La forma más sencilla de hacer que esto funcione sería eliminar el CSS de altura máxima del cuadro de la barra lateral con un clic. Eso le permitiría expandirse instantáneamente hasta la altura natural de todos los párrafos contenidos. Teóricamente, podría hacer esto con CSS3 y: target, pero eso es temporal y provocaría saltos de página. Podemos hacerlo más elegante usando JavaScript y las sencillas animaciones de jQuery.
var $el, $ps, $up, totalHeight;
$(".sidebar-box .button").click(function() {
totalHeight = 0
$el = $(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find("p:not('.read-more')");
// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += $(this).outerHeight();
});
$up
.css({
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height(),
"max-height": 9999
})
.animate({
"height": totalHeight
});
// fade out read-more
$p.fadeOut();
// prevent jump-down
return false;
});Entonces, en inglés simple, cuando se hace clic en un botón dentro de un cuadro de la barra lateral, busque todos los jugadores relacionados involucrados (elementos principales y demás), mida una nueva altura ideal, anime a esa nueva altura y elimine el botón.
Ver demostración Descargar archivos
Nota rápida sobre transparencia y degradados
Tuve algunos problemas tratando de resolver un problema extraño usando gradientes CSS3 y desvaneciéndose de “transparente” a un color hexadecimal normal. Parecía que el color se multiplicaba en el fondo. Lo que realmente está sucediendo es que la palabra “transparente” en realidad se asigna a “rgba (0, 0, 0, 0)”, que significa “negro completamente transparente”. Entonces, cuando se construye el degradado, los colores intermedios se mezclan con un negro no del todo transparente. Para solucionar este problema, deberá usar colores RGBa tanto en el inicio como en el desvanecimiento del color, incluso si es completamente transparente. Por ejemplo, para que el rojo se desvanezca de rojo a transparente:
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255, 0, 0, 0)),
color-stop(1, rgba(255, 0, 0, 100)));Y no olvide todas las demás sintaxis de degradados. CSS3 ¡Por favor! es un gran recurso para obtener sintaxis CSS3 rápidamente actualizadas.
Gracias a @comida_comida, @sebnitu, @maddesigns y otros…