Las propiedades "marquee" - Personalizando con CSS

martes, 19 de enero de 2010
Este código, llamado marquee o marquesina permite crear numerosos efectos dinámicos en textos, palabras, imágenes, etc., dándoles un toque más elegante y llamativo. Hay diversidad de combinaciones y variaciones con ésta propiedad, aquí os mostramos algunas de las más importantes:

1. Texto simple en movimiento:
Para ello utilizaremos el siguiente código:
<marquee>Texto en movimiento aquí</marquee>
Ejemplo:
Texto de ejemplo

Variaciones y opciones:
A partir del código anterior,  la propiedad "marquee" puede ser personalizada más a fondo:
-Se puede añadir lo siguiente (personalizaremos la dirección del movimiento del texto: "up">arriba, "down">abajo, "right">derecha, "left">izquierda):

        <marquee direction="up">Texto en movimiento aquí</marquee>

Ejemplo:

Texto de ejemplo

-También podemos agregar el siguiente código (ahora, además de un movimiento de abajo a arriba, el texto "rebotará" con los límites que hayan a su alrededor):

       <marquee direction="up" behavior="alternate">Texto en movimiento aquí</marquee>

Simplemente hemos personalizado un poco más el código, añadiendo "alternate" después de "behavior". Además de ésa palabra (alternate) existen otras que podemos colocar en el sitio explicado anteriormente:

Ejemplo:

Texto de ejemplo

2. Creando y diseñando una marquesina para el blog:
 Tras conocer unos aspectos básicos de la propiedad marquee, podemos empezar a diseñar una marquesina más compleja, poniendo, en este caso, un color de fondo:
<marquee bgcolor=#58FA58>Texto en movimiento aquí</marquee>
Ejemplo:
Texto de ejemplo

-Podemos poner un borde:

<marquee style="border:#04B404 3px SOLID">Texto en movimiento aquí</marquee>

Ejemplo:

Texto de ejemplo

-Podemos poner un borde y un fondo:

<marquee style="border:#04B404 3px SOLID; background-color:#0080FF;">Texto en movimiento aquí</marquee>
Ejemplo:

Texto de ejemplo

-Y podemos hacer que esa marquesina, además de fondo y borde, posea la propiedad de rebotar (alternate):
 
<marquee behavior="alternate" style="border:#04B404 3px SOLID; background-color:#0080FF;">Texto en movimiento aquí</marquee>
Ejemplo:

Texto de ejemplo

-Por último, podemos "unir" varios códigos: la dirección de desplazamiento del texto, el color del texto, el "rebote" (alternate), un borde y un color de fondo:


    <font-color="#FFFFFF"><marquee direction="up" behavior="alternate" style="border:#04B404 3px SOLID; background-color:#0080FF;">Texto en movimiento aquí</marquee>
Ejemplo:

Texto de ejemplo

La verdad es que se pueden hacer infinidad de cosas con este simple código, que siempre puede ser de mucha utilidad.

¡¡Saludos!!

