PSD-Tutorials.de - jQuery - Die Schrift mit FontEffect ändern

Informationen

Neue Forenthemen

JQuery >> jQuery - Die Schrift mit FontEffect ändern

Wer ausgefallene Schriftarten oder Schrifteffekte auf seiner Webseite verwenden möchte, hat prinzipiell zwei Möglichkeiten: Die Texte werden als Grafiken eingebunden, oder man setzt CSS ein. Beide Lösungen sind allerdings nicht befriedigend. Genau hier kommt das jQuery-Plug-in FontEffect ins Spiel. Denn damit lassen sich Schatten, Verläufe, Spiegelungen usw. auf Texte anwenden.

Sorry, Mitgliederworkshops können nur angeschaut werden, wenn Du Mitglied bist !

Vorteile einer Mitgliedschaft auf PSD-Tutorials.de

Zugriff auf über 1700 Workshops mit druckbarer PDF-Datei
Zugriff auf über 500 Videoworkshops
Zugriff auf über 3000 Downloads um Photoshop & Co zu erweitern
Zugriff auf ein sehr aktives Forum - Antworten im Minutentakt
Mitgliedschaft ist kostenlos und kann jederzeit wieder gelöscht werden
und vieles mehr ...
30 Sekunden ... und schon bist Du Mitglied. Klicke hier

Dies ist die Textansicht vom Workshop. Als Mitglied siehst Du zusätzlich alle Bilder + PDF-Download + Arbeitsmaterialen-Download!

