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 14

Publicado em: 2011-10-7 — 13.094 visualizacoes

3 círculos concêntricos nas cores vermelha verde e azul.

DESAFIO ENCERRADOVer comentário 5

Há mais de um ano que eu não publico um “Teste seu conhecimento”. Esta semana, fazendo experiências com algumas funcionalidades das CSS cheguei a um efeito interessante.
Trata-se da construção de círculos concêntricos usando apenas um elemento div vazio na marcação HTML e regras de estilo. O efeito final é este que você está visualizando na imagem ao lado.

Atualização: Alterei o número de círculos de 3 para 5, pois a ideia inicial era criar regras CSS que atendessem n círculos. (Se você já esteve aqui e está visualizando 3 e não 5 círculos, recarregue a página.)


Quer tentar? As regras são as seguintes:

  1. Na marcação HTML use apenas um elemento div vazio → <div></div>;(não pode usar JavaScript)
  2. Declare regras CSS à vontade; (Nota: coloque as regras CSS incorporadas à página para facilitar visualização no código fonte);
  3. A renderização deverá ser no Firefox ou Chrome ou Safari versões atuais; (se você pretende enviar seu trabalho, indique o navegador e envie para maujor[AT]maujor[PT]com somente o arquivo html não zipado;
  4. Assim que for recebendo os arquivos, publico nos comentários, o nome dos que forem resolvendo o desafio, conforme as regras;
  5. A inserção da legenda da figura faz parte do desafio e deverá permanecer no local, como visualizado, independentemente do redimensionamento da janela do navegador.

Informarei no twitter a data de publicação do resultado do teste. Siga-me!

Divirta-se!

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2011-10-7 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2011/10/07/teste-seu-conhecimento-14/trackback no seu site.

10 comentários na matéria: “Teste seu conhecimento 14”

  1. Guzmán - surfNo Gravatar disse:

    Gostei muito do seu desafio. Voce tem contribuido para a formacao de muitos webdisigners e muitos proffissionais que trabalham com a web. Parabens a voce.
    Obrigado

  2. Gustavo - Diseño webNo Gravatar disse:

    Gostei muito de seu desafio. Voce tem contribuído para a formacao de muitos webdisigners e proffisssionais que trabalham com a web
    e possível facer isso usando so CSS3 o tem feito alguma outra coisa??
    Parabéns a voce

  3. Darlan vitorNo Gravatar disse:

    Vou ter que aprender muito para resover isso mas para quem conhece vale tentar…..

  4. FernandoNo Gravatar disse:

    Acertei a parte dos círculos, mas por falta de atenção fiz o texto de forma errada.

    Parabéns e obrigado por disponibilizar seu tempo para ajudar e ensinar.

    Aguardamos o desafio #15!

  5. LeonardoNo Gravatar disse:

    Excelente, Maujor!
    Espero que faças mais desafios.

    Este foi minha primeira participação e achei muito divertido. Sempre é bom aprender que novas soluções.

    Nem tinha lembrado dos gradients. Tinha na cabeça que eles estavam ainda muito “imaturos” e acabei ignorando. Muito legal…

    Bom feriado, Maujor e parabéns aos que chegaram na resposta!

  6. MaujorNo Gravatar disse:

    Ver resultado do desafio em: http://www.maujor.com/blog/pg_apoio/desafio14/maujor.html

  7. MaujorNo Gravatar disse:

    Seu nome não consta da lista dos que acertaram o desafio?
    Confira as violações mais comuns às regras:

    Regra 1 – Inserir no HTML qualquer “coisa” além de <div></div>;
    Regra 3 – Não indicar o navegador para visualização;
    Regra 5 – Omitir a legenda ou legenda sem quebra de linha.

    Todo desafio, competição ou evento que envolva qualquer forma de disputa é regido por regras.
    Se o competidor entra na disputa, implicitamente aceita as regras e cabe cumpri-las.
    Além do desafio em si, que para mim é irrelevante, minha maior pretensão, como educador, é a de proporcionar diversão aos meus leitores e ao mesmo tempo contribuir um pouco com o seu preparo para o sucesso no mercado de trabalho.
    Não permita que a falta de atenção à detalhes (as vezes aparentemente bobos) feche uma porta para você.
    Obrigado a todos que enviaram suas soluções ao desafio.
    Amanhã publico o resultado.
    Breve, desafio #15

  8. MaujorNo Gravatar disse:

    Confira aqui se você resolveu o desafio.
    @Leo Balter (hors concours)
    @Glaubert Dumpierre
    @Mateus Velleda Vellar
    @Fabiano Fonseca
    @Ramon Victor
    @Felipe Vargas
    @Marcos Moura
    @Fernando Rodrigo de Jesus
    @Jean C. Nascimento aka Suissa
    @Bernard de Luna
    @Felipe Nascimento de Moura
    @Luiz Tiago Oliveira
    @Hemerson Camargo
    ——————————————————————-
    Por favor: Não poste comentário informando que enviou solução.
    Acusarei recebimento do seu email.

  9. MaujorNo Gravatar disse:

    Recebi 27 soluções (com 3 círculos) enviadas ontem à noite das quais apenas duas estão corrretas.
    @Glaubert Dumpierre
    @Mateus Velleda Vellar
    Leia com atenção TODAS as regras do desafio. Soluções fora das regras não serão analisadas.
    Muitas soluções com marcação errada (só UM div e nada mais, inclusive não pode usar script).
    Confira sua solução em diferentes tamanhos da janela antes de enviar.
    As dimensões e cores dos círculos são livres.
    ——————————————————————————————
    Notar que alterei o número de círculos de 3 para 5, para evitar soluções não flexíveis.
    Convido os dois leitores que acertam a solução com 3 tentar a nova proposta com 5 círculos.
    Para novas tentativas envie a solução com 5 círculos.

  10. WebisaacNo Gravatar disse:

    Gostei muito de seu desafio Maujor. Você é uma pessoa humilde e que tem contribuído para a formação de milhares de webdesigners e outros profissionais que trabalham com a web. Eu sou um deles.

    Te enviei o teste como solicitado e espero ter sido aprovado.

    Obrigado.

Comentário:





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

Subscribe without commenting

topo