Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Teste seu conhecimento 07

Publicado em: 2007-11-4 — 12.720 visualizacoes

borda bicolor com CSS

borda bicolor

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:

  1. Usar somente (X)HTML e CSS (sem scripts);
  2. Usar na marcação somente duas divs e um parágrafo;
  3. Não usar imagens;
  4. Não usar tabelas;
  5. Não usar estilos inline;
  6. Não usar hacks;
  7. A renderização deve mostrar a borda bicolor tanto no IE6 como no Firefox2;
  8. 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.

17 comentários na matéria: “Teste seu conhecimento 07”

  1. CharlesNo Gravatar disse:

    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!!!!!!

  2. EliseuNo Gravatar disse:

    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 !

  3. MaujorNo Gravatar disse:

    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>

  4. BrunoNo Gravatar disse:

    A solução Maujor, cade a solução!! rsrsrs
    Abraço a todos e boas festas de fim de ano!!!

  5. Gustavo CardosoNo Gravatar disse:

    E aí, sai ou não sai o resultado desse desafio!?!

    Um abraço!

  6. Fernando ArnosoNo Gravatar disse:

    Vamos ver se minha soluçao está certa.
    Abraços.

  7. Gustavo CardosoNo Gravatar disse:

    Maujor, minha resoluçãofoi enviada para seu e-mail.
    Espero que também esteja certa!

    Um abraço.

    Gustavo Cardoso.

  8. Glauco ViniciusNo Gravatar disse:

    Maujor,

    Acabo de te enviar a resolução… agora é esperar para ver se está correta.

    =)

  9. FernandoNo Gravatar disse:

    enviei minha solução.

    espero ter passado no desafio SENSEI.

  10. Carlos EduardoNo Gravatar disse:

    Também resolvi o desafio… Mandei por e-mail 🙂

  11. Thiago FigueiredoNo Gravatar disse:

    Tá no teu e-mail meu caro!

    TOMARA QUE ESTEJA CORRETO! =D

  12. Alisson PatrícioNo Gravatar disse:

    Maujor, fiz minha parte, vamos ver se eu consegui!

    Abraços

  13. Pedro RogérioNo Gravatar disse:

    Maujor,

    Lhe enviei por e-mail o teste. Abraços!!!

  14. MaujorNo Gravatar disse:

    @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.

  15. Anderson CustódioNo Gravatar disse:

    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 = )

  16. Lía SiqueiraNo Gravatar disse:

    Afemariiia!!! Eu quase consegui!! rsrs… quaaase!!
    Pelo amor de Deus, posta o resultado?!?!?!
    ^.^

  17. Newton CalegariNo Gravatar disse:

    Ohh.. Legal, vou tentar encontrar uma possível solução 🙂

    # Maujor – Tem isso no seu livro?

    Abraços

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo