0

Superponer textos e imágenes

Hay muchas formas de superponer un texto a una imagen. La más común es colocar la imagen como fondo de un bloque DIV. Si lo escribimos "normalmente", veríamos algo así:

Primera línea del texto
segunda línea del texto


<div style="background: transparent url(URL_imagen) no-repeat left top; height: 293px; margin: 0 auto; width: 400px;" />
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>

Lógicamente, el texto estará arriba. Si quisieramos ubicarlo abajo o en un lugar específico, deberíamos agregarle al DIV la propiedad position: relative y al contenido la propiedad position: absolute. De este modo, utilizando left, right, top y bottom podremos ubicar ese texto en cualquier lugar dentro de la imagen:

Primera línea del texto
segunda línea del texto


<div style="position: relative;background: transparent url(URL_imagen) no-repeat left top; margin: 0 auto; height: 293px; width: 400px;" />
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; position: absolute; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>

Lo mismo puede hacerse utilizando la imagen en una etiqueta IMG lo que además, permite que esta sea un enlace:

Primera línea del texto
segunda línea del texto


<div style="position: relative; margin: 0 auto;width: 400px;">
<a href="una_URL"><img src="URL_imagen" /></a>
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; position: absolute; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>

0

Alas de Plomo regala ilusión

Dejo el blog de pruebas un ratito de lado para crear esta entrada que no tengo idea como empezar así que lo mejor es empezar como se empieza todo, por el principio.
Dña. Urraca me ha visitado esta noche, traía en una mano su inseparable paraguas y bajo el brazo una participación de lotería. Lo que estáis leyendo, se ha enterado que regalan lotería y generosa ella le ha faltado tiempo para avisar.
Para saber de qué va el tema lo mejor es visitar a Carlos de Alas de Plomo
Aún así os adelanto algo...
La administración Z-13 Lotería, en Gran Vía 36 de Zaragoza. tfno: 976 235 769, ofrece jugar a la lotería de Navidad completamente GRATIS.
No a cualquier número claro sino al décimo que regalan para compartir entre todos los blogueros del mundo.




¿Cómo podemos participar?
Cada uno de vosotros debe escribir o copiar el artículo de Carlos que habla sobre este sorteo y difundirlo a través de su propio blog. Una vez hecho esto basta con publicar un comentario en el artículo de Carlos dejando el enlace de tu articulo en el que se vea que has participado difundiendo la noticia invitando al menos a otros cinco blogs y siendo estos debidamente enlazados.
El plazo límite para publicar un artículo será: las 24:00 horas del día 20 de Diciembre de 2009.
Como Carlos bien indica enlazaré cinco blogs, estos blogs son un ejemplo de lucha diaria y solidaridad y un poquito de ilusión creo les vendrá muy bien, sé que hay muchos más para añadir pero confío que los enlazados sabrán muy bien donde dejar su granito de arena. De todas formas si alguien quiere participar estoy segura que si se pone en contacto con Carlos puede hacerlo, así que os animo a todos.

► Maite Hasta la luna ida y vuel... TA
► Graciela de Palomas de Papel
► K_nelita Te propongo
► Mariajo MI-ESTRELLA-DE-MAR
► Cari Y Yoly El Angel de Cari

Para más detalles visitar Alas de Plomo. Por mi parte agradecer a Carlos esta iniciativa, desear suerte y que sea muy repartida.
¡Ojalá nos veamos todos en Zaragoza eso si que sería un premio!

0

Todo lo que necesitas saber sobre RSS

0

Uso del blog y autismo




Este vídeo habla sobre el extraordinario interés de Diego por los ordenadores.
Es un reportaje realizado por el programa Escúchame del Canal Extremadura donde se muestra el uso de un blog para fomentar las habilidades de Diego como herramientas comunicativas.

Podéis ver la entrada completa en Aulautista’s Weblog

Y no puedo dejar pasar la oportunidad de regalar el siguiente texto de Maite autora de:
"Hasta la luna ida y vuel... TA"

