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 — 8.098 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.

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: 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