22 comentarios:

  • ordago13

    Mítico marquee...
    ya lo conocía está genial

  • La Trucoteca

    ¡Hola Vku y Ordago!
    La verdad es que se pueden hacer cosas muy chulas con esta propiedad :) :)
    ¡¡¡Muchos saludos y gracias por vuestra visita!!!

  • La Trucoteca

    Hola Juan!
    Nos encanta que te haya servido y gustado, muchas gracias a ti por la visita :) :)
    ¡Nos vemos!

  • Perdon que os pregunt pero ¿Que edad teneis? vuestro blog tiene un diseño espectacular... tal ves sea mejor que os dediqueis al diseño de plantillas ya que destacais mucho(llegariais lejos) y no a los trucos .

    saludos!

  • La Trucoteca

    Hola Pelícano!
    Bueno, la verdad es que el diseño gráfico es una de nuestras grandes aficiones también, pero de momento (aunque ya hayan algunos proyectos por ahí) no nos hemos planteado la idea de diseñar plantillas :)
    Por cierto, te podemos decir que somos jóvenes :D
    ¡Un saludo y esperamos verte por aquí otro día!

  • Lo desia porque esque pienso q os defendeis mejor en el diseño que en los trucos. Conozco muchos blogs de trucos mejores que este pero pocos con este diseño.

    Pensarlo bien pero os mereceria la pena diseñar y escribir tutoriales d disenio y no d trucos. Tambien podriais disenar plantillas y ofreserlas en "la trucoteca".

    ¿teneis 13 años? creo haberlo leido x ai.

    saludos otra ves.

  • La Trucoteca

    Hola de nuevo Pelícano
    Bueno bueno, nos alegra que te guste el diseño, y, de hecho, te podemos adelantar que dentro de poco comenzaremos con un blog de diseño gráfico y web, con recursos y tutoriales precisamente relacionados con ese tema, pero es un secreto xD
    Estás invitado cuando lo inauguremos a pasarte por allí, y, de hecho, esperamos verte :D
    ¡Un saludo y esperamos conocer tu identidad!

  • Claro, eso es lo que debeis aser. Ya vereis como es mucho mejor y destacais mucho mas, esque con trucos para blogger e general ai mejores sitios web, (mucho mejores) pero con trucos d diseño ay pocos.

    Cuando lo hagais os visitare amenuo.

    saludos y suert

  • La Trucoteca

    Por supuesto, pronto (tenemos muchas ganas), estrenaremos ese nuevo blog, y quien sabe, puede que de vez en cuando pongamos alguna que otra plantilla o creación...
    De todas formas, con La Trucoteca de Blogs también disfrutamos, y no creemos que se puedan calificar en buenos y malos asi, cada uno tiene sus cosas...
    Por cierto, ya sabias la edad, ¿nooo? =)
    Jeje, bueno, esperamos verte muy pronto de nuevo por aqui. ¡Muchos saludos!

  • Unknown

    Muchas gracias, estaba buscando este codigo hace mucho, para usarlo en vez de texto usar imagenes y por fin lo encontre.

  • La Trucoteca

    Hola Julio!
    Nos alegra mucho que te haya servido, gracias por tu comentario :)
    ¡Nos vemos!

  • INCLUSIVO NOTICIAS

    hola alguien podria decirme como hacer un rotador de noticias en blogger- somos un grupo de jovenes ciegos y sordos que intentamos progresar- esperamos su colaboracion --gracias

  • La Trucoteca

    Hola Limite Noticias, ¿puedes darnos un poco más de información sobre lo que quieres exactamente?

    Saludos!

  • AD

    hola queria saber como hacer para que aparezcan los titulos de nuestros post recientes ,en la marquesina y se detenga cuando pasamos el mouse
    creo que seria lo que te preguntaron antes tambien..
    es para un blog de noticias q intento construir
    muchas gracias espero tu ayuda

  • La Trucoteca

    Hola La Siberia!
    Creemos que hemos hallado la solución a lo que pretendes conseguir, es la siguiente:

    http://www.bloggerbits.com/2010/01/show-your-recents-posts-in-marqueescrolling-text/

    Está en inglés, pero si usas el traductor, seguro que alcanzas tu objetivo. Aún así, por favor, envíanos un e-mail a "latrucoteca(arroba)gmail.com" si hay algo que no comprendas :)
    Un saludo!

  • descargas para todos

    Hola, muchas gracias.. ya he insertado el marquee en mi sitio... peo me gustaría poder modificar la velocidad del texto

  • La Trucoteca

    Hola Descargas para todos, para cambiar la velocidad del texto del marquee, debes incluir una propiedad: "scrollamount", de forma que quedaría así:
    <marquee scrollamount=25>
    Puedes ir cambiando el valor 25 por otro número (a más alto, mayor velocidad)

    Saludos!

  • UNAD Zona Caribe

    hola, quisiera saber como hago para que el texto que coloco en la etiqueta marquee con el atributo up comience desde la parte de arriba, quiero decir que cuando abran la pagina ya este el texto en pantalla y empiece a moverse. gracias

  • Jesús

    Buena información para mi css, justo lo que andaba buscando, 1saludo.

  • La Trucoteca

    Gracias, Jesús, por tu comentario :) Lamentablemente, parece ser que muchas de las propiedades personalizables del "marquee" se están quedando obsoletas en la mayoría de los navegadores actuales :/

    Saludos!

  • Muchas gracias por tus scripts, me han servido.Eres un buen bloggerista, ´aquello de lo que sabemos debemos compartirlo. Gracias por tu tiempo para investigar y colocar los detalles.
    Saludos. Desde Costa Rica. ALSE

  • Ir Arriba