DESAFIO ENCERRADO – Ver 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:
div vazio → <div></div>;(não pode usar JavaScript)Informarei no twitter a data de publicação do resultado do teste. Siga-me!
Divirta-se!
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
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
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
Vou ter que aprender muito para resover isso mas para quem conhece vale tentar.....
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!
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!
Ver resultado do desafio em: http://www.maujor.com/blog/pg_apoio/desafio14/maujor.html
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
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.
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.
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.