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. Esse elemento nunca foi adicionado à especificação HTML e o suporte para ele variou 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, é que é considerado um efeito visual e, como tal, não deve ser definido pelo HTML, que define a estrutura. Em vez disso, os efeitos visuais ou de apresentação devem ser gerenciados por CSS. E o CSS3 adiciona o módulo de letreiro para controlar como os navegadores adicionam o efeito de letreiro aos elementos.
Novas propriedades CSS3
CSS3 adiciona cinco novas propriedades para ajudar a controlar como seu conteúdo é exibido no letreiro: estilo de estouro, estilo de 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 rolar, deslizar e alternar. 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 se movido totalmente 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 definir 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
overflow-style |
Direção da Língua | frente | marcha ré |
|---|---|---|---|
marquee-line |
ltr | deixou | direito |
| rtl | direito | deixou | |
marquee-block |
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 do que o normal, que é mais lento do que rápido.
Suporte do navegador das propriedades do letreiro digital
Você pode precisar usar prefixos de fornecedor para fazer os elementos CSS marquee funcionarem. Eles são os seguintes:
| CSS3 | Prefixo do fornecedor |
|---|---|
overflow-x: marquee-line; |
overflow-x: -webkit-marquee; |
marquee-style |
-webkit-marquee-style |
marquee-play-count |
-webkit-marquee-repetition |
marquee-direction: forward|reverse; |
-webkit-marquee-direction: forwards|backwards; |
marquee-speed |
-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 sua marca de seleção 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 200×50. {
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;
}
type = “código”>
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Criação de conteúdo rolável em HTML5 e CSS3 sem MARQUEE.” ThoughtCo, maio. 14 de 2021, thinkingco.com/scrollable-content-html5-css3-without-marquee-3467007.
Kyrnin, Jennifer. (2021, 14 de maio). Criação de conteúdo rolável em HTML5 e CSS3 sem MARQUEE. Obtido em https://www.thoughtco.com/scrollable-content-html5-css3-without-marquee-3467007
Kyrnin, Jennifer. “Criação de conteúdo rolável em HTML5 e CSS3 sem MARQUEE.” ThoughtCo. https://www.thoughtco.com/scrollable-content-html5-css3-without-marquee-3467007 (acessado em 30 de maio de 2021).
-
Como definir o estilo de IFrames com CSS
-
Como usar CSS para centralizar imagens e outros objetos HTML
-
Marca em Web Design
-
Como inserir linhas em HTML com a tag HR
-
Faça os elementos da página da web aparecerem e desaparecerem gradualmente com CSS3
-
Como esticar uma imagem de fundo para caber em uma página da web
-
O que são linguagens de marcação?
-
A diferença entre CSS2 e CSS3
-
HTML Scroll Box
-
Como construir um layout de 3 colunas em CSS
-
Usando HTML5 para exibir vídeo nos navegadores atuais
-
Usando atributos do elemento HTML TABLE
-
O que é uma folha de estilo do usuário?
-
Como flutuar uma imagem à esquerda do texto em uma página da web
-
Tela HTML5: o que é e por que é usado
-
Casa
Siga-nos
-
Facebook
Facebook -
Flipboard
Flipboard
- Sobre nós
- Anunciar
- Política de Privacidade
- Política de Cookies
- Carreiras
- Diretrizes editoriais
- Contato
- Termos de uso
- Aviso de privacidade da Califórnia
- Privacidade da UE
Seus direitos de privacidade
A ThoughtCo e nossos parceiros terceirizados usam cookies e processam dados pessoais como identificadores exclusivos com base em seu consentimento para armazenar e / ou acessar informações em um dispositivo, exibir anúncios personalizados e para medição de conteúdo, percepção do público e desenvolvimento de produtos. Para alterar ou retirar suas opções de consentimento para a ThoughtCo.com, incluindo seu direito de contestar quando um interesse legítimo é usado, clique abaixo. A qualquer momento, você pode atualizar suas configurações por meio do link “Privacidade da UE” na parte inferior de qualquer página. Essas escolhas serão sinalizadas globalmente para nossos parceiros e não afetarão os dados de navegação. Lista de parceiros (fornecedores)
Nós e nossos parceiros processamos dados para:
Digitalize ativamente as características do dispositivo para identificação. Use dados precisos de geolocalização. Armazene e / ou acesse informações em um dispositivo. Selecione o conteúdo personalizado. Crie um perfil de conteúdo personalizado. Avalie o desempenho do anúncio. Selecione anúncios básicos. Crie um perfil de anúncios personalizados. Selecione anúncios personalizados. Aplique pesquisas de mercado para gerar insights sobre o público. Avalie o desempenho do conteúdo. Desenvolva e melhore produtos. Lista de parceiros (fornecedores)
-