Teste seu conhecimento 05
Publicado em: 2007-06-20 — 29.178 visualizacoes
texto tricolor com CSS
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:
- Usar somente (X)HTML e CSS (sem scripts);
- Não usar imagens;
- Não usar tabelas;
- Não usar estilos inline;
- Não usar hacks;
- A renderização deve ser idêntica no IE6 e no Firefox2;
- O tamanho inicial do texto deve ser aproximadamente o mesmo mostrado no screenshot;
- No Firefox o texto não deve quebrar até um aumento do tamanho de fonte tal que o texto ocupe toda a largura tela;
- No IE6 o texto não deve quebrar para tamanho de fonte máxima definida no menu
Exibir » Tamanho de texto; - 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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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.
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
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.
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.
@Anderson
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.
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.
Muito interessante. Parabéns pela matéria Maujor!
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
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
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 =]
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.
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 :(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!
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!
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
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.