JMiur [E]

Text Fade Out es una idea de CSS-Tricks que utiliza jQuery para crear un efecto de esfumado en textos, cortándolos a cierta altura y agregando un botón para expandirlos.

Obviamente, se requiere tener agregada la librería jQuery antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
Y luego, el script con el efecto que es muy corto:
<script type='text/javascript'>
//<![CDATA[
$(function() {
  var $el, $ps, $up, totalHeight;
  $(".textfadeout-demo .textfadeout-button").click(function() {
    totalHeight = 0
    $el = $(this);
    $p  = $el.parent();
    $up = $p.parent();
    $ps = $up.find("p:not('.textfadeout-more')");
    $ps.each(function() { totalHeight += $(this).outerHeight(); });
    $up.css({ "height": $up.height(), "max-height": 9999 })
    .animate({ "height": totalHeight });
    $p.fadeOut();
    return false;
  });
});
//]]>
</script>
Por último, el CSS que hace referencia a las clases definidas que pueden tener diferentes estilos y que con muy pocos agregados, deberían funcionar en cualquier navegador, incluyendo Internet Explorer:
<style>
.textfadeout-demo { /* es el rectángulo contenedor */
  background-color: #505961;
  color: #EEE;
  max-height: 150px; /* esto define la altura */
  overflow: hidden; /* y le decimos que "se corte" allí, ocultando el reesto */
  padding: 20px;
  position: relative;
  width: 300px;
}
.textfadeout-demo .textfadeout-more { /* el esfumado inferior */
  background-image: -moz-linear-gradient(top, transparent, #101921);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #101921));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#00101921', EndColorStr='#FF101921')
  bottom: 0;
  left: 0;
  padding: 30px 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
.textfadeout-button { /* el botón para expandir */
  border-top: 1px solid #96D1F8;
  background: #65A9D7;
  background: -moz-linear-gradient(top, #3E779D, #65A9D7);
  background: -webkit-gradient(linear, left top, left bottom, from(#3E779D), to(#65A9D7));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF3E779D'; EndColorStr='#FF65A9D7');
  padding: 5px 10px;
  text-decoration: none;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0, rgba(0,0,0,90) 0 0 10px, rgba(0,0,0,90) 0 0 20px, rgba(0,0,0,90) 0 0 30px;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.textfadeout-button:hover {
  border-top-color: #28597A;
  background: #28597A;
  color: #CCC;
}
.textfadeout-button:active {
  border-top-color: #1B435E;
  background: #1B435E;
}
</style>
Ya está; ahora podremos utilizar las tres clases definidas para crear el HTML:
<div class="textfadeout-demo">
<p> ....... el texto a mostrar ....... </p>
<p class="textfadeout-more"><a href="#" class="textfadeout-button">leer más</a></p>
</div>

7 comentarios:

Gem@  

Muy elegante el efecto, estaría bien que hubiera forma de "recoger" una vez expandido.

Responder
La hormiguita  

Que bonito!!!!
Gracias

Responder
Adrián J. Messina  

Si coincido, un efecto muy vistoso.
Perdón por mi ignorancia de siempre, ¿pero esto se puede aplicar en el famoso "leer más" de Blogger?
Es decir que viene para utilizar por defecto que sería <-- more --> .

Responder
Graciela  

Si una pudiera Jmiur, ahhh el tiempo no me acompaña :P
Un encanto!

Responder
JMiur  

Sí, es verdad, Gem@; faltaría eso pero, n otengo idea de cómo hacerlo :-$

Adrián: No sé :D Habría que pensarlo mucho.

Responder
Yeli  

De seguro encontraras la manera de hacerlo, con todo lo que sabes y lo inteligente que eres :$

Responder
Adrián J. Messina  

No lo presionemos a Don Jmiur, la paciencia es hija de la sabiduría ;)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR