jQuery FontEffect: añade afectos al texto sin imágenes

jQuery Publicado por Claudia en agosto 18, 2009

FontEffect es un plugin jQuery que añade efectos a textos delimitados con HTML, sin imágenes, y sin necesidad de usar CSS. En su versión 1.0 (que pesa sólo 7kb) permite añadir 4 efectos distintos: borde (outline), sombra, gradiente y reflejo (mirror).

jqueryfonteffect

Puedes añadirlo en tres pasos:

1) Cargas la librería y el plugin (tomando en cuenta que requiere jQuery 1.3.2):

<script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-FontEffect-1.0.0.min.js"></script>

2) El CSS:

#ejemplo{ font-family: Georgia,'Times New Roman', serif; font-size:3.0em; color:#ff0080; font-weight:bold; margin-bottom:10px;}

3) HTML y efectos:

<div id="ejemplo">ChicaBlogger</div>
 
<script type="text/javascript">
$(&quot;#ejemplo&quot;).FontEffect({shadow:true});
</script>

Puedes combinar los efectos como quieras, y ver ejemplos en la página de Alejandro Uliana.
Es un plugin curioso, ideal para encabezados generados dinámicamente (ejemplo, el título de los posts). Lo mejor, es que funciona en la mayoría de los navegadores conocidos, incluyendo el favorito de todos: IE6.

Vía | Queness

Compártelo!
7 Comentarios en jQuery FontEffect: añade afectos al texto sin imágenes
  1. Información Bitacoras.com…

    Valora en Bitacoras.com: FontEffect es un plugin jQuery que añade efectos a textos delimitados con HTML, sin imágenes, y sin necesidad de usar CSS. En su versión 1.0 (que pesa sólo 7kb) permite añadir 4 efectos distintos: borde (outline), sombra, gra…..

  2. Chaantii dice:

    Vale, no entiendo. ¿Dónde se ponen esos códigos? :S

  3. Lulita dice:

    Hola!!Me encanto el blog,noticias utiles son siempre bienvenidas…
    te indico un sitio para que lo divulgues , esta muy bueno…es para toda america latina… se llama best blogs LA! por si quieres pasar http://www.bestblogsla.com
    Les dejo un saludo!hsta luego

  4. aibalahotia dice:

    He aprendido un monton. Me gusta tu blog, otro dia le dare un buen vistazo. Te invito al mio

    http://aibalahotia.nireblog.com

  5. Claudia dice:

    Chantii:
    Los códigos se ponen en distintas partes. Más bien, es para usuarios avanzados.
    Si te interesa, puedes bajar la plantilla Blogger de ejemplo, donde añadí esos códigos.

    Me quedo visitando blogs. Saludos! 🙂

  6. Zirox dice:

    XD jeje, volvi a pasar por tu blog, despues de tiempo …. 😀

  7. Eric | asian store dice:

    Muy interesante, me va a ser de mucha utilidad, gracias y un saludo.

Deja tu comentario
Tu Comentario