Aqueles de vostedes que escribiron HTML por moito tempo poden recordar o elemento. Este foi un elemento específico para o navegador que creou unha bandeira de desprazamento de texto en toda a pantalla. Este elemento nunca foi engadido á especificación HTML e soporte para ela variou amplamente nos navegadores. A xente moitas veces tiña opinións moi fortes sobre o uso deste elemento, tanto positivo como negativo. Pero se amaba ou odiaba, servía o propósito de facer visible o contido que desbordaba os límites da caixa.
Parte do motivo polo que nunca os exploradores implementaron completamente, ademais dunha forte opinión persoal, foi que se considera un efecto visual e como tal, non debe definirse polo HTML, que define a estrutura. En vez diso, os efectos visuais ou de presentación deben ser xestionados por CSS. E CSS3 engade o módulo de marquee para controlar como os navegadores engaden o efecto de marquee aos elementos.
Novas propiedades CSS3
CSS3 engade cinco novas propiedades para axudar a controlar como se mostra o contido na marquesina: estilo de desbordamento, estilo de marquee, marquee-play-count, marquee-direction e marquee-speed.
estilo de desbordamento
A propiedade estilo overflow (que tamén discutiu no artigo CSS Overflow) define o estilo preferido para os contidos que rebordan a caixa de contido. Se establece o valor para marquee-line ou marquee-block, o seu contido deslizarase cara a abaixo / dereita (marquee-line) ou up / down (marquee-block).
estilo de marquesina
Esta propiedade define como se moverá o contido (e fóra).
As opcións son desprazadas, diapositivas e alternativas. O desprazamento comeza coa pantalla de contido totalmente desactivada e, a continuación, móvese pola área visible ata que quede totalmente completamente fóra da pantalla. A diapositiva comeza co contido completamente fóra da pantalla e logo móvese ata que o contido se moveu completamente á pantalla e non hai máis contido para desprazar na pantalla.
Finalmente, os suplentes alternan o contido de lado a lado, deslizándose cara atrás e cara atrás.
marquee-play-count
Un dos inconvenientes de usar o elemento MARQUEE é que a marquesia nunca se detén. Non obstante, coa marca de estilo property-play-count pode configurar a marquesi para xirar o contido activado e desactivado por un número específico de veces.
marquee-direction
Tamén pode elixir a dirección que o contido debería desprazarse na pantalla. Os valores cara a adiante e cara atrás están baseados na direccionalidade do texto cando o estilo de overflow é a liña de marquee e arriba ou abaixo cando o estilo de overflow é marquee-block.
Detalles da carpa-dirección
| estilo de desbordamento | Dirección de idioma | adiante | inversa |
|---|---|---|---|
| marquee-line | ltr | esquerda | ben |
| rtl | ben | esquerda | |
| marquee-block | up | baixo |
marquee-speed
Esta propiedade determina a rapidez con que se desplaza o contido na pantalla. Os valores son lentos, normais e rápidos. A velocidade real depende do contido e do navegador que a mostre, pero os valores deben ser lentos é máis lento que o normal, que é máis lento que rápido.
Apoio ao navegador das propiedades da marca
Pode ter que usar prefixos de vendedores para que funcionen os elementos de marcación CSS. Son os seguintes:
| CSS3 | Prefixo do vendedor |
|---|---|
| overflow-x: marquee-line; | overflow-x: -webkit-marquee; |
| estilo de marquesina | -webkit-marquee-style |
| marquee-play-count | -webkit-marquee-repetición |
| marquee-direction: forward | reverse; | -webkit-marquee-direction: forwards | backwards; |
| marquee-speed | -webkit-marquee-speed |
| sen equivalente | -webkit-marquee-increment |
A última propiedade permítelle definir o tamaño ou o tamaño dos pasos que se deben facer a medida que o contido se desprácese na pantalla na marquesina.
Para ter a súa marquesina en funcionamento, primeiro debe colocar os valores prefixados do vendedor e logo seguilos cos valores de especificación CSS3. Por exemplo, aquí está a CSS para unha carpa que desprázase o texto cinco veces de esquerda a dereita dentro dunha caixa de 200x50.
{
ancho: 200 px; altura: 50 píxeles; espazo en branco: nowrap;
desbordamento: oculto;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: forwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: pequeno;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: forward;
marquee-style: scroll;
marquee-speed: normal;
marquee-play-count: 5;
}