Marquee in CSS - Guia do iniciante
O Marquee foi introduzido pela primeira vez no Internet Explorer e foi muito popular nos anos 90, antes de o W3C decidir excluí-lo do elemento HTML padrão devido a problemas de usabilidade. Web designers foram encorajados a não usar a tag.
Surpreendentemente, o letreiro agora está voltando, não em uma tag formato como ele fez, mas em um módulo CSS. Este módulo está disponível como parte da especificação Webkit CSS e o W3C está atualmente trabalhando em um módulo semelhante também. No entanto, como a versão do W3C ainda está no estágio de Recomendação do Candidato, ela ainda não é aplicável. Então, neste momento, vamos cobrir apenas o da especificação Webkit.
A sintaxe
Primeiro de tudo, o letreiro digital pode ser definido usando a seguinte sintaxe abreviada.
-webkit-marquee: [direção] [incremento] [repetição] [estilo] [velocidade]
Cada um dos valores necessários na sintaxe acima, creio eu, é bastante auto-explicativo, ou então você pode encontrá-los suficientemente explicados nesta documentação. Então, se você quiser aprofundar como esta sintaxe vai funcionar, você pode sempre consultar a documentação primeiro.
Então, junte-se a nós à medida que avançamos para criar alguns exemplos reais e ver como isso acontece em ação.
Exemplo 1: rolando o texto
Tudo bem, no primeiro exemplo vamos criar o movimento clássico do letreiro que está fazendo o texto se mover da direita para a esquerda.
Vamos criar nossa marcação de texto como abaixo:
Pirulito no topo gotas de limão jujuba applicake torta de frutas azedo alcaçuz gergelim.
Em seguida, defina a marca de seleção com a seguinte sintaxe.
-webkit-marquee: auto media scroll infinito normal; overflow-x: -webkit-marquee;
Quando a direção do letreiro estiver definida como auto, por padrão, ele se moverá da direita para a esquerda; Alternativamente, você pode alterar este valor para esquerda. Observe também que o estouro-x propriedade tem que ser definido para -webkit-marquee para que o conteúdo sempre aja como um. Se você omitir essa propriedade, o texto não será movido.
Veja a demonstração.
Exemplo 2: Salte para frente e para trás
No segundo exemplo, tentaremos dar um estilo diferente ao letreiro. Desta vez nós usamos alternar ao invés de rolagem e mude o valor da direção para certo. Dessa forma, a marca se moverá da esquerda para a direita, em seguida, saltará para frente e para trás.
-webkit-marquee: auto medium infinito normal alternativo; overflow-x: -webkit-marquee;
Veja a demonstração
Exemplo 3: Mover o texto para cima
E para o último exemplo, vamos mudar a direção do letreiro para mover para cima. Existem dois direção valores para fazer isso; você pode alterar o valor para acima ou adiante.
Pessoalmente eu não entendo porque o Webkit forneceu dois valores que essencialmente fazem a mesma coisa, já que eu acho que isso poderia levar a confusão para algumas pessoas..
-webkit-marquee: rolagem média infinita normal; overflow-x: -webkit-marquee;
Veja a demonstração
Além disso, eu compilei mais alguns exemplos, mas eles serão esmagadores se todos forem explicados aqui.
Mas você pode ver toda a demonstração e baixar as fontes nos links abaixo.
- Demonstração
- Fonte de download
Pensamento Final e Referências
Fiquei surpreso pela primeira vez que ainda há interesse na marquise, que eu achava que tinha encontrado o seu fim. Isso também me levou a questionar como um módulo CSS como esse será útil. Na verdade, todo navegador ainda está apoiando o legado do tag.
Então, o que você acha? O letreiro ainda é relevante nesta idade e seria útil no design moderno da Web??
Se você ainda estiver curioso sobre esse material de destaque, visite algumas das seguintes referências:
- Referência CSS do Safari
- Gerador de letreiro Webkit
- Documentação abrangente do antigo
tag do Sitepoint. - E há sempre um gerador para quase tudo, incluindo este Marquee Generator.