Tengo autismo. No soy "autista". Mi autismo es sólo un aspecto de mi naturaleza. No me define como persona. ¿O eres una persona con pensamientos, sentimientos y muchos talentos, o solamente gordo (con sobrepeso), miope (usas lentes) o torpe (malo para deportes)? Puede que eso sea lo primero que yo vea cuando te conozca, pero no representa necesariamente lo que eres tú. Como adulto, puede que tengas algo de control sobre la manera en que te autodefines. Si lo deseas, puedes resaltar una característica especial. Pero como niño, aún me estoy desarrollando. Ni tú ni yo sabemos de lo que seré capaz más adelante. Definirme por una sola característica corre el riesgo de que tengas expectativas demasiado bajas para mí. Y si siento que tú no crees que pueda lograr algo, mi respuesta natural será ni siquiera intentarlo.

0

Pluralink: Un enlace con varios enlaces

Pluralink es un curioso script para JQuery que permite generar un enlace con varios en su interior:


Por supuesto, primero debemos tener agregada la librería en nuestra plantilla:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>
Luego, podemos descargar el script y alojarlo nosotros o bien usar el código que ellos nos brindan, incluyendo hacks para Internet Explorer y el CSS correspondiente:

<script type="text/javascript" src="http://pluralink.com/files/pluralink.js"></script>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie.css" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie6.css" type="text/css" />
<![endif]-->
Para aplicarlo a nuestros enlaces, basta separar las direcciones URL y los títulos con una doble barra vertical ||
<a href="URL_pagina1||URL_pagina2" title="titulo_pagina1||titulo_pagina2"> TEXTO O IMAGEN </a>
En el caso de usar Wordpress, hay un plugin que puede ser agregado y que podemos descargar en formato ZIP

0

Los tiempos cambian






REFERENCIAS:WebAppers

0

Screencast-O-Matic

Hace unos días me preguntaba k_nelita por la herramienta que había utilizado para crear los screencast.
Los screencast son grabaciones de pantalla sobre la actividad que tenemos en nuestro PC. Cualquier movimiento es grabado como puede ser cambiar de página, acceder a un enlace, dibujar, escribir, todo queda grabado.
Algunos screencast también contienen audio, y son editados para añadir distintos efectos, un ejemplo son los vídeos de You Tube que podemos editar una vez subimos el vídeo y accedemos como indica en la siguiente imagen.



Hay otras muchas formas de crear screencast la que estoy probando es Screencast-O-Matic me gusta porque es una herramienta online rápida y sencilla de utilizar.
Para utilizarla necesitamos tener instalado el plugin Java en nuestro navegador pero si no lo tenemos no es problema porque desde la misma página nos pide permiso para instarlo.
Con Screencast-O-Matic podemos enviar la grabación a nuestros contactos, subirla a nuestra cuenta de YouTube, embeberla directamente en nuestro blog o descargar a nuestro PC el archivo de formato Quicktime (MP4)
El tamaño de pantalla que nos permite grabar es de 640x480, 800x600, 1024x768 a 1280×720 HD.
Las medidas las podemos escoger desde la barra de herramientas que se muestra antes de comenzar la grabación así como activar el audio.

Poca cosa más porque es muy sencillo de utilizar, y como de grabaciones se trata nada mejor que el vídeo proporcionado por Screencast-O-Matic para no perder detalle.


0

Invitaciones a Google Wave

Google Wave
Dispongo de 14 invitaciones para Google Wave, si alguien está interesado puede dejar un comentario con su dirección de correo. Las asignaré en el mismo orden que sean solicitadas.

Si piensas que aún no estás a tiempo lee en los comentarios la iniciativa de Juan, es una buena idea de la que todos podemos tomar ejemplo.

0

Surtido de íconos

