Teste seu conhecimento 14
Publicado em: 2011-10-7 — 16.673 visualizacoes
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:
- Na marcação HTML use apenas um elemento
divvazio → <div></div>;(não pode usar JavaScript) - Declare regras CSS à vontade; (Nota: coloque as regras CSS incorporadas à página para facilitar visualização no código fonte);
- 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;
- Assim que for recebendo os arquivos, publico nos comentários, o nome dos que forem resolvendo o desafio, conforme as regras;
- 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 https://www.maujor.com/blog/2011/10/07/teste-seu-conhecimento-14/trackback no seu site.
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.