1-image 2-image 3-image
Sie sind hier: Startseite > Besonderheiten > Text hervorheben

Text hervorheben

 

Das ist ein reiner Beispieltext für das Beispiel (startet in 5,5 Sekunden): Diesen Text hervorheben.

(Erst nach einem Browserrefresh startet diese wieder.)


Wie geht das? 

Auf dieser Seite fand ich die entsprechenden CSS-Codes. Mir gefiel das oben gezeigte Markierungsverfahren (dort Nr. 6).

Aus dem gezeigten CSS-Code benötigte ich nur diesen Teil:

mark {

-webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
animation: 1.5s highlight 1.5s 1 normal forwards;
background-color: none;
background: linear-gradient(90deg, #7efff5 50%,
rgba(255, 255, 255, 0) 50%); background-size: 200% 100%;
background-position: 100% 0;
}
@-webkit-keyframes highlight
{
to {
background-position: 0 0;
   }
}

 

Mit dem TinyMCE ist es standardmäßig nicht möglich, ein <mark>-Tag zu setzen (außer manuell im Quelltext). Deshalb empfehle ich, eine neue CSS-Klasse (z.B. animark) ins Standard-Template ganz hinten hineinzuschreiben. Dann sollte diese im TinyMCE-Editor unter "Format" erscheinen. Diese sind nicht alphabetisch sortiert!

span.animark {
	-webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
	animation: 1.5s highlight 1.5s 1 normal forwards;
	background-color: none;
	background: linear-gradient(90deg, #7efff5 50%, rgba(255, 255, 255, 0) 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
}
 @-webkit-keyframes highlight {
 to {
 background-position: 0 0;
}

 

Weil ich die Markierung nicht so schnell (1.5 Sekunden) haben wollte, habe ich die 1.5 in 5.5 geändert.

Wenn du z.B. verschiedenfarbige Markierungen brauchst, dann ginge auch sowas:
span.animarkBlau, span.animarkRot, span.animarkGelb oder ähnlich.
Du musst dann halt nur jeweils eine neue Regel erstellen (neue CSS-Klasse (z.B. span.animarkRot) ins Standard-Template) und die Farbangaben für linear-gradient ändern.

 

Letzte Bearbeitung:
Please activate JavaScript in your browser.

» Sitemap

Aufgrund der neuen Cookies-Verordnung der EU: Einige Bereiche dieser Website benötigen zu ihrer Funktion neben den sogenannten SESSION-Cookies, auch Cookies, die personenbezogenen Daten enthalten, die sich auf Sie, Ihren Webclient und / oder Ihr Gerät (PC oder Mobil-Gerät) beziehen (also: personenbezogenen Daten). Es werden nur seiteninterne Werte gespeichert. Bitte geben Sie Ihre Erlaubnis, evtl. weitere Cookies auf Ihrem Rechner zu platzieren. Erfahren Sie mehr über diese Cookies im Unterpunkt des Impressums bei Cookies.