Aplicaciones
Contiene 78 íconos de 16x16, 32x32 y 48×48, en formato PNG.descargar
Folders
Contiene 9 íconos de 500×500, en formato PNG y 84 en formato ICO.descargar
Oficina
Contiene 50 íconos de diferentes tamaños, en formato PNG.descargar
Systema
Contiene 111 íconos de 128x128 en formato PNG.descargar

0

SafeSearch filtro de Google

SafeSearch es el filtro que utiliza Google y podemos utilizar si no deseamos ver sitios que contengan según palabras de Google "pornografía, contenido sexual explícito, improperios y otros tipos de contenido de incitación al odio"

Activación de SafeSearch.


Escribe aquella palabra que deseas añadir a tu búsqueda y accede a Imágenes



En SafeSearch, selecciona el nivel  que deseas utilizar
  •  Filtro moderado: esta opción excluye la mayor parte de las imágenes explícitas de los resultados de Google Imágenes, pero no filtra los resultados de las búsquedas web normales. Es la opción predeterminada de SafeSearch; se aplicará un filtrado moderado a menos que lo modifiques.
  •  Filtro estricto: esta opción aplica el filtro SafeSearch tanto a los resultados de las búsquedas web como a los de las búsquedas de imágenes.
  •  Sin filtro: esta opción desactiva completamente el filtro SafeSearch.
Cuando escojas tu preferencia guarda los cambios. SafeSearch permanecerá activado mientras las cookies estén habilitadas en tu PC.
Si activamos SafeSearch y comprobamos que aún siguen apareciendo sitios de contenido ofensivo podemos hacer uso de la herramienta para la solicitud de eliminación de páginas web.
Leyendo el anterior enlace me saltan mil preguntas que resumo en sólo una.
¿Revisará Google el sitio, contenido, enlace o imagen y lo pondrá en conocimiento del autor antes de suprimirlo?
Y no es una pregunta disparatada ya que hace un año fueron numerosos los blogs  de Blogger bloqueados sin previo aviso. Algunos fueron desbloqueados inmediatamente, otros no tuvieron esa suerte y el desbloqueo tardó semanas.
Las explicaciones eran claras pero sin una base consistente "La detección automática de contenido no deseado es inexacta y le pedimos disculpas por este positivo falso" y caímos como moscas como vulgarmente se dice.  Algo me dice que con el filtro no será igual pero la duda queda....

Algún texto y REFERENCIA:Google web search

0

NES emulator en JavaScript

Javascript NES emulator es una curiosidad; un intento de crear un emulador de estos juegos que fueron y siguen siendo tan populares.

Según nos dicen, para probarlo se requiere una computadora rápida y un navegador de última generación pero, yo le agregaría una conexión rápida y mucha pero mucha paciencia.

El proyecto está abierto y puede ser descargado desde Github. Como verán, no es nada simple.


De todas maneras, si alguien se queda con ganas de rememorar viejos tiempos, lo mejor es recurrir a algún emulador como ZNes del cual hay versiones que hasta funcionan en el DOS y que se instala muy facilmente.

Obviamente, luego habrá que buscar las ROMs de los juegos pero, hay cientos de sitios desde donde descargarlas.

0

Theme Craft plantillas para Blogger

Theme Craft otro sitio donde encontrarán plantillas para Blogger.
Por si tenían alguna idea en mente y aún no lo encontraron.





0

Solución al diseño del gadget de suscripción

Hace tiempo que desde Diseño podemos añadir un gadget de Blogger que permite a nuestras visitas el suscribirse a entradas y comentarios de nuestro blog.

Suscripción Gadget

El gadget no tenía demasiada aceptación entre los bloggers de habla hispana, ya que en los blogs en español la frase que anima a suscribirse a los comentarios, al traducirse automáticamente del inglés, se alargaba demasiado y sobresalía de la imagen de fondo:

Suscribe error


Gracias a nuestro amigo Vku del fantástico blog de ayuda ¿Como se hace? ahora podemos corregir este error añadiendo un código para controlar la apariencia del gadget y que quede muchísimo más presentable.

