Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Verläufe auf Text mit reinem CSS

Heute mal ein kleines Snippet, wie man einen reinen Text mit Verläufen färben kann.

Hier geht’s zur Demo: http://jsfiddle.net/qgku1gcz/

css-verlauf-text
h1 {
	font-family: Verdana;
	font-size: 80px;
	color: #f27c36;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: -webkit-linear-gradient(left,#269bce,#152a34);
	background: -o-linear-gradient(transparent,transparent);
}

Das Ganze kann man zum Beispiel auch für das „abschneiden“ bzw. langesame ausblenden von Texten nehmen

p {
	max-width: 500px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: -webkit-linear-gradient(bottom,#fff,#333);
	background: -o-linear-gradient(transparent,transparent);
}

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

Keine Kommentare vorhanden

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*