domingo, 12 de septiembre de 2010

Efecto marquesina.

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:






Ved también atributo color y efecto marquesina en barra de título.
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.

No hay comentarios:

Publicar un comentario