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.
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.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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 :)