Teste seu conhecimento 07
Publicado em: 2007-11-4 — 15.385 visualizacoes
borda bicolor com CSS
A imagem acima é um screenshot da renderização de um texto contido em um container com borda bicolor.
Este desafio número 7 consiste em obter a renderização mostrada na figura, usando HTML e CSS.
Regras gerais:
- Usar somente (X)HTML e CSS (sem scripts);
- Usar na marcação somente duas divs e um parágrafo;
- Não usar imagens;
- Não usar tabelas;
- Não usar estilos inline;
- Não usar hacks;
- A renderização deve mostrar a borda bicolor tanto no IE6 como no Firefox2;
- O tamanho do container é de 300px;
Se você encontrar a solucão mande para mim via email – maujorcss[arroba]maujor[ponto]com – o arquivo .html com a folha de estilo incorporada.
Nomeie o arquivo assim: seu_nome.html. 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.
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-11-4 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2007/11/04/teste-seu-conhecimento-07/trackback no seu site.
Como eu cheguei atrasao neste post já peguei o resultado e testei, o efeito é show, fico grato ao moderador e aos colegas que comentaram.
Valeu!!!!!!
Consegui de outra forma, acho que um pouco maior!
CSS
#um{
position: absolute;
float: left;
width: 300px;
height: 100px;
padding: 6px;
border: 6px solid #FF0000;
}
#dois{
position: absolute;
float: left;
width: 300px;
height: 100px;
padding: 6px;
border: 6px dashed #006699;
}
HTML
Testando o teste, hehehe !
Solução:
CSS
#externa {
width: 300px;
background: #f00;
}
#interna {
border:10px dashed #0f0;
}
p {
border:5px solid #fff;
padding:5px;
margin:0;
background:#444;
color:#fff;
}
HTML
<div id="externa">
<div id="interna">
<p>O livro <strong>Construindo sites com CSS e (X)HTML</strong> ampliará seus conhecimentos e será uma fonte de consulta valiosa no seu dia-a-dia de trabalho.</p>
</div>
</div>
A solução Maujor, cade a solução!! rsrsrs
Abraço a todos e boas festas de fim de ano!!!
E aí, sai ou não sai o resultado desse desafio!?!
Um abraço!
Vamos ver se minha soluçao está certa.
Abraços.
Maujor, minha resoluçãofoi enviada para seu e-mail.
Espero que também esteja certa!
Um abraço.
Gustavo Cardoso.
Maujor,
Acabo de te enviar a resolução… agora é esperar para ver se está correta.
=)
enviei minha solução.
espero ter passado no desafio SENSEI.
Também resolvi o desafio… Mandei por e-mail 🙂
Tá no teu e-mail meu caro!
TOMARA QUE ESTEJA CORRETO! =D
Maujor, fiz minha parte, vamos ver se eu consegui!
Abraços
Maujor,
Lhe enviei por e-mail o teste. Abraços!!!
@Anderson:
O item 7 diz: A renderização deve mostrar a borda bicolor tanto no IE6 como no Firefox2;
Não diz que é igual, pois há realmente uma pequena diferença no tamanho dos tracejado.
@Todos:
Coloque a folha de estilo incorporada e valide seu código antes de enviar.
Consegui obter o mesmo resultado só no Firefox, no IE6 e no 7 a borda fica com os pontilhados com menos distancia um dos outros.
Como esse print foi tirado aparentemente pelo IE7 (caso minha vista não esteja me enganando =P) acho que não vai valer, vou tentar acertar isso antes de mandar = )
Afemariiia!!! Eu quase consegui!! rsrs… quaaase!!
Pelo amor de Deus, posta o resultado?!?!?!
^.^
Ohh.. Legal, vou tentar encontrar uma possível solução 🙂
# Maujor – Tem isso no seu livro?
Abraços