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 que se desplazaba por la pantalla. Este elemento nunca se agregó al HTML la especificación y la compatibilidad variaban 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, tenía el propósito de hacer visible el contenido que desbordaba los límites del cuadro.
Parte de la razón por la que los navegadores nunca lo implementaron por completo, aparte de una fuerte opinión personal, fue que se considera un efecto visual y, como tal, no debe estar definido por el HTML, que define el estructura. En cambio, los efectos visuales o de presentación deben ser administrados por CSS. Y CSS3 agrega el módulo de marquesina para controlar cómo los navegadores agregan el efecto marquesina a los elementos.
Nuevas propiedades de CSS3
CSS3 agrega cinco nuevas propiedades para ayudar a controlar cómo se muestra su contenido en la marquesina: estilo de desbordamiento, estilo de marquesina, recuento de reproducción de marquesina, dirección de marquesina y velocidad de marquesina.
estilo desbordamiento
La propiedad overflow-style (que también discutimos en el artículo CSS Overflow) define el estilo preferido para los contenidos que desbordan el cuadro de contenido. Si establece el valor en línea de marquesina o bloque de marquesina, su 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 afuera). Las opciones son Desplazarse, deslizar y alternar. El desplazamiento comienza con el contenido completamente fuera de la pantalla y luego se mueve a través del área visible hasta que vuelve a estar completamente fuera de la pantalla. La diapositiva comienza con el contenido completamente fuera de la pantalla y luego se mueve 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 alternativo rebota de lado a lado, deslizándose hacia adelante y hacia atrás.
recuento de juegos de marquesina
Uno de los inconvenientes de utilizar el elemento MARQUEE es que la marquesina nunca se detiene. Pero con la propiedad de estilo marquee-play-count, puede configurar la marquesina para activar y desactivar el contenido un número específico de veces.
dirección de marquesina
También puede elegir la dirección en la que debe desplazarse el contenido en la pantalla. Los valores hacia adelante y hacia atrás se basan en la direccionalidad del texto cuando el estilo de desbordamiento es una línea de marquesina y hacia arriba o hacia abajo cuando el estilo de desbordamiento es un bloque de marquesina.
Detalles de la dirección de la marquesina
estilo desbordamiento |
Dirección del idioma | hacia adelante | contrarrestar |
|---|---|---|---|
línea de marquesina |
ltr | izquierda | derecho |
| rtl | derecho | izquierda | |
bloque de marquesina |
arriba | abajo |
velocidad de marquesina
Esta propiedad determina la rapidez con la que se desplaza el contenido en la pantalla. Los valores son lentos, normales y rápidos. La velocidad real depende del contenido y del navegador que lo muestra, pero los valores deben ser más lentos de lo normal, que son más lentos que rápidos.
Compatibilidad con el navegador de las propiedades de la marquesina
Puede que necesite utilizar prefijos de proveedor para que los elementos de marquesina CSS funcionen. Son los siguientes:
| CSS3 | Prefijo de proveedor |
|---|---|
overflow-x: marquesina-línea; |
overflow-x: -webkit-marquesina; |
estilo marquesina |
-webkit-estilo marquesina |
recuento de juegos de marquesina |
-webkit-marquesina-repetición |
marquesina-dirección: adelante | atrás; |
-webkit-marquee-direction: adelante | atrás; |
velocidad de marquesina |
-webkit-marquee-speed |
| sin equivalente | -webkit-marquesina-incremento |
La última propiedad le permite definir qué tan grandes o pequeños deben ser los pasos a medida que el contenido se desplaza en la pantalla en el marco.
Para que su marquesina funcione, primero debe colocar los valores prefijados por el proveedor y luego seguirlos con los valores de especificación CSS3. Por ejemplo, aquí está el CSS para una marquesina que desplaza el texto cinco veces de izquierda a derecha dentro de un cuadro de 200x50.
{
ancho: 200px; altura: 50px; espacio en blanco: nowrap;
desbordamiento: oculto;
overflow-x: -webkit-marquesina;
-webkit-marquee-direction: adelante;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: pequeño;
-webkit-marquesina-repetición: 5;
overflow-x: marquesina-línea;
marquesina-dirección: adelante;
estilo marquesina: desplazamiento;
velocidad de marquesina: normal;
recuento de juegos de marquesina: 5;
}