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 16

Publicado em: 2012-10-24 — 9.693 visualizacoes

DESAFIO ENCERRADO EM 09/11/2012.

screenshot cores tela

Convido você a participar do desafio #16 do Maujor, mas não permita que o não cumprimento de regras do desafio invalide seu trabalho. 🙂.

Portanto leia com atenção este post do começo ao fim.
Sua missão, caso decida aceitá-la, é fazer com que a cor de fundo da janela de renderização mude quando o respectivo link para a cor é clicado, como mostrado na figura anterior. O não cumprimento de qualquer regra invalida o trabalho. Mas, não se estresse com isso, simplesmente leia as regras e as cumpra.
Afinal são apenas 3 regras.

As famigeradas regras

Atualização: A solução deverá ser sem uso de scripts. Somente HTML+CSS.

  1. O documento HTML a usar, obrigatoriamente, deve ser baixado neste link. Trata-se de um documento texto denominado Jose-da-Silva-Marques.html.txt. Retire a extensão .txt e renomeie com seu nome. Por exemplo: Bernard-de-Luna.html. Vou identificar o autor da solução pelo nome do arquivo, Assim se você nomear de forma diferente seu trabalho será descartado.
    No documento há comentários orientando onde e o que você pode acrescentar e/ou codificar.
  2. Envie o documento HTML sem zipar para maujor[AT]maujor[PT]com e no email de envio faça constar apenas o assunto do email que deverá ser o seguinte: desafio16. Se você não escrever isso seu email não irá para a caixa do desafio e eu não receberei. Envie somente uma solução e uma só vez.
  3. A renderização deverá ser em pelo menos um dos navegadores: Firefox/Chrome/Opera/Safari versão atual e para definir as cores CSS use as palavras-chaves: red, green e blue e se necessário transparent.

Estes desafios, como foram e serão todos os que estão por vir, são postados no blog com a finalidade única de proporcionar “divertimento” (para nerds né?) aos meus leitores e paralelamente fornece uma oportunidade para você exercitar seus conhecimentos. O valor prático do resultado do desafio não está em questão.

Notícias sobre o andamento do desafio, serão postadas no meu twitter. Se você não me segue no twitter acompanhe as atualizações subscrevendo o recebimento dos comentários, pois elas serão postadas ali.

Boa sorte e divirta-se. 😉

Sorteio de um livro do Maujor

Sortearei um dos meus 10 livros (link abre em nova janela), o sorteado escolhe, entre os leitores que enviarem a solução certa do desafio, até o dia 9 de novembro de 2012.

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

Esta matéria foi publicada em: 2012-10-24 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comentários e pings fechados.

15 comentários na matéria: “Teste seu conhecimento 16”

  1. MaujorNo Gravatar disse:

    Regras, por mais “babacas” que possam parecer, são para serem cumpridas.
    Há razões para cada regra, que talvez escape ao seu entendimento.
    Por exemplo: Você resolveu tudo certinho, mas nomeou seu arquivo de forma diferente das regras ou não colocou o texto do assunto conforme as regras ou etc…
    O recebimento do email é automatizado e descarta no servidor o email em desacordo com as regras.
    Não pergunte se recebi ou não seu email ou onde você errou, pois o encaminhamento de emails para análise da solução, como já foi dito, é automatizado.
    Lamento muito se sua solução estava certa é um descuido seu levou seu email a ser descartado.
    De toda forma agradeço muito sua participação.

  2. IgorNo Gravatar disse:

    Maujor,

    A minha solução, você recebeu? Se recebeu, teve alguma coisa fora das regras?

  3. Reinaldo OliveiraNo Gravatar disse:

    Maujor,

    Recebeu minha resposta do desafio? Se sim, poderia me dizer por qual motivo a minha solução não está correta?

  4. Gabriel MalaquiasNo Gravatar disse:

    Legal, acertei ! Tinha começado a fazer que nem o Fernando, mas achei a pseudo-classe :target. Valeu Maujor, e manda mais desafios ai, Abraços.

  5. Fernando DaciukNo Gravatar disse:

    Valeu Maujor pela oportunidade de aprendizado e pelo livro! 😀

    o/

  6. MaujorNo Gravatar disse:

    Resultado do desafio:
    Recebi 29 respostas ao desafio sendo 15 em desacordo com as regras e 14 respostas classificadas.
    A finalidade deste desafio foi chamar a atenção para o uso da pseudo-classe :target prevista nas CSS4.
    Das soluções enviadas 13 foram com uso dessa pseudo-classe e 1 solução, a do leitor Fabrício Matte merece destaque, por ter sido inédita em não ter usado a pseudo-classe.

    O leitor sorteado com o livro foi o Fernando Daciuk .

    As soluções podem ser consultadas em: respostas certas ao desafio 16 do Maujor.

    Obrigado a todos os participantes.

  7. jonathan silvaNo Gravatar disse:

    Maujor, depois de finalizado o desafio tu pode publicar as respostas enviadas ?
    Queria ver como a galera resolveu esse desafio.

  8. andersonNo Gravatar disse:

    Maujor,
    concordo com vc,
    só que essa observação de eventos é para js e nao html e css.

  9. MaujorNo Gravatar disse:

    @Igor Qualquer cor
    @Matheus sim e sim
    @Rafael classe é um atributo (leia as regras)
    @Anderson clicar é diferente de mousedown

  10. andersonNo Gravatar disse:

    clicou muda a cor, ao largar o botao volta para o normal,
    ou clicou, apos largar o botao, mantem a cor?

  11. Rafael LyraNo Gravatar disse:

    Posso adicionar classes nos elementos né?

  12. MatheusNo Gravatar disse:

    É para utilizar apenas css para este desafio? Javascript está descartado?

  13. IgorNo Gravatar disse:

    A cor de fundo da janela de renderização INICIAL (antes de qualquer um dos links serem clicados) pode ser qualquer uma? branco? qual?

  14. MaujorNo Gravatar disse:

    @Reinaldo
    Não!

  15. Reinaldo OliveiraNo Gravatar disse:

    Posso alterar a ordem dos elementos HTML?
    Por exemplo inverter de
    a
    a
    a
    div
    div
    div

    Para

    div
    div
    div
    a
    a
    a

topo