Marquesina en CSS - Guía para principiantes
Marquee se introdujo por primera vez en Internet Explorer y fue muy popular en los años 90 antes de que W3C finalmente decidiera excluirlo del elemento estándar HTML debido a problemas de uso. Los diseñadores web fueron alentados a no usar la etiqueta..
Sin embargo, sorprendentemente, la marquesina ahora está regresando, no en una etiqueta Formato como lo hizo, pero en un módulo CSS. Este módulo está disponible como parte de la especificación CSS de Webkit y el W3C actualmente también está trabajando en un módulo similar. Sin embargo, dado que la versión W3C aún se encuentra en la etapa de recomendación del candidato, aún no es aplicable. Por lo tanto, en este momento, solo cubriremos el de la especificación de Webkit.
La sintaxis
En primer lugar, la marquesina se puede definir utilizando la siguiente sintaxis abreviada.
-webkit-marquee: [dirección] [incremento] [repetición] [estilo] [velocidad]
Creo que cada uno de los valores necesarios en la sintaxis anterior se explica por sí mismo, o puede encontrarlos suficientemente explicados en esta documentación. Por lo tanto, si desea profundizar en cómo funcionará esta sintaxis, siempre puede consultar la documentación primero..
Luego, únase a nosotros a medida que procedemos a crear algunos ejemplos reales y vea cómo funciona..
Ejemplo 1: Desplazar el texto
De acuerdo, en el primer ejemplo crearemos el movimiento clásico de la marquesina que hace que el texto se mueva de derecha a izquierda..
Vamos a crear nuestra marca de texto como a continuación:
Lollipop topping limón gotas jujubes apliqueke tarta de regaliz regaliz brotes de sésamo.
Luego define el marco con la siguiente sintaxis.
-webkit-marquee: auto medio infinito scroll normal; overflow-x: -webkit-marquee;
Cuando la dirección de marquesina se establece en auto, por defecto se moverá de derecha a izquierda; alternativamente puede cambiar este valor a izquierda. Observe también que el desbordamiento-x la propiedad tiene que ser configurada para -webkit-marquesina De modo que el contenido siempre actuará como uno. Si omite esta propiedad, el texto no se moverá.
Ver la demo.
Ejemplo 2: rebotar de un lado a otro
En el segundo ejemplo intentaremos darle un estilo diferente a la marquesina. Esta vez usamos alterno en lugar de voluta y cambiar el valor de dirección a Correcto. De esa manera, la marquesina se moverá de izquierda a derecha y luego rebotará de un lado a otro..
-webkit-marquee: auto medio infinito alternativo normal; overflow-x: -webkit-marquee;
Ver la demo
Ejemplo 3: mover el texto hacia arriba
Y para el último ejemplo, cambiaremos la dirección de la marquesina para avanzar hacia arriba. Hay dos dirección valores para hacerlo; puedes cambiar el valor a arriba o adelante.
Personalmente no entiendo por qué el Webkit proporcionó dos valores que esencialmente hacen lo mismo, ya que creo que eso podría generar confusión para algunas personas..
-webkit-marquee: arriba medio infinito scroll normal; overflow-x: -webkit-marquee;
Ver la demo
Además, he compilado algunos ejemplos más, pero serán abrumadores si todos se explican aquí..
Sin embargo, puede ver toda la demostración y descargar las fuentes de los enlaces a continuación..
- Manifestación
- Descargar fuente
Reflexión final y referencias
La primera vez que me sorprendió es que todavía hay interés en la marquesina, que pensé que había llegado a su fin. Esto también me llevó a cuestionar cómo un módulo CSS como este va a ser útil. De hecho, todos los navegadores siguen apoyando el legado de etiqueta.
¿Entonces, qué piensas? ¿Es la marquesina aún relevante a esta edad y sería útil en el diseño web moderno??
Si todavía tienes curiosidad por este tema de la marquesina, puedes visitar algunas de las siguientes referencias:
- Referencia de CSS de Safari
- Webkit generador de marquesina
- Documentación integral de lo antiguo.
etiqueta de Sitepoint. - Y siempre hay un generador para casi todo, incluido este generador de marquesina..
