Teste seu conhecimento 04
Publicado em: 2007-04-24 — 5.544 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?
----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Livros do Maujor
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique o livro para detalhes.
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.
@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!
O site e o blog maujor é o melhor, me ajuda muito.
Parabens pelo trabalho!
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.
Cara tu tem que olhar esse artigo que tu mesmo fez:
http://www.maujor.com/blog/2006/05/18/dicas-desacreditar-blog/
E a solução é… ?
Gostaria de a ver publicada!
Cumprimentos
Pessoas…
Qdo vai ser publicada a resposta desse teste?
Acho que é impossível de se fazer isso….
kkk
To louco pra ver a resposta.
Podia publicar a resposta, já faz tempo que este teste está no ar.
Abraço.
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.
Estamos esperando o próximo…
…
..
.
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!
será postada a resposta ao desafio?
Mas como ficou em ordem alfabética?