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 — 11.094 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2007-11-4 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://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