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

Livros do Maujor

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

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

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