Teste seu conhecimento 04
Publicado em: 2007-04-24 — 14.250 visualizacoes
abc em duas cores com CSS
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:
- Usar somente (X)HTML e CSS (sem scripts);
- Nao usar imagens;
- Nao colocar as letras individualmente dentro de um elemento HTML;
p.ex.: <span>a</span><span>b</span><span>c</span><span>d</span>…; - Não usar estilos inline;
- Não usar tabelas, frames ou iframes;
- 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 http://www.maujor.com/blog/2007/04/24/abc-em-duas-cores-com-css/trackback no seu site.
Mas como ficou em ordem alfabética?
será postada a resposta ao desafio?
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!
Estamos esperando o próximo…
…
..
.
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.
To louco pra ver a resposta.
Podia publicar a resposta, já faz tempo que este teste está no ar.
Abraço.
Pessoas…
Qdo vai ser publicada a resposta desse teste?
Acho que é impossível de se fazer isso….
kkk
E a solução é… ?
Gostaria de a ver publicada!
Cumprimentos
Cara tu tem que olhar esse artigo que tu mesmo fez:
http://www.maujor.com/blog/2006/05/18/dicas-desacreditar-blog/
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.
O site e o blog maujor é o melhor, me ajuda muito.
Parabens pelo trabalho!
@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!