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 05

Publicado em: 2007-06-20 — 23.611 visualizacoes

texto tricolor com CSS

texto tricolor

A imagem acima é um screenshot da renderização de um texto segmentado na horizontal em três faixas de cores diferentes.

Este desafio número 5 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 idêntica no IE6 e no Firefox2;
  7. O tamanho inicial do texto deve ser aproximadamente o mesmo mostrado no screenshot;
  8. No Firefox o texto não deve quebrar até um aumento do tamanho de fonte tal que o texto ocupe toda a largura tela;
  9. No IE6 o texto não deve quebrar para tamanho de fonte máxima definida no menu
    Exibir » Tamanho de texto;
  10. Use as seguintes cores:
    vermelha – #E00
    azul – #00C
    verde – #090.

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.

Para cada solução correta recebida eu postarei nos comentários informando o nome do autor. e se a solução está certa
Dentro de aproximadamente 40dias, 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: 2007-06-20 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comentários estão fechados, mas trackback é possível.

15 comentários na matéria: “Teste seu conhecimento 05”

  1. MaujorNo Gravatar disse:

    Caros
    @Sanches e @Anderson
    Por favor vamos encerrar por aqui.
    Cada um com suas convicções e eu respeito, contudo este tipo de troca de idéias nada acrescenta ao aspecto técnico da matéria.
    Vamos ficar somente na troca de experiências Web Standards e focar no assunto da matéria poupando os demais de questões sem interesse público.
    Grato aos dois e espero poder contar suas participações.

    Comentários Fechado

  2. Anderson "Tribal"No Gravatar disse:

    Meus coleogas disseram que vc Sanches, respondeu meu post, e olha eu aqui para me defender.
    Para encerrar este assunto, até porque eu tenho mais o que fazer, tenho algumas coisas para te perguntar:
    1º Você resolveu o desafio?!?
    2º Já que me intitulou como asno, por gentileza, mostre o quanto vc não é inciante! Algum link..qualquer coisa, pode ser?!?
    3º É vc quem está dizedno que estou incomodado com o reconhecimento que Maujor tem. A minha crítica, foi à vc, não a ele.

    Maujor, desculpe qualquer coisa. Não queria criar polêmica, mas é que seu fã nº1 afrimou que escrevo asneiras e ao contrário do senhor que respondeu a meu questionamento sem perder a linha, o rapaz, não fez o mesmo…
    Sem mais.

  3. SanchesNo Gravatar disse:

    ninguem é quase um Deus pra mim, eu fiz uma brincadeira, Anderson tribal devia evoluir seu senso de humor e não suas habilidades em css.

    Mas sou muito grato pelo que o maujor faz sim, organizar e disponibilizar uma grande quantidade de conteúdo referente a css, é um dos melhores locais de pesquisa com certeza. Pq o reconhecimento que ele recebe te irrita tanto ? pq me julga iniciante ? pq afirma tanta asneira com tanta certeza ?

    ai ai ai ai ai Zordon.

  4. MaujorNo Gravatar disse:

    @Anderson

    Interessante… a “pessoa” que publicou a “solução pra o desafio” copiou e colou o minha solução que até então, vc respondeu por email que estava certa!

    Realmente sua solução estava certa, tanto que publiquei seu nome.
    O mais interessante é a conclusão que cheguei:
    Se a pessoa que trabalha contigo não copiou errado, temos duas pessoas que publicaram a solução. Uma que eu vi e estava errada e também o teu colega de trabalho.
    Não vou pedir para você citar nomes e nem dizer onde teu “muy amigo” publicou. Isto apenas reforça minha decisão.

  5. Anderson "Tribal"No Gravatar disse:

    Interessante… a “pessoa” que publicou a “solução pra o desafio” copiou e colou o minha solução que até então, vc respondeu por email que estava certa!
    Como eu sei disso?!? A pessoa que fez isso trabalha comigo, pegou o codigo-fonte e enviou…
    Mais interessante ainda é ver que vc é quase “um Deus” para os iniciantes… “Agradecer a Deus por vc existir…” que exagero!
    Sem mais.

  6. Josué AugustoNo Gravatar disse:

    Muito interessante. Parabéns pela matéria Maujor!

  7. kakarotoNo Gravatar disse:

    vai ser uma pena maujor vc acaba com esse desafio

    me perdoei se eu coloque a palavra errada:) no e pq existem meia duzia de idiotas que postaram numa lista
    que nos aqui vamos ser prejudicado

    acho maujor q vc esta sendo injusto com um grupo de pessoas
    q te acompanhar a anos

    um abraço

  8. Rafael BandeiraNo Gravatar disse:

    O Maujor não acaba com isso não!
    Eu esperei ancioso pelo resultado dessa que foi a primeira que tentei responder, e não consegui e fiquei muito intrigado!
    Realmente todo mundo quer uma referência neste que é sem dúvida alguma uma das mais badaladas casas do web designer na web.
    Espero que você reconsidere isso, e talvez até implemente a idéia do nosso chapa ali em cima… o que seria uma pena também, por que eu não via a hora para ter meu nome na lista, mas melhor não ter meu nome ali do que não ter os desafios!
    Abraço

  9. SanchesNo Gravatar disse:

    resumindo e explicando melhor o que eu quiz dizer, é que, a partir do momento que vc publica a lista de quem consegue resolver, isso gera uma competição – não declarada – pra ver quem vai conseguir aparecer ali na lista. Tirando isto, desestimula a competição, pq ninguem vai ganhar reconhecimento algum conseguindo resolver, sendo assim, só quem REALMENTE quer aprender, vai tentar fazer o código, vc poderia receber e conferir mas sem publicar ali o nome dos que conseguiram, infelizmente só assim que as coisas funcionam.

    pelo menos é minha opinião pessoal =]

  10. SanchesNo Gravatar disse:

    cara, todos os dias eu agradeço a Deus por existir o Maujor, e acho que não por este tipo de pessoa você deveria encerrar essa série, em se tratando de css, se o site além de tudo que já tem pra contribuir com nosso aprendizado ainda tivesse esses desafios seria fantástico….

    acho que, claro, sempre vai existir gente que vai buscar a respostas em outros lugares só pra vir aqui e aparecer ali na lista como um dos que conseguiram, acho que a solução seria NÃO publicar quem consegue resolver o problema, apenas propor o problema e deixar que, quem quiser, no anonimato de seu lar, tentar resolver, se divirta com isso, o ser humano é assim, a partir do momento que voce oferece uma forma de reconhecimento como premio, vão buscar isso como um alcoolatra busca uma garrafa.

    continue com os desafios, pq tem MUITA gente que leva a sério, eu mesmo tentei aqui, não consegui resolver, e estava aguardando ansiosamente pela solução.

  11. RodrigoNo Gravatar disse:

    Uma pena mesmo… eu tava fazendo ates de ler q tinha acabado ja… cheguei atrasado 😛

    mas nao pare com esses desafios não… gostei do q vi 🙂

    meu codigo ficou parecido com o seu, mas não funcionou no IE 🙁
    vc sabe me dizer pq?
    a unica diferença é q o texto estoura, qdo passa toda a largura da tela (+d 100%), mesmo assim, ainda esta de acordo com a regra 8, ja q ocupando toda largura nao quebra a linha 🙂

    alias, vc usou a unidade “em” , qual a vantagem de usa-la? eu nunca usei, nem sei a q medida se refere :-/

    CSS:

    .tricolor
    {font-family:Verdana, Arial; font-size:200%; font-weight:bold;} .tricolor, span
    {position:absolute;overflow:hidden;color:#090;} .top, .mid {left:0; position:absolute}
    .top {color:#e00; height:50%} .mid {color:#00c; height:75%}

    HTML:

    < span class="tricolor" >Texto Tricolor < span class="mid" >Texto
    Tricolor< /span > < span class="top" >Texto Tricolor< /span > < /span >

    ps.: escrevi com espaços entre os nomes das tag pq nao tava conseguindo postar os codigos html aqui nem dentro de nem usando & lt; & gt;, pois estas sumiam :(

  12. Thiago SouzaNo Gravatar disse:

    Maujor, isso é uma pena, pois sempre fazia esses desafios.
    O pessoal do meu serviço dedicava uma parte do dia só para tentar fazer esses testes, mas um engraçadinho foi postar a resposta (errada, ainda por cima) em algum blog por ai…

    Gostaria de saber se vc vai postar a resposta correta desse desafio?
    Abraço’s!

  13. MaujorNo Gravatar disse:

    Uma das respostas para o teste
    CSS:
    <style type="text/css" media="screen">
    .h1 {
    width:8.0em;
    font-size:3.5em;
    }
    h1, span {
    position:absolute;
    overflow:hidden;
    color:#090;
    }
    .corum, .cordois {
    position:absolute;
    left:0;
    }
    .corum {
    height:0.78em;
    color:#00c;
    }
    cordois {
    height:0.62em;
    color:#e00;
    }
    </style>

    HTML:
    <h1>Texto tricolor
    <span class="corum">Texto tricolor</span>
    <span class="cordois">Texto tricolor</span>
    </h1>

    Este desafio, lamentavelmente encerra precocemente esta série de desafios intitulada “Teste seu conhecimento”.
    A minha idéia inicial era a de lançar um desafio a cada mês, mas infelizmente constatei que a solução deste teste foi publicada em uma lista de discussão, e isto além de não contribuir em nada com aqueles que querem aprender CSS (meu público principal) desacredita os que enviam a solução.
    Em breve estarei escrevendo uma matéria, tecendo algumas considerações sobre os testes publicados no Blog.

    Obrigado a todos que participaram.
    A propósito:
    A solução postada na lista (até a data da publicação deste comentário) estava ERRADA! rsrsr!

  14. MaujorNo Gravatar disse:

    Os autores das soluções certas serão listados neste comentário na ordem de recebimento. Confira aqui se a sua solução está correta

    1. @ Mikeli Moriconihttp://www.guiropa.com
    2. @ Guilherme Malta – Portugal
    3. @ André Pastihttp://futuroprofessor.com.br/
    4. @ James Clebio
    5. @ Luis Augusto Vulcanishttp://professorluis.com/
    6. @ Billy Blay
    7. @ André de Almeida Farzat
    8. @ Amanda Tresbach
    9. @ Richard Barroshttp://www.richardbarros.com.br
    10. @ Diogo de Alcântara Rodrigues Alveshttp://www.integrativa.com.br
    11. @ Jan Guilherme de Aguiar Junior
    12. @ Marcelo Linhareshttp://www.marcelolinhares.com
    13. @ Nelson Vasconceloshttp://www.nvasconcelos.com
    14. @ Wagner Peres Pereirahttp://www.wagnerperes.com
    15. @ Anderson “Tribal” Almeidahttp://www.andersontribal.com.br
    16. @ Matheus Haddadhttp://www.matheus.eti.br
    17. @ Davis Zanetti Cabral
  15. Emanuel FelipeNo Gravatar disse:

    Solução enviada, se estiver correta até que foi simples.

    Editado pelo Maujor:
    Solução errada! Em desacordo com as regras #8 e #9.
    Todas as soluções que recebi até agora cometem o mesmo erro.
    É preciso que o texto admita redimensionamento da fonte sem ‘quebrar’ ou seja:
    No Firefox tecle Ctrl + + várias vezes e no IE vá no menu Exibir » Tamanho do texto » Máxima e o texto deve aumentar sem perder as três cores.
    Teste sua solução antes de enviar.

topo