Aqueles de vocês que já escrevem HTML há muito tempo podem se lembrar do elemento. Este era um elemento específico do navegador que criava um banner de texto de rolagem na tela. Este elemento nunca foi adicionado ao HTML a especificação e o suporte variam amplamente entre os navegadores. Muitas vezes as pessoas tinham opiniões muito fortes sobre o uso desse elemento - tanto positivas quanto negativas. Mas, quer você amasse ou odiasse, ela servia ao propósito de tornar visíveis os conteúdos que ultrapassavam os limites da caixa.
Parte do motivo pelo qual nunca foi totalmente implementado pelos navegadores, além de uma forte opinião pessoal, foi que é considerado um efeito visual e, como tal, não deve ser definido pelo HTML, que define o estrutura. Em vez disso, os efeitos visuais ou de apresentação devem ser gerenciados por CSS. E CSS3 adiciona o módulo marquee para controlar como os navegadores adicionam o efeito marquise aos elementos.
Novas propriedades CSS3
CSS3 adiciona cinco novas propriedades
para ajudar a controlar como seu conteúdo é exibido no letreiro: estilo overflow, estilo letreiro, contagem de reprodução do letreiro, direção do letreiro e velocidade do letreiro.estilo overflow
A propriedade overflow-style (que também discutimos no artigo CSS Overflow) define o estilo preferido para conteúdos que excedem a caixa de conteúdo. Se você definir o valor como marquee-line ou marquee-block, seu conteúdo deslizará para dentro e para fora para a esquerda / direita (marquee-line) ou para cima / para baixo (marquee-block).
estilo marquise
Esta propriedade define como o conteúdo será movido para exibição (e para fora). As opções são rolagem, slide e alternativo. A rolagem começa com o conteúdo completamente fora da tela e, em seguida, move-se pela área visível até que esteja completamente fora da tela novamente. O slide começa com o conteúdo completamente fora da tela e então se move até que o conteúdo tenha sido totalmente movido para a tela e não haja mais conteúdo para deslizar na tela. Por último, o alternate salta o conteúdo de um lado para o outro, deslizando para frente e para trás.
marquee-play-count
Uma das desvantagens de usar o elemento MARQUEE é que o letreiro nunca para. Mas com a propriedade de estilo marquee-play-count, você pode configurar a marquee para girar o conteúdo ligado e desligado por um número específico de vezes.
marquee-direction
Você também pode escolher a direção em que o conteúdo deve rolar na tela. Os valores para frente e para trás são baseados na direcionalidade do texto quando o estilo de estouro é a marca de seleção e para cima ou para baixo quando o estilo de estouro é o bloco de seleção.
Detalhes de direção do letreiro digital
estilo overflow |
Direção da Língua | frente | marcha ré |
|---|---|---|---|
marquee-line |
ltr | deixou | direito |
| rtl | direito | deixou | |
letreiro |
pra cima | baixa |
velocidade do letreiro
Esta propriedade determina a rapidez com que o conteúdo rola na tela. Os valores são lentos, normais e rápidos. A velocidade real depende do conteúdo e do navegador que o exibe, mas os valores devem ser lentos, é mais lento que o normal, ou seja, mais lento que rápido.
Suporte do navegador das propriedades do letreiro digital
Você pode precisar usar prefixos de fornecedores para fazer os elementos CSS do letreiro funcionarem. Eles são os seguintes:
| CSS3 | Prefixo do fornecedor |
|---|---|
overflow-x: letreiro; |
overflow-x: -webkit-marquee; |
estilo marquise |
-webkit-marquee-style |
marquee-play-count |
-webkit-marquee-repetition |
direção do letreiro: frente | reverso; |
-webkit-marquee-direction: para frente | para trás; |
velocidade do letreiro |
-webkit-marquee-speed |
| sem equivalente | -webkit-marquee-increment |
A última propriedade permite que você defina o quão grandes ou pequenas as etapas devem ser conforme o conteúdo rola na tela no letreiro.
Para que seu letreiro digital funcione, você deve colocar os valores prefixados do fornecedor primeiro e depois segui-los com os valores de especificação CSS3. Por exemplo, aqui está o CSS para um letreiro que rola o texto cinco vezes da esquerda para a direita dentro de uma caixa de 200x50.
{
largura: 200px; altura: 50px; espaço em branco: nowrap;
estouro: oculto;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: avança;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-incremento: pequeno;
-webkit-marquee-repetition: 5;
overflow-x: letreiro;
direção do letreiro: para frente;
estilo letreiro: rolagem;
velocidade do letreiro: normal;
marquee-play-count: 5;
}