| (Kommentare: 1)

Webdesign Lohmann | modern webdesign - CSS Gradient Text Effect

Wie kann man kunstvolle Überschriften erstellen ohne diese jedesmal in Photoshop zu rendern?

Hier ist ein einfacher Trick, wie man mit CSS einen Gradienten Text Effekt mit einem PNG-Bild erstellt (reines CSS, kein Javascript oder Flash). Alles, was man braucht, ist ein leerer <span> Tag in der Überschrift und die Anwendung des Hintergrund-Bild-Overlays mit der CSS-Eigenschaft position: absolute.

Dieser Trick wurde auf den meisten Browsern getestet: Firefox, Safari, Opera und auch Internet Explorer 6 .

Einfach diesen Artikel lesen, um herauszufinden wie es geht.

Vorteile

  • Das ist ein reiner CSS-Trick, kein Javascript oder Flash. Es funktioniert auf den meisten Browsern wie Internet Explorer 6 (PNG hack erforderlich).
  • Es ist für die Gestaltungen von Überschriften perfekt. Kein Rendern der Überschriften in einem Grafikprogramm. So werden Zeit und Bandbreite gespart.
  • Man kann beliebige Web-Schriftarten verwenden und die Schriftgröße bleibt skalierbar.

Wie funktioniert das?

Der Trick ist ganz einfach. Grundsätzlich fügen wir einfach nur ein 1px gradient PNG (mit Alpha-Transparenz) über den Text.

Webdesign Lohmann | modern webdesign - CSS Gradient Text Effect

HTML Markup

<h1><span></span>CSS Gradient Text</h1>

CSS Markup

Der entscheidende Punkt ist hier: h1 { position: relative } and h1 span { position: absolute }

h1 {
     font: bold 330%/100% "Lucida Grande";
     position: relative;
     color: #464646;
}

h1 span { 
     background: url(gradient.png) repeat-x;
     position: absolute;
     display: block;
     width: 100%;
     height: 31px;
}

So läufts auf IE6

Da der IE6 PNG-24 nicht richtig darstellt, ist folgenden Hack erforderlich (irgendwo zwischen die Tag hinzufügen):

<!--[if lt IE 7]>

<style type="text/css">

	h1 span {
		background: none;
		filter: progid:DXImageTransform.Microsoft.(Zeilenumbruch)
		AlphaImageLoader(src='gradient.png',sizingMethod='scale');
	}

</style>
<![endif]-->

jQuery Version ( wird automatisch hinzugefügt)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

	$(document).ready(function()
	{
     	//prepend span tag to H1
     	$("h1").prepend("<span></span>");
	});
	
</script>

Kommentare lesen

Thiemo

Es wäre höflich gewesen, die Quelle für die Idee und insbesondere für die kopierte Übersichtsgrafik anzugeben: http://webdesignerwall.com/tutorials/css-gradient-text-effect


Einen Kommentar schreiben

Bitte addieren Sie 2 und 7.

Zurück