[SOLUCIONADO] Texto desvanecido en articulo

Berewarew · #1 (**permalink**) 24/07/2014, 02:01

Hola buenas,

Que mejor manera de explicar mi duda con un ejemplo:

http://bitelia.com/?utm_source=self&utm_medium=nav&utm_campaign=Nav%2 BBlogs%2BFooter

Si le das al scroll un poco veis los articulos y el efecto del texto desvanecido, como lo consigue ?

Ese efecto es automatico, es decir, que coge parte del texto que quepa en el <div> del articulo original o lo tiene que calcular el webmaster ?

salu2 y thx.

pzin · #2 (**permalink**) 24/07/2014, 02:06

Es simplemente un degradado que se pone encima del texto mediante un pseudo-elemento. El código lo puedes inspeccionando el elemento:

Código CSS:

Ver original.columna .post:after, #excesivo .post:after {
  content: "";
  display: block;
  position: absolute; 
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-size: 100%;
  background: linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);
}

Aparte de eso, lo único que necesita el elemento contenedor, en este caso .post, es una posición relativa.

Berewarew · #3 (**permalink**) 24/07/2014, 08:54

Gracias por la respuesta tan rápida pero eso fue lo primero que intente inspecione el elemento y copie el css y las etiquetas html5 esto es lo que saque:

Código HTML:

<!DOCTYPE html>
<html>
  <head>
    <style rel="stylesheet" type="text/css">
        .columna .post:after, #excesivo .post:after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 30%;
          background-size: 100%;
          background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#FFFFFF));
          background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);
          background: -moz-linear-gradient(top,rgba(231,231,226,0) 0,#FFFFFF 100%);
          background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);
          /* background: linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%); */
        }
        .post{
          position: relative;
        }
        .box{
          width: 380px;
        }
    </style>
  </head>
  <body>
    <div class="box post">
	<h1>Duolingo lanza Test Center, un examen para certificarte en inglés</h1>
	<p>
        La popular aplicación para aprender idiomas ha lanzado una nueva herramienta que te permite obtener certificación en inglés realizando un examen de 20 minutos desde la comodidad de tu hogar. Test Center de Duolingo, nace como alternativa a las pruebas tradicionales de certificación estandarizadas que pueden tomar las personas en diferentes instituciones y que suelen tener un costo mucho más elevado. El examen de Test Center puede ser tomado ya mismo desde la web o desde Android, y tiene un costo de 20 dólares. Por estar aún en fase beta, y para promocionar su lanzamiento puedes tomarlo de manera gratuita por...
      </p>
    </div>

  </body>
</html>

Pero debe de haber un error y no se que puede ser.

salu2 y thx de nuevo!

pzin · #4 (**permalink**) 24/07/2014, 11:48

Es que si copias el CSS tal cual, tienes que ajustar el HTML también. Ahí .post no está dentro de ningún .columna ni #excesivo.

Berewarew · #5 (**permalink**) 25/07/2014, 02:13

Bueno gracias pzin, pongo el codigo para los que vengan detras:

Código HTML:

<!DOCTYPE html>
<html>
  <head>
    <style rel="stylesheet" type="text/css">
        .container .post:after, #excesivo .post:after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 50%;
          background-size: 100%;
          background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#FFFFFF));
          background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);
          background: -moz-linear-gradient(top,rgba(231,231,226,0) 0,#FFFFFF 100%);
          background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);
          background: linear-gradient(top,rgba(255,255,255,0) 0,#FFFFFF 100%);
        }
        .post{
          position: relative;
        }
        .box{
          width: 380px;
        }
        p {
          display: block;
          -webkit-margin-before: 1em;
          -webkit-margin-after: 1em;
          -webkit-margin-start: 0px;
          -webkit-margin-end: 0px;
        }
        .excerpt {
          font-size: 15px;
          line-height: 21px;
          margin: 10px 0 0 0;
        }
    </style>
  </head>
  <body>
    <div>
      <div class="container">
        <div class="box post">
    			<h1>Duolingo lanza Test Center, un examen para certificarte en ingles</h1>
    			<p class="excerpt">
            La popular aplicacion para aprender idiomas ha lanzado una nueva herramienta que te permite obtener certificacion en ingles realizando un examen de 20 minutos desde la comodidad de tu hogar. Test Center de Duolingo, nace como alternativa a las pruebas tradicionales de certificacion estandarizadas que pueden tomar las personas en diferentes instituciones y que suelen tener un costo mucho más elevado. El examen de Test Center puede ser tomado ya mismo desde la web o desde Android, y tiene un costo de 20 dólares. Por estar aún en fase beta, y para promocionar su lanzamiento puedes tomarlo de manera gratuita por...
          </p>
    		</div>
      </div>
    </div>
  </body>
</html>

salu2