[1] Añadimos el gadget desde Edición si es que aún no lo tenemos añadido, si ya lo estamos usando no es necesario más que añadir el código para controlar su diseño.


[2] Localizamos desde Edición HTML de nuestro panel, la etiqueta ]]></b:skin> dentro del código de nuestra plantilla, y justo encima de esa etiqueta colocamos este código:

div.subscribe div.top{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQ1vncfsZPffl8h2kz5Lx_JtjYrSgg6UaaazNs0XMW8bt-NGPqDsvApCY1Gfp6n3vcuFi3OaF3WSFt9fEvHXAE81N1Q_c_heBCtemHLDVNsN4KLWjnM7uAgb1qr_VcdDa8tdR-A0xtXeI/s1600/s_top180.png',sizingMethod='crop');font-size:1em;padding:4px 5px 1px 5px;width:180px;}

html>body div.subscribe div.top{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQ1vncfsZPffl8h2kz5Lx_JtjYrSgg6UaaazNs0XMW8bt-NGPqDsvApCY1Gfp6n3vcuFi3OaF3WSFt9fEvHXAE81N1Q_c_heBCtemHLDVNsN4KLWjnM7uAgb1qr_VcdDa8tdR-A0xtXeI/s1600/s_top180.png) top left no-repeat;background-color: transparent;}

div.subscribe div.bottom{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqegO91JPbJi9c8Jc8JVKB3YIZM58lwYLMaq4JgVrSh0jKvnTgZXtQ8ocSDrRYN7iFBmfh3-6gQvfeQkZweR54Bi99WwLb_kltUhinVbX5dVFoxrS0Kc4ExTpVkgS7YuJ5VhsfkeDL3SHK/s1600/s_bottomx180.png',sizingMethod='crop');height:3px;font-size:3px;line-height:0;}

html>body div.subscribe div.bottom{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqegO91JPbJi9c8Jc8JVKB3YIZM58lwYLMaq4JgVrSh0jKvnTgZXtQ8ocSDrRYN7iFBmfh3-6gQvfeQkZweR54Bi99WwLb_kltUhinVbX5dVFoxrS0Kc4ExTpVkgS7YuJ5VhsfkeDL3SHK/s1600/s_bottomx180.png) bottom left no-repeat;width:180px;margin-bottom:0;padding-bottom:0;}

Resultado:

Suscribe corregido




¿Como se hace?No se os olvide visitar el blog de Vku donde encontraréis muchos trucos y cosillas interesantes y donde podéis contar con su ayuda si algún problema tenéis para aplicar cualquiera de sus "trucos".

Tampoco estaría mal si vais a usar el "truco" de esta entrada, le dejaseis a Vku un comentario de agradecimiento en su blog en lugar de en este post.


ENTRADA ORIGINAL:¿Cómo se hace?

0

Cut My Pic herramienta online efecto shadow



Cut My Pic es otra herramienta online que nos permite recortar, voltear y escoger la forma de las imágenes así como añadir efecto sombra en los bordes.





0

El efecto bubble

En aext.net nos muestran dos formas de crear el efecto burbuja en los enlaces, es decir, que cuando coloquemos el cursor sobre un enlace con una imagen, esta se amplie. Entre ambos, me quedo con el de los sprites ya que es la técnica que me parece más adecuada y la que menos recursos requiere; sólo necesitamos una imagen y un poco de CSS.

En este ejemplo, esa imagen tiene 300x600 y es un rectángulo dividido en sectores de 150x150, por lo tanto cada imagen la podemos ubicar con un poco de aritmética.


Veamos el CSS:
#bubble { /* el contenedor que en este caso será una lista */
list-style: none;
margin: 0;
padding: 0;
}
#bubble li { /* cada item de esa lista */
display: inline-block; /* o usar float:left si se quiere que sea compatible con versiones anteriores a IE8 */
margin: 0;
padding: 0;
}
#bubble li a.icon { /* una clase general para los items, donde agregamos el sprite */
background: url(URL_imagen) no-repeat;
border: none;
display: block;
height: 150px; /* el alto de cada sector */
text-indent: -9999px; /* la ocultamos */
width: 150px; /* el ancho de cada sector */
}

/* ahora, posicionamos el fondo para cada item y para su efecto hover */

#bubble li a.demoBubble1 { background-position: -150px 0px; }
#bubble li a.demoBubble1:hover { background-position: 0px 0px; }

#bubble li a.demoBubble2 { background-position: -150px -150px; }
#bubble li a.demoBubble2:hover { background-position: 0px -150px; }

#bubble li a.demoBubble3 { background-position: -150px -300px; }
#bubble li a.demoBubble3:hover { background-position: 0px -300px; }

#bubble li a.demoBubble4 { background-position: -150px -450px; }
#bubble li a.demoBubble4:hover { background-position: 0px -450px; }
¿Cómo lo usamos? Creando una lista:
<ul id="bubble">
<li><a class="icon demoBubble1" href="javascript:void(0);">demoBubble1</a></li>
<li><a class="icon demoBubble2" href="javascript:void(0);">demoBubble2</a></li>
<li><a class="icon demoBubble3" href="javascript:void(0);">demoBubble3</a></li>
<li><a class="icon demoBubble4" href="javascript:void(0);">demoBubble4</a></li>
</ul>
Aunque siempre es mejor usar imágenes específicas, basta hacer cuentas para usar esta misma técnica y mostrar algo diferente. Por ejemplo, algo similar al llamado Sexy Bookmarks:


0

Sobre el uso de los sprites

¿Será más rápido cargar una imagen grande o varias imágenes pequeñas?

No es una pregunta retórica, durante mucho tiempo, siempre se ha creido lo segundo y de hecho, la técnica del slice, partir una imagen en pedazos y cargar cada parte por separado, es algo que incluso poseen varios editores de imágenes como Photoshop o Fireworks.

Sin embargo, de un tiempo a esta parte, la idea ha ido cambiando y en estos momentos, hay una tendencia a lo contrario, al uso de los llamados sprites, es decir combinar varias imágenes en un solo archivo y luego, utilizar CSS para mostrarlas (más información)

¿Cómo hacemos esto? Es simple, sólo necesitamos un poco de aritmética.

Por ejemplo, supongamos que tengo tres íconos de 16x16 que quiero mostrar como enlaces y cada uno de ellos, tiene un efecto hover; necesitaría seis imágenes individuales. Las combino con un editor, poniendo una al lado de la otra y creo una sola imagen que tendrá 48x32:


En la fila superior tengo los tres íconos en estado "normal" (los que veré por defecto) y abajo los tres que mostraré cuando pase el mouse sobre ellos.

La propiedad background nos permite colocar una imagen de fondo y posicionarla, es decir, que si dimensionamos algo, podemos agregarle un fondo de mayor tamaño y  sólo mostrar una parte de esa imagen. Creamos unas clases CSS para que se vea el ejemplo:
/* las propiedades generales */
a.iconos {
background:transparent url(URL_IMAGEN) no-repeat 0px 0px;
display: block;
height: 16px;
width: 16px;
}

/* las propiedades de cada uno de los íconos */
a.icono1 {background-position: 0px 0px;}
a.icono2 {background-position: -16px 0px;} /* desplazamos la imagen 16 pixeles a la izquierda */
a.icono3 {background-position: -32px 0px;} /* desplazamos la imagen 32 pixeles a la izquierda */

/* las propiedades de los íconos con efecto hover */
/* de manera similar, desplazamos la imagen a la izquierda y 16 pixeles hacia arriba */
a.icono1:hover {background-position: 0px -16px;}
a.icono2:hover {background-position: -16px -16px;}
a.icono3:hover {background-position: -32px -16px;}


Lo mismo podemos hacer inline, escribiendo el estilo en la etiqueta HTML. Ene ste ejemplo usamos una imagen de 96x170 pixeles donde se combinan dos, una debajo de la otra:

