Texto con Fade Out / Leer más

Por Chris Coyier
En 12/7/2010
El Lector  Rob Young envió un efecto padre, visto en Newsweek.com:

fade out

Captura de pantalla aquí

El texto se desvanece en la parte inferior y tiene un enlace “más …”. El texto con un fade out no es nada nuevo por aquí. Por ahí he tenido una demo, que utiliza un archivo PNG transparente colocado sobre el texto. Pero como esto es una idea un poco diferente y los tiempos-van-cambiando y además podemos ser un poco más progresistas con esta idea.
Supongamos que estas pequeñas cajas de texto se utilizan en una barra lateral, por lo que nuestro código HTML será un div con la clase sidebar-box. Este div puede contener cualquier número de elementos de párrafo, el último de los cuales tendrá una clase con nombre read-more que contiene un botón de enlace.

<div>
<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><a href=”#” class=”button”>Leer mas</a></p>
</div>

La caja estará limitada en la altura por la propiedad de max-height con el overflow puesto en hidden. También utilizaremos la posición relativa que tendremos que utilizar para que el párrafo de leer mas esté con la propiedad de posición absoluta, que está bloqueado en la parte inferior de la caja y usa gradientes de 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: -moz-linear-gradient(top, transparent, black);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, black));
}

Lo que nos da:

Fede out

La “Revelación” con jQuery

La forma más sencilla de hacer este trabajo sería la de eliminar el máximo de altura (max-height) del CSS en el cuadro de la barra lateral con un clic. Lo que hace que de inmediato se expandan hacia abajo a la altura natural de todos los párrafos. Teóricamente se podría hacer esto con CSS3 y :target, pero eso es temporal y podría causar en la página saltos hacia bajo. Podemos hacerlo más elegante utilizando JavaScript y animaciones fáciles con 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’)”);

// La medida de la altura interior debe ser igual a la suma de alturas de todos los párrafos en el interior (con excepción del  párrafo “leer mas”)
$ps.each(function() {
totalHeight += $(this).outerHeight();
});

$up
.css({
// Coloca la altura para evitar saltos hacia abajo en el instante en que se quita la altura máxima

“height”: $up.height(),
“max-height”: 9999
})
.animate({
“height”: totalHeight
});

// fade out read-more
$p.fadeOut();

// prevent jump-down
return false;

});

Así, en español simple, cuando se hace clic en un botón en el interior de la barra lateral de la caja, busca todos los actores relacionados (los elementos padre y cosas semejantes), mide una nueva altura ideal, anima la nueva altura, y eliminar el botón.

Ver demo Descargar archivos

Nota rápida sobre los gradientes y transparencias

Estuve rascándome  un poco la cabeza, para tratar de entender un problema raro en el uso de gradientes CSS3 y la decoloración de “transparencias” a un color hexadecimal regular. Parecía que el color se multiplica en el fondo. ¿Lo qué pasa realmente es que la palabra “transparet” es en realidad asignado a “rgba (0,0,0,0)”, que significa “negro totalmente transparente.” Así que cuando el gradiente se construye, los colores intermedios se mezclan con el negro no totalmente transparente. Para solucionar este problema, tendrás que usar colores RGBA, tanto en el inicio y fundido a color, aunque sea totalmente transparente. Por ejemplo, para el rojo a desaparecer 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)));

Gracias a @foodgoesinmouth, @sebnitu, @maddesigns y otros…

Fuente: http://css-tricks.com/text-fade-read-more/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s