JMiur [E]

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

17 comentarios:

Gem@  

Están geniales pero con Explorer8 se ve distinto que con Firefox.

Responder
Σ=o) Pau  

Me encantaaaaaaa :D
Jquery es una librería que me encanta y el efecto de las sombras para los títulos de la sidebar es estupendo!!!!
Cuando pueda lo probaré, como quiero amononar la plantilla para navidad, va ser un buen momento :)

besos ronroneados y feliz comienzo de semana ^_^

Responder
JMiur  

Gem@: Es verdad, el gradiente y el mirror se ven mal en IE, no lo había chequeado.

Un saludo Pau ¿Navidad? Es cierto ... ya llega XD :D ¿Habrá concursos? :D

Responder
Anahí  

Ah, me encantó, esto está muy bueno para los títulos, para textos especiales, para un montón de cosas, ¿el script se puede guardar en un html como el de lightwindow?
Tengo otra pregunta pero de otra cosa, JMiur: quiero volver a poner el status-msg... en la navegación por etiquetas y no puedo. Ya le cambié el display none por el block, y no aparece... ¿hay algo más que tenga que cambiar?
Saludos y gracias.

Responder
egoloco  

pero... aun no logro entender como hacer para que pueda usarla junto con scriptaculous, necesito mas explicacion... debo camiar el simbolo "$" en todos los scripts o en todo lo q es JQuery? quiero efectos... quiero efectos!!! :D

por cierto... alguien vio este video?
hecho en Uruguay, un coterraneo me destruye el centro de Montevideo en su video xD

http://www.youtube.com/watch?v=-dadPWhEhVk

Responder
Graciela  

Bellos, impactantes, mira lo que se puede hacer con la JQuery :)

La Navidad aún está lejos, el Niño Dios todavía no se ha puesto los pantalones...las tan amadas y detestadas fiestas hummm gentes con humor de perros grrrr

Responder
Anahí  

La respuesta a la primera pregunta ya la tengo: no, porque tiene que ir enseguidita de jquery, sino no funca.
Saludos.

Responder
JMiur  

Anahí: No sé si quedó alguna pregunta pendiente.

egoloco: Eso no podría responderlo, no lo sé, no uso varias lbrerías combinadas.

Responder
Anahí  

Sí, JMiur, le pido ayuda para volver a poner el status-msg... en la navegación por etiquetas, porque con el display block no aparece...
Saludos.

Responder
JMiur  

Veamos.

¿Está está línea de código?

<b:include data='top' name='status-message'/>

Suele estar al inicio de esto:

<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
....... JUSTO ACA .......

También ha un includable:

<b:includable id='status-message'>
.......
</b:includable>

Pregunto porque ninguna de las dos cosas es posible verlas online.

Responder
Anahí  

Gracias, JMiur, el primero ya lo agregué (debe haber "volado" en alguna modificación de la plantilla). El segundo está, ¿eh?, sigue ahí. Gracoas de nuevo.

Responder
JMiur  

No debía estar, es lo que uno quita justamente para no mostrarlo ¿Agregarlo solucionó el problema?

Responder
Anahí  

Sí, JMiur, ya apareció. Lo que pasa es que no me acuerdo de haberlo sacado, pero seguramente ha de ser así, creía que era sólo cuestión de display none / display block el asunto. :$
Slds.

Responder
JMiur  

Creo que todos lo hemos sacado alguna vez :D

Responder
Zeto  

No está disponible la página, ¿depronto tienes el .js guardado?, para que me lo facilites, me gustaría hacer algo con esto, gracias

Responder
Zeto  

Hola amigo, depronto no tenés el archivo a la mano para que me lo facilites, el sitio del creador o al que enlazas no me permite entrar, saludos y gracias de antemano, por cierto Excelente blog!

Responder
JMiur  

No. No lo tengo. Puedes esperar que se solucione el acceso al sitio original o copiarlo del código fuente.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR