FontEffect: Efectos en textos con jQuery

FontEffect es un script para JQuery que permite crear textos con cuatro efectos gráficos diferente que a su vez, pueden combinarse entre si.

Agregamos la librería antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

Y luego el script en si mismo, ya sea alojándolo en un servidor:

<script type='text/javascript' src='URL_jquery-FontEffect-1.0.0.min.js' />

o copiando y pegando su contenido:

<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>

Los efectos se crean de manera individual, indicando el ID de la etiqueta o de manera más general, usando clases.

Por ejemplo:

<div id="miEfecto" style="color:#000; font-family: Impact; font-size: 60px;"> Efecto Outline</div>
<script> $('#miEfecto').FontEffect({ outline:true }) </script>

Todos se contruyen igual, una etiqueta con un estilo personal y luego la llamada a la función:

<script> $('#nombreID').FontEffect({ ....... el efecto ....... }) </script>

Algunos ejemplos:

Sombras
<script>$('#miEfecto').FontEffect({ shadow:true })</script>

Gradiente
<script>$('#miEfecto').FontEffect({ gradient:true, gradientColor:'#FFF' })</script>

Mirror
<script>$('#miEfecto').FontEffect({ mirror:true,mirrorColor:'#f3f2f2',mirrorTLength:80,mirrorTSTart:.8  })</script>

Outilne + Sombras
<script>$('#miEfecto').FontEffect({ outline:true, shadow:true })</script>

Gradiente + Mirror
<script>$('#miEfecto').FontEffect({ gradient:true, mirror:true, mirrorColor:'#00FFFF',mirrorTLength:80,mirrorTSTart:.8 })</script>

Varios efectos combinados
<script>$('#miEfecto').FontEffect({ outline:true, outlineColor1:'#fc0', outlineColor2:'#f00', gradient:true, gradientColor:'#f00', gradientPosition:10, gradientLength:60, gradientSteps:10 })</script>

Del mismo modo, puede crearse una clase CSS y usarla varias veces; por ejemplo, podemos definir una para los encabezados H2:

<h2 class='miClase'> un texto  </h2>
<h2 class='miClase'> otro texto  </h2>
.......
<script>$('.miClase').FontEffect({ shadow:true })

Estos son los parámetros que pueden usarse:

outline: true activa el efecto
outlineColor1:"#rrggbb" color del ángulo superior izquierdo
outlineColor2:"#rrggbb" color del ángulo inferior derecho
outlineWeight :1|2|3 indica light | normal |bold (por defecto es 1)

mirror: true activa el efecto
mirrorColor:"#rrggbb" color del reflejo
mirrorOffset:valor distancia al texto (por defecto es -10)
mirrorHeight:valor porcentaje altura del reflejo (por defecto es 50)
mirrorDetail:1|2|3 indica el detalle high | medium | low (por defecto es 1)
mirrorTLength:valor porcentaje de esfumado (por defecto es 50)
mirrorTStart:0/1 opacidad inicial (por defecto es 0.2)

shadow: true activa el efecto
shadowColor:"#rrggbb" color de la sombra
shadowOffsetTop:valor posición superior en pixeles (por defecto es 5)
shadowOffsetLeft:valor posición inferior en pixeles (por defecto es 5)
shadowBlur:1|2|3 indica el esfumado none | low | high (por defecto es 1)
shadowOpacity:valor opacidad de la sombra (por defecto es 0.1)

gradient: true activa el efecto
gradientColor:"#rrggbb" color del gradiente
gradientPosition:valor porcentaje posición inicial (por defecto es 20)
gradientLength:valor porcentaje gradiente (por defecto es 50)
gradientSteps:valor variación (por defecto es 20)

REFERENCIAS:jQuery Gallery