CSS3 fondu texte

J'ai essayé d'obtenir mon texte à s'estomper. J'ai essayé quelques codes que j'ai trouvé sur internet, mais ils semblent être uniquement pour les éléments de bloc.
Comment puis-je le faire fonctionner?

Voici ce que j'essaie de faire:
CSS3 fondu texte

Oh, et je NE veux PAS Internet Explorer.

Cordialement, MarioErmando

vous avez essayer votre code dans JSFIDDLE?
qu'est ce qu'il "code" dont vous parlez. coller un échantillon ou jsfiddle lien
Il n'y a pas de code
Ils ne fonctionnent que sur les éléments de bloc, tandis que le texte est un élément inline.

OriginalL'auteur Duncan | 2013-07-06

  1. 13

    Jamais l'esprit, j'ai trouvé ma propre solution.

    blablablabla<span class="readmore">blablablabla</span>

.readmore {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
}

    Malheureusement, ne fonctionne que sur webkit.

    Je l'ai utilisé comme ci-dessous: -webkit-masque-image: -webkit-linear-gradient(à gauche, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); Parce que je pensais que la plupart d'habitude à la recherche. Merci encore.

    OriginalL'auteur Duncan

  2. 8

    Ici est Violon Exemple , vous pouvez essayer de aime cela .

    html

    <ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum massa     nec mi porta ut dictum dolor consectetur. Nunc imperdiet fermentum mauris, aliquam rhoncus magna suscipit eget. Cras neque velit, posuere ut pulvinar eu, faucibus sit amet tellus. Nullam sed orci tempus risus commodo commodo.</li>
</ul>

    css

    body {
font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
font-size: 13px;
}
ul { margin: 20px; padding: 0; }
li {
position: relative;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
li:after {
content: "";
pointer-events: none;
position: absolute;
width: 100px;
height: 100%;
top: 0; right: 0;
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
/*
This piece of code works great too, but only on Webkit Browsers!
li {
color: white;
position: relative;
overflow: hidden;
white-space: nowrap;
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}
*/
    Est qu'il y a un moyen sans white-space: nowrap;?
    Que faire si j'ai besoin de deux gradients à droite et en bas côtés de blocs de texte?

    OriginalL'auteur zey

  3. 3

    Pour Googlers, ici est une simple solution générique, j'ai compris après récurer l'internet.

    .excerpt {
position: relative;
}
.excerpt::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(to bottom, transparent, white);
}

    Vous pouvez jouer avec les paramètres de linear-gradient pour obtenir des résultats différents, tels que to right, ou transparent 25%.

    Essayez de jouer du Violon.

    Bon, si le fond est d'une couleur unie. Sinon, il sera un gâchis.

    OriginalL'auteur HoppyKamper

  4. 1

    Pour les gens viennent ici de l'avenir, CSS4 probablement déjà inclut:

    text-overflow: fade;

    https://drafts.csswg.org/css-ui-4/#text-overflow

    https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

    Salutations à partir de 2017.

    OriginalL'auteur Alph.Dev