Wählen und modifizieren Sie die letzten Zeichen, bevor sie durch overflow: hidden abgeschnitten werden

Question

Ich versuche, einen Fadeout-Effekt zu erstellen, bei dem die letzten 5 oder 6 Zeichen in einer Titelleiste allmählich transparenter werden, wenn sie sich dem Rand ihres Containers nähern.

Ich kann mich nicht auf die Zeichenanzahl stützen, da die Seite responsiv ist und beliebige Breiten haben könnte. Ich kann auch nicht einfach einen Verlauf darüber legen, weil bereits ein Verlauf im Hintergrund vorhanden ist, was dies offensichtlich machen würde, es sei denn, ich kann meinen CSS-Verlauf von transparent zu einer Farbe machen, was ich nicht glaube möglich ist.

Meine Hoffnung ist, dass ich irgendwie die Zeichen auswählen kann, die dem Abschneidepunkt am nächsten liegen (bevor sie durch overflow:hidden am übergeordneten Element versteckt werden), wie folgt:

Ich habe versucht, dies über den ":last" -Selektor zu machen, kann aber nur auf Tags abzielen:

$('#scalable:visible:last').css('opacity','.5');

Hier ist mein erster Versuch dazu in einem jsfiddle: http://jsfiddle.net/adamnelson/PgerN/

Die Lösung war purer CSS:

#scalierbar {
    Hintergrundfarbe: #408800; /* Alte Browser */
    Hintergrundfarbe: -webkit-gradient(linear, 0 0, 0 100%, von(#408800), zu(#316600));
    Hintergrundfarbe: -webkit-linearer Verlauf(#408800 0%, #316600 100%);
    Hintergrundfarbe: -moz-linearer Verlauf(#408800 0%, #316600 100%);
    Hintergrundfarbe: -o-linearer Verlauf(#408800 0%, #316600 100%);
    Hintergrundfarbe: linearer Verlauf(#408800 0%, #316600 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
    Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#408800', endColorstr='#316600',GradientType=0 ); /* IE6-9 */

    Farbe: weiß;
    Schriftgröße: 20px;
    Schriftstärke: fett;
    Rand: 50px auto 0;
    Polsterung: 1em;
    Overflow: versteckt;
    Breite: 80%;
    Position: relativ;
}

#scalierbar:after {
    Inhalt: " ";
    Position: absolut;
    Höhe: 100%;
    Breite: 140px;
    Oben: 0;
    Recht: 0;
    Hintergrundfarbe: -moz-linearer Verlauf(links, rgba(49,102,0,0) 0%, rgba(49,102,0,0.56) 51%, rgba(49,102,0,1) 100%);
    Hintergrundfarbe: -webkit-gradient(linear, links oben, rechts oben, Farbstop(0%,rgba(49,102,0,0)), Farbstop(51%,rgba(49,102,0,0.56)), Farbstop(100%,rgba(49,102,0,1)));
    Hintergrundfarbe: -webkit-linearer Verlauf(links,  rgba(49,102,0,0) 0%,rgba(49,102,0,0.56) 51%,rgba(49,102,0,1) 100%);
    Hintergrundfarbe: -o-linearer Verlauf(links, rgba(49,102,0,0) 0%,rgba(49,102,0,0.56) 51%,rgba(49,102,0,1) 100%);
    Hintergrundfarbe: -ms-linearer Verlauf(links, rgba(49,102,0,0) 0%,rgba(49,102,0,0.56) 51%,rgba(49,102,0,1) 100%);
    Hintergrundfarbe: linearer Verlauf(rechts, rgba(49,102,0,0) 0%,rgba(49,102,0,0.56) 51%,rgba(49,102,0,1) 100%);
    Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00408800', endColorstr='#408800',GradientType=1 );
}

Dokumentiert in diesem Fiddle: http://jsfiddle.net/PgerN/2/

Answer 1

Would you mind using a pure CSS solution here?

Ich habe eine CSS-Horizontalgradient mit Deckkraft verwendet und auch den :after Selektor benutzt, damit du kein weiteres Element in deiner aktuellen Syntax hinzufügen musst. Das ist wirklich praktisch, wenn du keinen Zugriff auf den HTML-Code hast oder ihn aus irgendeinem Grund nicht ändern kannst. Allerdings möchte ich erwähnen, dass :after nicht von IE8 unterstützt wird, in diesem Fall musst du ein Element innerhalb deines #scalable verschachteln.

Demo

#scalable {
    background-color: #408800;
    color: white;
    font-size: 20px;
    font-weight: bold;
    height: 65px;
    margin: 50px auto 0;
    padding: 0 1em;
    overflow: hidden;
    width: 80%;
    position: relative;
}

#scalable:after {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background: -moz-linear-gradient(left,  rgba(64,136,0,0) 0%, rgba(64,136,0,0) 74%, rgba(64,136,0,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(64,136,0,0)), color-stop(74%,rgba(64,136,0,0)), color-stop(100%,rgba(64,136,0,1)));
    background: -webkit-linear-gradient(left,  rgba(64,136,0,0) 0%,rgba(64,136,0,0) 74%,rgba(64,136,0,1) 100%);
    background: -o-linear-gradient(left,  rgba(64,136,0,0) 0%,rgba(64,136,0,0) 74%,rgba(64,136,0,1) 100%);
    background: -ms-linear-gradient(left,  rgba(64,136,0,0) 0%,rgba(64,136,0,0) 74%,rgba(64,136,0,1) 100%);
    background: linear-gradient(to right,  rgba(64,136,0,0) 0%,rgba(64,136,0,0) 74%,rgba(64,136,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00408800', endColorstr='#408800',GradientType=1 );
}

Du kannst den Gradienten einfach an deine Bedürfnisse anpassen, wenn du dir dieses Beispiel ansiehst, habe ich ihn viel weiter gestreckt als bei meinem vorherigen.

Und ja, Gradientencodes sehen erschreckend aus, aber du hast ein praktisches Tool hier, um Gradienten zu erstellen, das damit gut umgeht.

Hinweis: Durch die Verwendung dieses Codes wird die Textauswahl deaktiviert, da du ein Element über den Text legst. Um Unannehmlichkeiten für deine Benutzer zu verhindern, kannst du etwas wie

#scalable:hover:after {
    display: none;
}

Demo 3 (Zum Auswählen des Textes überfahren)

Answer 2

Es wird nicht gut unterstützt und entspricht nicht genau dem, was Sie suchen, aber Sie könnten CSS-Masken für diesen Effekt verwenden:

https://www.webkit.org/blog/181/css-masks/

http://www.html5rocks.com/en/tutorials/masking/adobe/