Aquellos de ustedes que han estado escribiendo HTML durante mucho tiempo pueden recordar el elemento. Este era un elemento específico del navegador que creaba un banner de texto desplazándose por la pantalla. Este elemento nunca se agregó a la especificación HTML y el soporte para ello varió ampliamente entre los navegadores. La gente a menudo tenía opiniones muy fuertes sobre el uso de este elemento, tanto positivas como negativas. Pero tanto si lo amaba como si lo odiaba, servía para hacer visible el contenido que rebasaba los límites de la caja.

Parte de la razón por la que nunca fue completamente implementado por los navegadores, aparte de la fuerte opinión personal, fue que se considera un efecto visual y como tal, no debería ser definido por el HTML, que define la estructura. En su lugar, los efectos visuales o de presentación deben ser gestionados por el CSS. Y CSS3 añade el módulo marquesina para controlar cómo los navegadores añaden el efecto marquesina a los elementos.

Nuevas propiedades de CSS3

CSS3 añade cinco nuevas propiedades para ayudar a controlar la forma en que el contenido se muestra en la carpa: estilo de desbordamiento, estilo de carpa, recuento de juego de carpa, dirección de carpa y velocidad de carpa.

overflow-style
La propiedad overflow-style (que también he discutido en el CSS Overflow) define el estilo preferido para los contenidos que desbordan la caja de contenido. Si ajusta el valor a línea de marquesina o bloque de marquesina, el contenido se deslizará hacia la izquierda/derecha (línea de marquesina) o hacia arriba/abajo (bloque de marquesina).

estilo marquesina
Esta propiedad define cómo se moverá el contenido a la vista (y hacia fuera). Las opciones son scroll, slide y alternar. El desplazamiento comienza con el contenido completamente fuera de la pantalla, y luego se desplaza a través del área visible hasta que todo vuelva a estar completamente fuera de la pantalla. La diapositiva comienza con el contenido completamente fuera de la pantalla y luego se desplaza hasta que el contenido se ha movido completamente a la pantalla y no queda más contenido para deslizar en la pantalla. Por último, el contenido rebota de un lado a otro, deslizándose hacia adelante y hacia atrás.

marquee-play-count
Una de las desventajas de utilizar el elemento MARQUEE es que la carpa nunca se detiene. Pero con el estilo marquee-play-count de la propiedad puede configurar la marquesina para que rote el contenido de encendido y apagado para un número específico de veces.

dirección de carpa
También puede elegir la dirección en la que el contenido debe desplazarse por la pantalla. Los valores hacia adelante y hacia atrás se basan en la direccionalidad del texto cuando el estilo de desbordamiento es de línea de marquesina y hacia arriba o hacia abajo cuando el estilo de desbordamiento es de bloque de marquesina.

Detalles de la dirección de la carpa

Overflow-styleLenguaje Dirección hacia adelante-invertir-línea de marqueteríatriadirecta-derechaizquierda-marquetería-bloqueo hacia abajo

velocidad de marquesina
Esta propiedad determina la rapidez con la que el contenido se desplaza por la pantalla. Los valores son lentos, normales y rápidos. La velocidad real depende del contenido y del navegador que lo muestre, pero los valores deben ser lentos, es decir, más lentos de lo normal, que es más lento que rápido.

Soporte del navegador para las propiedades de la carpa

Puede que necesite utilizar prefijos de proveedor para que los elementos de la marquesina CSS funcionen. Son los siguientes:

CSS3Vendor Prefixoverflow-x: marquee-line; overflow-x: -webkit-marquee;marquee-style-webkit-marquee-style-quee-play-count-webkit-marquee-repetitionmarquee-direction: forward|reverse;-webkit-marquee-direction: forward|backwards; marquee-speed-webkit-marquee-speed-marquee-speed-sin-warquee-sin-webkit-marke

La última propiedad le permite definir cuán grandes o pequeños deben ser los pasos a medida que el contenido se desplaza por la pantalla de la carpa.

Para que su carpa funcione, debe colocar primero los valores prefijados del proveedor y luego seguirlos con los valores de especificación CSS3. Por ejemplo, aquí está el CSS de una marquesina que desplaza el texto cinco veces de izquierda a derecha dentro de una caja de 200×50.

{
> anchura: 200px; altura: 50px; espacio en blanco: nowrap;
desbordamiento: oculto;
overflow-x:-webkit-marquee;
-dirección de la carpa: hacia delante;
. -webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: pequeño;
-…y la repetición de la carpa: 5;
overflow-x: línea de la marquesina;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>)) dirección de la carpa: hacia adelante;
estilo de marquesina: scroll;
velocidad de la carpa: normal;
marquesina de juego y recuento: 5;