Wer Schriften optisch aufpeppen will, scheitert an den eingeschränkten Möglichkeiten, die CSS zu bieten hat. Viele Entwickler bzw. Webdesigner greifen daher auf Grafiken zurück. Das kann man zwar durchaus so machen, ideal ist das allerdings nicht. Denn allein schon aus semantischen Gründen und hinsichtlich der Suchmaschinentauglichkeit der Seite sollte man Texte (und hier vor allem Überschriften) nicht als Grafiken einfügen. Bliebe noch eine PHP-basierte Variante, bei der Schriften serverseitig generiert werden. Das Problem dabei: Auch hier werden Grafiken erzeugt. Genau an diesem Punkt wird das jQuery-Plug-in FontEffect interessant. Die offizielle Projektwebseite finden Sie unter http://www.iofo.it/jquery/fonteffect/.  Momentan stellt das Plug-in vier Effekte zur Verfügung, die auf Texte angewendet werden können.      Outline     Shadow     Gradient     Mirror   Für sämtliche Effekte werden weder Grafiken noch zusätzliche CSS-Eigenschaften benötigt. Das Plug-in selbst hat lediglich eine Größe von 7k in der minimierten Variante. Um FontEffect nutzen zu können, müssen Sie zunächst jQuery einbinden. Anschließend wird die eigentliche FontEffect-Datei integriert.  <script type="text/javascript" src="jquery"></script> <script type="text/javascript" src="jquery-FontEffect-1.0.0.min.js"></script>  Im einfachsten Fall wird FontEffect folgendermaßen verwendet:  $("#bereich").FontEffect()  Das ist die Standardeinstellung, bei der keine Optionen angegeben wurden. Diese Definition entspricht den folgenden Einstellungen: [Beispiel anzeigen]   <script type="text/javascript">  /* <![CDATA[ */   $(document).ready(function(){      $("#bereich").FontEffect({      outline:true  })  });  /* ]]> */ </script>    Das Ergebnis sieht folgendermaßen aus:       Dabei handelt es sich um den Outline-Effekt. Neben Outline gibt es noch drei weitere Effekte. Da wäre zunächst Shadow.     Dieser Effekt weist dem Text einen Schatten zu. In den folgenden Beispielen wird jeweils auf die gleiche CSS-Syntax zugegriffen.  #bereich {      font-family :"Impact";      color       :#000;      font-size   :3em;  }  Um den Schatteneffekt auf den Text anzuwenden, wird die folgende Syntax verwendet: [Beispiel anzeigen]   <script type="text/javascript">  /* <![CDATA[ */   $(document).ready(function(){      $("#bereich").FontEffect({      shadow:true  })  });  /* ]]> */  </script>    Ein weiterer interessanter Effekt ist Gradient.     Dieser lässt sich ebenfalls wieder sehr einfach anwenden. [Beispiel anzeigen]   <script type="text/javascript">  /* <![CDATA[ */   $(document).ready(function(){      $("#bereich").FontEffect({      gradient:true  })  });  /* ]]> */ </script>    Und dann gibt es noch den Effekt Mirror. Dadurch wird die Schrift mit einem Spiegeleffekt ausgestattet.     Und auch hierzu wieder ein Beispiel: [Beispiel anzeigen]   <script type="text/javascript">  /* <![CDATA[ */   $(document).ready(function(){      $("#bereich").FontEffect({      mirror:true  })  });  /* ]]> */  </script>    Auf ein und denselben Text lassen sich übrigens auch mehrere Effekte anwenden.     Dazu muss man die gewünschten Effekte lediglich parallel angeben. [Beispiel anzeigen]   <script type="text/javascript">  /* <![CDATA[ */   $(document).ready(function(){      $("#bereich").FontEffect({      gradient:true,      mirror:true,      mirrorColor:"#298d79"      })  });  /* ]]> */ </script>    Die möglichen Parameter In den vorherigen Beispielen wurden bereits einige Optionen vorgestellt, die FontEffect zu bieten hat. Es gibt allerdings noch deutlich mehr. Die folgende Übersicht zeigt, welche Optionen bzw. Parameter zur Verfügung stehen.      outline :false, – Wendet den Outline-Effekt an.     outlineColor1 :"",–  Legt die Farbe der linken Linie fest. Erwartet wird eine Farbangabe.     outlineColor2 :""  –  Legt die Farbe der linken Linie fest. Erwartet wird eine Farbangabe.     outlineWeight :1, – Bestimmt die Dicke der Linie. Mögliche Werte sind 1=dünn, 2=normal und 3=fett.     mirror :false, – Wendet den Mirror-Effekt an.     mirrorColor :"" – Bestimmt die Spiegelfarbe.     mirrorOffset :-10 – Bestimmt den Abstand des Spiegelbildes vom Text.     mirrorHeight :50, – Legt die Höhe des Spiegelbildes fest.     mirrorDetail :1, – Bestimmt, wie detailliert das Spiegelbild aussehen soll. Mögliche Werte sind 1=sehr detailliert ,2=normal und 3=wenige Details.     mirrorTLength :50,  –  Hierüber legt man fest, wie stark der Spiegeleffekt zu sehen sein soll.     mirrorTStart :0.2, – Legt fest, wie durchsichtig der Effekt zu Beginn aussehen soll.     shadow :false, – Wendet den shadow-Effekt an.     shadowColor :"#000", – Hierüber wird die Farbe des Schattens bestimmt.     shadowOffsetTop :5,  – Bestimmt die Startposition des Schattens von oben. Erlaubt ist ein Pixelwert.     shadowOffsetLeft:5,  – Bestimmt die Startposition des Schattens von links. Erlaubt ist ein Pixelwert.     shadowBlur :1, – Bestimmt, wie verschwommen der Schatten aussehen soll. Mögliche Werte sind 1=kein Wischeffekt, 2=niedriger Effekt und 3=hoher     Wischeffekt.     shadowOpacity :0.1, – Hierüber können Sie festlegen, wie durchsichtig der Schatten sein soll. Mögliche Werte sind 0=nicht durchsichtig und 1=durchsichtig.     gradient :false, – Wendet den Gradient-Effekt an.     gradientColor :"", – Hierüber bestimmt man die Farbe des Verlaufs.     gradientPosition:20, – Bestimmt die Startposition des Verlaufs. Erwartet wird ein Prozentwert.     gradientLength :50, – Damit wird die Länge des Verlaufs festgelegt. Auch hier wird ein Prozentwert erwartet.     gradientSteps :20, – Legt die Anzahl der Schritte des Verlaufs fest.     hideText :false, – Bestimmt, ob der eigentliche Text angezeigt werden soll.   Die einzelnen Optionen lassen sich sehr einfach einsetzen. Es ist lediglich darauf zu achten, dass die Parameter jeweils mit Kommata voneinander zu trennen sind. Nach dem letzten Parameter wird kein Komma gesetzt. Auch hierzu wieder ein Beispiel: [Beispiel anzeigen]   <script type="text/javascript">  /* <![CDATA[ */   $(document).ready(function(){    $("#bereich").FontEffect({      shadow:true,      shadowColor:"#f00",      shadowOffsetTop:4,      shadowOffsetLeft:4,      shadowOpacity:1,      outline:true,      outlineColor1:"#fff",      outlineWeight:2  })  });  /* ]]> */ </script>  Die zugrundeliegende CSS-Syntax sieht folgendermaßen aus:  <style type="text/css">  #bereich {              font-family:"Arial black";              font-size:3.0em;              color:#fff;              font-weight:bold;  } </style>  Und auch hier das Ergebnis im Browser.       Durch den Einsatz von CSS und die Kombination der verschiedenen Parameter lassen sich erstklassige und vor allem interessante Effekte erzielen. Das gilt vor allem auch im Zusammenhang mit Hintergrundfarben. Sehen Sie sich hierfür zunächst die folgende Abbildung an:       Hier wurde eine Hintergrundfarbe definiert. Erst dadurch werden die einzelnen Parameter überhaupt sichtbar. Wie die gleiche Anwendung ohne den Einsatz einer Hintergrundfarbe aussieht, sehen Sie auf dem folgenden Screenshot.     Um den gewünschten Effekt zu erreichen, wurden verschiedene Parameter verwendet. Die vollständige Syntax sieht folgendermaßen aus: [Beispiel anzeigen]   <script type="text/javascript">  /* <![CDATA[ */   $(document).ready(function(){    $("#bereich").FontEffect({  mirror:true,      mirrorColor:"#fff",      mirrorOffset:-20,      mirrorHeight:50,      mirrorDetail:3,      mirrorTLength:80,      mirrorTStart:0.5,      gradient:true,      gradientColor:"#ccc",      gradientFromTop:true,      gradientPosition:20,      gradientLength:50,      gradientSteps:20  })  });  /* ]]> */ </script>  Und hier noch die CSS-Syntax:  <style type="text/css">  body {  background-color:#CC0033;  }  #bereich {   font-family:"Times new roman";    font-weight:bold;    margin-bottom:60px;    font-size:60px;    color:#fff  } </style>  Fazit Weitere interessante Beispiele dazu, wie sich das Plug-in einsetzen lässt, finden Sie auf der Seite http://www.iofo.it/jquery/fonteffect/.

• Home • Member-Tutorials • Forum • Downloads • DVD • Sitemap
Premiumpartner: • photoshoptutorials.de • Pixelio.de • Webdesigner • Tutorials.de • piqs.de Lizenzfreie Bilder • flashhilfe.de • Fotobuch • Flashforum

Seite generiert in: 0.048 Sekunden

Sponsoren