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

Você está no BLOG do Maujor. IR PARA O SITE

Teste seu conhecimento 09

Publicado em: 2009-11-9 — 22.089 visualizacoes

Alfabeto bicolor com CSS

DESAFIO ENCERRADO Confira as soluções.

alfabeto bicolor

A imagem acima é um screenshot da renderização do alfabeto em duas cores alternadamente.

Este desafio número 9 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. Não usar imagens;
  3. Não usar tabelas;
  4. Não usar estilos inline;
  5. Não usar hacks;
  6. A renderização deve ser no IE6+, Firefox3 e Opera10;
  7. Use as seguintes declarações para fontes:
    font-family: monospace;
    font-size:140%;
  8. Use as seguintes cores:
    vermelha – #f00
    azul – #00f
  9. Na marcação HTML use somente o elemento SPAN.

Se você encontrar a solucão mande para mim via email o arquivo .html
maujorcss[arroba]maujor[ponto]com – com a sua solução. E, não poste a solução nos comentários, para que outros possam tentar.

Desafio encerrado. Não envie soluções.

Para cada solução correta recebida eu postarei nos comentários informando o nome do autor.
Dentro de aproximadamente 30 dias, postarei a solução.
Ah! não se esqueça que você pode se inscrever para receber email informando quando novos comentários forem postados nos arquivos no Blog e assim acompanhar uma matéria de seu interesse.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2009-11-9 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/11/09/teste-seu-conhecimento-09/trackback no seu site.

37 comentários na matéria: “Teste seu conhecimento 09”

  1. marcelo portoesNo Gravatar disse:

    Vejo como meu html é fraco quando entro na rede e leio seus posts.

  2. Leo BalterNo Gravatar disse:

    No caso em que ele não especifica qual usar, uso vários atuais do mercado, exceto IE.

  3. LuizNo Gravatar disse:

    Qual o programa que vocês usam para ver o resultado final ?

  4. Rhamsés SoaresNo Gravatar disse:

    Não existe solução correta. Existe a mais correta para a situação que você se encontrar. O Maujor mostrou a solução mais alinhada com os padrões, mas que não facilita a acessiblilidade, isso ja mostra que a solução varia de caso a caso. Por isso que a web é esse caos de sobrinhos por aí…todo mundo fazendo de um jeito.

  5. Hugo FittipaldiNo Gravatar disse:

    Agora fiquei curioso. Qual a solução correta?

  6. Rhamsés SoaresNo Gravatar disse:

    Pelo exemplo do Diego Eis no Tableless, ele funciona do ie6 pra cima. Mas aí você seria, semanticamente, obrigado a usar table. O que no contexto geral ñ faz muito sentido eu acho.

  7. HazNo Gravatar disse:

    Se tivesse que fazer isso em um projeto real, dependendo do público alvo, eu provavelmente faria utilizando :nth-child(2n+1), e usaria jQuery pros outros browsers.

  8. James ClebioNo Gravatar disse:

    Bom pessoal,

    Com dois ou mais span, quem conseguiu a renderezição sugerida no desafio ganhou pontos. Só que o Maujor citou:

    “para desenvolver segundo os padrões não basta obter o efeito visual proposto, é preciso estudar com cuidado como marcar o documento.”

    Ao meu ver, se estivesse trabalhando em um projeto que tivesse uma necessidade igual a sugerida no desafio, jamais marcaria o meu documento com somente dois span, a menos que o alfabeto colocado ali não tivesse necessidade alguma de leitura por parte do usuário (algo bem improvável, certo?)…

    []’s

  9. ThiagoNo Gravatar disse:

    fazer pensando em acessibilidade ja é “ninja”…

  10. Allan BorgesNo Gravatar disse:

    Acho que se levarmos em conta que isso é um desafio para testar as habilidades,a acessabilidade ganha menos notoriedade.Então faça do jeito mais “ninja” possível.

  11. ThiagoNo Gravatar disse:

    Usei um span na cor azul e especifiquei color:#f00 no body, assim, quem não tinha span assumia vermelho, reduzi pela metade o numero de spans desnecessarios.

  12. Rhamsés SoaresNo Gravatar disse:

    Eu fui um dos que colocou para todas as letras. A diferença é que fica legível e acessível, mesmo que aumente o html e consequentemente o peso do arquivo. O que em uma aplicação real seria indiferente já que este arquivo de teste deu 1,41kb aproximadamente.

    http://www.rhamses.com.br/desafio.html

  13. HazNo Gravatar disse:

    Bom, eu montei com 2 SPANs, mas realmente a leitura, sem CSS, fica esquisita.

    Eu não sei se o IE6 reconhece o :first-letter, mas se reconhecer, poderíamos agrupar 2 letrar (em sequência) dentro de 1 SPAN, e colocar a :first-letter como blue.

  14. Leo BalterNo Gravatar disse:

    Aqui o que eu fiz: http://www.flyleo.com.br/desafio.html Meu único erro – acredito – foi o uso de letras maiúsculas. Usei apenas 2 spans

  15. Luiz GustavoNo Gravatar disse:

    Leandro, eu tinha feito assim:

    [span]a [span]b[/span] c [span]d[/span] e … [/span]

    span { azul }
    span span {vermelho}

    Isso também solucionaria o problema com leitor de tela.

  16. WillianNo Gravatar disse:

    Bom dia galera, eu fiz o teste aqui, consegui o resultado, mas usei mais recursos, nossa eu estava mó feliz por ter conseguido, mas quando abri o código pronto do majur, fiquei de cara comigo, puxa o cara matou a pau, usou pouco código numa malandragem de sobreposição q eu nem tinha pensado, puxa, muito bom mesmo… eu ainda chego lá, kkkk

  17. Luiz GustavoNo Gravatar disse:

    Leandro, no meu caso havia feito assim:

    a b c d e ….

    span { azul }
    span span {vermelho}

    ou algo do tipo, também solucionaria o problema do leitor de tela.

  18. ThiagoNo Gravatar disse:

    isso é relevante se pensarmos em acessibilidade.

  19. Allan BorgesNo Gravatar disse:

    EU usei somente 2 spans , owned !

  20. James ClebioNo Gravatar disse:

    Maujor,

    Usando a solução proposta por você (com somente 2 span) a renderização fica OK, porém não creio que essa solução seja aplicável a algum projeto real, já que dessa forma a sequência do alfabeto é desrespeitada (a c e g i k m…) – fica sem sentido, por exemplo, pra um usuário de leitor de tela…

    []’s

  21. leandroNo Gravatar disse:

    já q só três pessoas usaram 2 span, significa q existe outra resposta possivel, qual?

  22. ThiagoNo Gravatar disse:

    Show….
    mandou muito bem mesmo, espero que tenha mais desafios como este.

  23. Luiz LageNo Gravatar disse:

    Considerando a solução proposta, daria pra usar um único SPAN para 2a cor e sobreposição. O resto seria padrão no próprio BODY.

    Claro que isso seria o “cúmulo do enxugamento”.

  24. Rhamsés SoaresNo Gravatar disse:

    Esqueçam meu ultimo comentário. Agora que eu vi o link para a solução =P

  25. Rhamsés SoaresNo Gravatar disse:

    Já que o desafio acabou, quando você vai dar a sua versão do Desafio Maujor? Estou realmente interessado em saber como usando dois elementos é possivel fazer este mesmo efeito.

  26. Leo BalterNo Gravatar disse:

    🙁 Meu erro foi ter colocado as letras em maiusculas, certo?

    Mas gostei, espero o próximo desafio.

  27. MaujorNo Gravatar disse:

    Todas as soluções enviadas renderizaram letras do alfabeto coloridas alternadamente. Contudo é o detalhe que faz a diferença e não foram consideradas certas as soluções com:
    1-) Ausência de DOCTYPE no documento;
    2-) Uso de letras maiúsculas em lugar de minúsculas;
    3-) Tamanho de fonte diferente de 140%;
    4-) Use de elementos que não SPAN na marcação.
    5-) Alfabeto incompleto.

    Observações gerais:
    a-) Ficou evidente a falta de atenção com relação à marcação HTML em acordo com os padrões. A maioria das soluções utilizou mais de 40 elementos SPAN para obter o efeito, quando apenas 2 são necessários. (3 soluções apenas com 2 SPAN!)
    Várias soluções com SPAN aninhados, chegando a mais de 70 SPANs na marcação.
    Isto não invalidou a solução, mas para desenvolver segundo os padrões não basta obter o efeito visual proposto, é preciso estudar com cuidado como marcar o documento.

    b-) Cuidado com regras CSS para o elemento container. Os elementos-filho herdam certas propriedades. Observe um erro comum nas soluções:

    * { font-size: 140%;}
    span {font-size: 140%;} /* resultou em 140% de 140% = 196% */

    Uma solução pode ser vista neste link.
    Examine o código fonte.

  28. MaujorNo Gravatar disse:

    3a. Avaliação:
    Os autores das soluções em conformidade com as regras do desafio estão na cor vermelha.
    André Krumm;
    Diego Haz;
    Leonardo Balter;
    Pedro Henrique Dropa.

    O desafio está encerrado!

  29. Rhamsés SoaresNo Gravatar disse:

    @Marcelo

    Não quero dar spoilers do resultado, mas eu realmente fiquei curioso do porque de voce querer usar CSS3 para resolver este desafio. Te garanto que uma das formas de resolução ñ tem nada a ver com esta versão das folhas de estilo.

    abraços

  30. Marcelo de AndradeNo Gravatar disse:

    Hmm… vou esperar o resultado, mas pode me tirar uma duvida maujor ? pode utilizar css 3 ? qualquer versão ?

  31. Leo BalterNo Gravatar disse:

    Bem bacana o desafio. Vamos ver nos próximos resultados se eu me saí bem.

  32. Allan BorgesNo Gravatar disse:

    Epa,acertei!

  33. MaujorNo Gravatar disse:

    2a. Avaliação:
    Os autores das soluções em conformidade com as regras do desafio estão na cor vermelha.
    Alan Borges;
    Caio Lucena;
    Edmilson Silva;
    Hugo Fittipaldi Areas;
    James Clébio;
    Leonardo Souza;
    Rhamsés Soares;
    Rodrigo Capuski;
    Rodrigo Padovani;
    Thiago dos Santos Valentim.

    Nota: O desafio encerra hoje à noite.

  34. Bruno Henrique SteinNo Gravatar disse:

    Quero so ver os erros que o Maujor vai achar ai. (:

    Tambem tinha achado que me passou algo, pois nao houve grande dificuldades.

    /estou sem acentos 😡

  35. MaujorNo Gravatar disse:

    1a. Avaliação:
    Os autores das soluções em conformidade com as regras do desafio estão na cor vermelha.
    Bruno Henrique Stein;
    Denis Dib;
    Helena Freire;
    Leandro Alves Ferreira;
    Leonardo Antonioli;
    Luis Gustavo Rocha Soares;
    Marcelo Andrade;
    Paulo Henrique Stocco Zancaro;
    Raul Cloud.

    Atenção: Não serão consideradas a segunda solução de autores que já participaram.
    Quando eu postar a solução comentarei os erros.

    Editado: Alguns autores com solução certa não estavam na cor vermelha.

  36. Marcelo de AndradeNo Gravatar disse:

    Já mandei… só aguardar o resultado.

  37. leandroNo Gravatar disse:

    acho q não entendi direito, pq eu consegui fazer sem nenhuma dificuldade. Pode usar class?

Comentário:





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

Subscribe without commenting

topo