Mi?rcoles, 25 de abril de 2012

Para colocar textos deslizantes, es decir que tengan movimiento, dentro de un escrito o de una página, podemos utilizar varios códigos dependiendo de lo que deseemos hacer. Te pongo varios ejemplos, entre ellos el que tengo a la derecha de ésta misma página, donde pongo los especiales:

Este es el más sencillo. Se mueve de derecha a izquierda y puedes colocar lo que desees dentro de él. Desde texto hasta imágenes.


TEXTO DESLIZANTE

<marquee> Retazos y puntadas</marquee>

IMAGEN DESLIZANTE

<marquee> <img style="cursor:pointer; cursor:hand;width: 149px; height: 89px;" src="http://www.picgifs.com/name-graphics/l/laura/name-graphics-laura-864500.gif" border="0" alt="" /></marquee>

Por supuesto que puedes agregar más texto o imágenes o combinar ambas. Sólo cambia lo rojo por tus propios textos e imágenes.

Si quieres variar la altura de la imágen, cambia lo amarillo. si quieres variar el ancho de tu imágen, cambia lo azul.

Puedes ver el resultado aquí: Texto deslizante


TEXTO DESLIZANTE VARIANDO EL COLOR, TIPO Y TAMAÑO DE LA LETRA

<div   style="  font-style: normal; font-variant: normal; line-height: normal; font-weight: normal; font-family:Georgia, serif;font-size:100%;" align="center"><marquee style="POSITION: absolute; FILTER: glow(color:#D3BE75); LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; COLOR: #d41a1f; FONT-SIZE: 20pt; RIGHT: 205px; FONT-WEIGHT: normal; TOP: 120px" scrollamount="4" scrolldelay="15" height="95" width="785"><span>Retazos y puntadas</span></marquee>

Lo azul es la posición: absolute si quieres que esté a la derecha, izquierda, centro, etc. Relative si deseas que se acomode dentro de un texto.

Lo amarillo es el filtro y brillo, si deseas que tenga tu texto un ligero sombreado.

Lo violeta son los atributos de la fuente o letra: tamaño (size), color, font-style (negrita, subrayado, inclinada,etc.), font-family (georgia, verdana, etc.)

Lo agua son márgenes de la fuente: right (derecha), top (arriba), etc.

Lo naranja son los atributos del scroll: height (altura) width (ancho) es decir, lo que mide el espacio en donde se va a reproducir tu texto.

Puedes ver el resultado aquí: Texto deslizante

<MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Gracias por visitar este sitio web.
</MARQUEE>

TEXTO DESLIZANTE VERTICAL SIN VINCULO

En éste texto puedes variar los atributos de la fuente, de la tabla en donde se encuentra y el mensaje a tu gusto.


<marquee id="iescroller" direction="up" width="50%" height="150" scrollamount="2" scrolldelay="100" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red; border-image: initial; background-color: black; ">
<div align="center">Bienvenido a Retazos y puntadas</div>

<div align="center">Retazos de mi vida y puntadas que han dejado en mi corazón</div>

<div align="center">Espero encuentres lo que buscas</div>

</marquee></div>

Puedes ver el resultado aquí: Texto deslizante

TEXTO DESLIZANTE VERTICAL CON VINCULO

En éste texto, se pueden incluir los vínculos hacia otras páginas

<marquee id="iescroller" direction="up" width="50%" height="150" scrollamount="2" scrolldelay="100" style="font-weight: normal; font-size: 100%; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red; border-image: initial; background-color: green; "><span><span><div align="center"><span>LA WEB DE RETAZOS Y PUNTADAS</span></div><a href="http://retazosypuntadas.blogspot.com/">[Ver...]</a>

</span><div align="center"><span>DISEÑA TU PAGINA</span></div><span><a href="http://comodisenartupagina.blogspot.com/">[ir...]</a></span></span></marquee></div>

Puedes ver el resultado aquí: Texto deslizante


Espero te sean útiles. Prueba a hacer más combinaciones hasta encontrar lo que desees para tu web.



Tags: texto deslizante, marquee, scroolbar

Publicado por lauraguilaramirez @ 9:57  | Textos
Comentarios (0)  | Enviar
Comentarios