Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Teste seu conhecimento 04

Publicado em: 2007-04-24 — 14.068 visualizacoes

abc em duas cores com CSS

abc em duas cores

A imagem acima é um screenshot da renderização das 23 letras do alfabeto dispostas em linha e em cores alternadas, vermelha e azul.

Este desafio número 4 consiste em obter a renderização mostrada na figura, usando HTML e CSS.

Regras gerais:

  1. Usar somente (X)HTML e CSS (sem scripts);
  2. Nao usar imagens;
  3. Nao colocar as letras individualmente dentro de um elemento HTML;
    p.ex.: <span>a</span><span>b</span><span>c</span><span>d</span>…;
  4. Não usar estilos inline;
  5. Não usar tabelas, frames ou iframes;
  6. Tanto a marcação como a folha de estilos deverão ser válidas;

Se você encontrar a solução mande para mim via mensagem pessoal e não poste a solução nos comentários, para que outros possam tentar. Para cada solução recebida eu postarei nos comentários informando o nome do autor e se a solução está certa.
Dentro de algumas semanas postarei a minha solução.
Ah! não se esqueça que você pode se inscrever para receber email informando quando novos comentários forem postados e assim acompanhar o desafio até a publicação da solução ao desafio.

Você participou e resolveu o desafio anterior?

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2007-04-24 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2007/04/24/abc-em-duas-cores-com-css/trackback no seu site.

12 comentários na matéria: “Teste seu conhecimento 04”

  1. BombermanNo Gravatar disse:

    Mas como ficou em ordem alfabética?

  2. DanielNo Gravatar disse:

    será postada a resposta ao desafio?

  3. Gustavo CardosoNo Gravatar disse:

    Cara, esses testes são apenas de estética? Porque semântica passou longe né? Quando vi pensei que fosse pra alternar as cores das letras num texto corrido. Mas se for apenas para efeitos visuais está legal, mas para usar de verdade é furada.

    Abraço!

  4. Thiago SouzaNo Gravatar disse:

    Estamos esperando o próximo…

    ..
    .

  5. MaujorNo Gravatar disse:

    Resposta do teste:

    CSS:
    <style type="text/css" media="screen">
    .corum, .cordois {
    font:1.4em "Courier New", Courier, monospace;
    position:absolute;
    letter-spacing:2.0em;
    }
    .corum {
    color:#00f;
    }
    .cordois {
    color:#f00;
    text-indent:1.33em;
    }
    </style>

    HTML:
    <div class="corum">acegikmoqsuxz</div>
    <div class="cordois">bdfhjlnpryvy</div>

    Nota: Você deve usar uma fonte da família de fontes monoespaçada.

  6. Márcio LeandroNo Gravatar disse:

    To louco pra ver a resposta.
    Podia publicar a resposta, já faz tempo que este teste está no ar.
    Abraço.

  7. Thiago SouzaNo Gravatar disse:

    Pessoas…
    Qdo vai ser publicada a resposta desse teste?

    Acho que é impossível de se fazer isso….
    kkk

  8. Wilson José MorgadoNo Gravatar disse:

    E a solução é… ?

    Gostaria de a ver publicada!

    Cumprimentos

  9. JeanNo Gravatar disse:

    Cara tu tem que olhar esse artigo que tu mesmo fez:
    http://www.maujor.com/blog/2006/05/18/dicas-desacreditar-blog/

  10. maria bonitaNo Gravatar disse:

    Maujor, estou besta com seu site. Parabéns! Sorry…(enviei ja outro contato).. sei.. mas estou boba mesmo.

    Obrigada e continue que nós agradecemos aqui.

  11. EduardoNo Gravatar disse:

    O site e o blog maujor é o melhor, me ajuda muito.
    Parabens pelo trabalho!

  12. MaujorNo Gravatar disse:

    @Lucas Ferreira, *** http://www.lucasferreira.com
    @Leonardo Ribeiro,
    @Márcio Skrabe,
    @João Paulo F. Sette, *** http://www.fechine.com
    @Tarciso Calderaro,
    @Raphael Martins, *** http://www.raphamartins.com
    @Flávio Mendes,
    @Edward Kishi,
    @Douglas F Rieger,

    Solução correta. Parabéns!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo