Font-Effect
( if you use jQueryAdmin, download Plugin jqFont-Effect )
|
Shadow
|
Mirror
|
Outline
|
Gradient
|
jQA - Plugin
jQueryAdmin - Plugin jqFont-Effect
1. Plugin über jQueryAdmin installieren
2. Preset erstellen
3. Presetaufruf kopieren
4. Presetaufruf in Seite einfügen (Wysiwyg- oder Code-Abschnitt)
Snippet
<div class="font">Text</div>
Es sind weitere Klassen von "font2" bis "font4" vordefiniert,
die sich in der frontend.css und frontend.js leicht anpassen/kombinieren lassen.
font = Schatten
font2 = Spiegel
font3 = Umriss
font4 = Verlauf
autor: http://www.iofo.it/jquery/fonteffect
Outline+Shadow
Beispiel-Kombination: Outline + Shadow:
Wie geht das Beispiel?
Beispiel-Kombination: Outline + Shadow:
<div class="font5">Outline+Shadow</div>
jQA-Plugin: modules/jqueryadmin/plugins/jqfont-effect/loader.preset
Snippet: modules/font-effect/frontend.js
// outline und shadow
jQuery(".font5").FontEffect({
outline: true, // Apply the outline effect
outlineColor1: "#b22222", // [find contrasting] The upper left outline color
outlineColor2: "#b22222", // [outlineColor1] the lower right outline color
outlineWeight: 1, // 1=light,2=normal,3=bold
shadow: true, // Apply the shadow effect
shadowColor: "#666",// The color of the shadow
shadowOffsetTop: 3, // The top offset position (px)
shadowOffsetLeft: 3, // The left offset position (px)
shadowBlur: 1, // The shadow blur 1=none,2=low,3=high
shadowOpacity: 0.9// The opacity of the shadow (0=none,1=all)
});
// end font5
jQA-Plugin: modules/jqueryadmin/plugins/jqfont-effect/font-effect.css
Snippet: modules/font-effect/frontend.css
/* outline und shadow*/
.font5{
font-family: "Signature";
color: #fff;
font-size: 36px;
font-weight: normal;
margin-left: auto;
margin-right: auto;
letter-spacing: 10px;
}
jQA-Plugin: das Preset nochmal neu speichern (damit die Änderungen geladen werden)