En este ejemplo, usamos dos imágenes de 96x85 combinadas:
<div 
style="background: transparent url(URL_IMAGEN) no-repeat 0px 0px; cursor:pointer; height: 85px; margin: 0 auto; width: 96px;"
onmouseover="this.style.backgroundPosition='0px -85px';"
onmouseout="this.style.backgroundPosition='0px 0px';"
></div>


La posición se define en pixeles, primero la coordenada horizontal y luego la coordenada vertical. La posición 0px 0px es la esquina superior izquierda, y el desplazamiento lo calculamos sumando los anchos y/o los altos de cada parte y colocándo ese valor como un número negativo.

¿Cuál es la ventaja? Fundamentalmente, cuando se trata de íconos con efectos hover, evitamos la demora que se produce cuando se carga la segunda imagen; al ser una sola, siempre está disponible y eso agiliza la visualizacion de las páginas.

Obviamente, no es algo para aplicar en cualquier caso y siempre hay que tener en cuenta que el tamaño de las imágenes es un detalle a tener muy en cuenta cuando se trata de velocidades de carga pero, es un método efectivo y muy recomendable.

0

Publicidad debajo de los títulos de las entradas

De un tiempo a esta parte añadir publicidad en el blog está a la orden del día.
Blogger proporciona un gadget para este fin, sin embargo hay publicidad que no es de Adsense y tenemos la posibilidad de escoger los sitios donde mostrarla.



En el ejemplo de hoy trataremos de añadir la publicidad debajo de los títulos de las entradas.
Me ha gustado comprobar que aunque hablamos de añadir publicidad hay más posibilidades a la hora de añadir cualquier otro contenido, jugando con los estilos se puede conseguir cualquier cosa.
En cualquiera de los casos que veremos más adelante debemos situarnos en plantilla Edición de HTML  marcar para expandir la plantilla y buscar <data:post.body/> justo antes será el lugar donde añadiremos el código o script de nuestra publicidad.

» De esta forma se mostrará en todas las entradas

<!-- Contenido de publicidad -->
Aquí incluimos el código de la publicidad
<!-- Contenido de publicidad -->



CONTINUAR

0

El widget traductor de Bing

Microsoft Translator es el servicio de traducción de Bing. Allí, podemos encontrarnos con algunas herramientas que podemos agregar a nuestros sitios.

La más simple es una lista desplegable que nos lleva a la página principal del traductor:


Pero, más interesante, es el widget que podemos incorporar y que realizará traducciones en tiempo real sin salir de nuestro sitio.



Entramos en la página, escribimos la dirección URL de nuestro sitio, el lenguaje base; seleccionamos el ancho y los colores; aceptamos las condiciones y se generá el código que deberemos copiar y pegar donde querramos mostrarlo, por ejemplo, en un elemento HTML:

REFERENCIAS:Pizcos Blog

0

Pixlr » Editor de imágenes



Pixlr es un editor de imágenes online completo y sencillo de utilizar. Una buena solución para los que no manejamos Photoshop o preferimos utilizar herramientas sin necesidad de instalar ningún software.






REFERENCIA:wwwhat´s new

0

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

0

Las vocales

Un lipograma es un texto en que, adrede, se evita utilizar alguna letra.



Oscar de la Borbolla es un escritor mexicano, profesor de metafísica y, su libro Las vocales malditas (1991), está considerado como uno de los más extraordinarios de la lengua española justamente por tener esa particularidad, cada uno de sus cinco cuentos está escrito exclusivamente con palabras que emplean la misma vocal.

Recientemente, la agencia publicitaria Ogilvy ha iniciado una campaña con uno de ellos.


ACantata a Satanás [+]



EEl hereje rebelde [+]



IMimí sin bikini [+]



OLos locos somos otro cosmos [+]



UUn gurú vudú [+]

0

La vida sin amor



0

Huje Tower

Click en la imagen para jugar.