Aquellos de ustedes que han estado escribiendo HTML durante mucho tiempo pueden recordar el elemento. Este fue un elemento específico del navegador que creó una pancarta de texto de desplazamiento en la pantalla. Este elemento nunca se agregó a la especificación HTML y el soporte varió ampliamente entre los distintos navegadores. La gente a menudo tenía opiniones muy fuertes sobre el uso de este elemento, tanto positivo como negativo. Pero si lo amaba o lo odiaba, tenía el propósito de hacer visible el contenido que desbordaba los límites de la caja.
Parte de la razón por la que los navegadores nunca lo implementaron completamente, aparte de la fuerte opinión personal, fue que se considera un efecto visual y, como tal, no debe ser definido por el HTML, que define la estructura. En cambio, los efectos visuales o de presentación deben ser gestionados por CSS. Y CSS3 agrega el módulo de marquesina para controlar cómo los navegadores agregan el efecto de marquesina a los elementos.
Nuevas propiedades CSS3
CSS3 agrega cinco nuevas propiedades para ayudar a controlar cómo se muestra su contenido en el recuadro: estilo de desbordamiento, estilo carpa, marquee-play-count, dirección de la carpa y velocidad de la carpa.
Las opciones son Por último, el contenido alternativo rebota el contenido de lado a lado, deslizándose de un lado a otro. Es posible que deba usar prefijos de proveedores para que funcionen los elementos de marquesina de CSS. Son los siguientes: 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 recuadro. Para que su marco funcione, primero debe colocar los valores prefijados del 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.estilo de desbordamientolos estilo de desbordamiento La propiedad (que también analicé en el artículo Desbordamiento de CSS) 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 arriba / abajo (bloque de marquesina).estilo carpaEsta propiedad define cómo el contenido se moverá a la vista (y hacia afuera).voluta, diapositiva y alterno. El desplazamiento comienza con el contenido completamente fuera de la pantalla, y luego se mueve a través del área visible hasta que todo 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 ya no queda más contenido para deslizar en la pantalla.marquee-play-countUno de los inconvenientes de utilizar el MARQUESINA El elemento es que la carpa nunca se detiene. Pero con la propiedad de estilo marquee-play-count puede configurar la marquesina para que el contenido se active y desactive un número específico de veces.dirección de la carpaTambién puede elegir la dirección en la que debe desplazarse el contenido en la pantalla. Los valores adelante y marcha atrás se basan en la direccionalidad del texto cuando el estilo de desbordamiento es línea de marquesina y arriba o abajo cuando el estilo de desbordamiento es bloque de marquesina.Detalles de la marquesina-dirección
estilo de desbordamientoDireccion de idioma adelante marcha atrás línea de marquesinaltr izquierda Correcto rtl Correcto izquierda bloque de marquesina arriba abajo velocidad de la carpaEsta propiedad determina la rapidez con que el contenido se desplaza en la pantalla. Los valores son lento, normaly rápido. La velocidad real depende del contenido y del navegador que lo muestra, pero los valores deben ser lento es más lento que normal que es más lento que rápido.Soporte del navegador de las propiedades de marquesina
CSS3 Prefijo de proveedor overflow-x: marquee-line;overflow-x: -webkit-marquee;estilo carpa-webkit-marquee-stylemarquee-play-count-webkit-marquesina-repeticiónmarquesina-dirección: adelante | atrás;-webkit-marquee-direction: hacia adelante | hacia atrás;velocidad de la carpa-webkit-marquee-speedno equivalente -webkit-marquee-increment{ ancho: 200px; altura: 50px; espacio en blanco: nowrap; desbordamiento: oculto; overflow-x: -webkit-marquee; -webkit-marquee-direction: hacia adelante; -webkit-marquee-style: scroll; -webkit-marquee-speed: normal; -webkit-marquee-increment: pequeño; -webkit-marquesina-repetición: 5; overflow-x: marquee-line; marquesina-dirección: hacia adelante; marquesina de estilo: desplazamiento; velocidad de la carpa: normal; marquee-play-count: 5;}
