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 15

Publicado em: 2011-10-25 — 35.201 visualizacoes         

DESAFIO ENCERRADO

Link para a solução

Convido você a participar do desafio #15 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, é obter a renderização, no navegador Firefox, como mostrada na figura ao lado, segundo as regras relacionadas a seguir. Repito, 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

  1. O documento HTML a usar, obrigatoriamente, no desafio 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.
    No documento há comentários orientando onde você pode codificar.
  2. Envie o documento HTML sem zipar para maujor[AT]maujor[PT]com e no assunto do email escreva somente o seguinte: desafio15. Se você não escrever isso seu email não irá para a caixa do desafio e eu não receberei. De toda forma acusarei o recebimento de todos os emails em no máximo 2 dias.
  3. A renderização deverá ser no navegador Firefox e para definir as cores CSS use as palavras-chaves: white, red, green, blue, orange, black 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.

Notícias sobre o andamento do desafio, tais como, publicação do nome dos leitores que forem resolvendo, data de encerramento etc 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. 😉

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-25 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2011/10/25/teste-seu-conhecimento-15/trackback no seu site.

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

  1. Buscador EmpresasNo Gravatar disse:

    Gostei muito de seu desafio. Você tein contribuído para a formação de muito webdesigners e proffessionais que trabalhan con a web.
    E possive facer isso usando so Css3 o tein feito alguma outra cosa.
    Obrigado.

  2. Maujor #15 CSS Challenge | Filipe Roberto Silva Maujor #15 CSS Challenge | disse:

    […] CSS challenge, this time made in Maujor web […]

  3. TelexFREENo Gravatar disse:

    Parabéns, eu falo algo de portugueis o seu é o único que funcionou 100% aqui no Opera 11.

  4. Desafio CSS #01 - iMasters Cube disse:

    […] fiquei admirado pelos desafios que o grande amigo Maujor fazia em seu blog, nos fazendo pensar em cima da CSS e propor a criatividade com diversão. Achei que seria talvez o […]

  5. Thiago LeiteNo Gravatar disse:

    Muito legal esse desafio. Tenho que dizer que ainda demorei um bocado a resolve-lo, mas valeu a pena. Muitos parabéns ao Maujor..

    Cumprimentos

  6. Total Life ChangesNo Gravatar disse:

    E Muito legal o desafio…. Parabéns Maujor!!!!!

    aprendizado não tem preço!!!!

  7. JoseNo Gravatar disse:

    Ora vamos lá então aceitar o desafio html5 e ver no que dá. Penso que não será assim tão difícil.

  8. 123 de Oliveira 4No Gravatar disse:

    Na minha opinião, acho deveria ter se estabelecido nas regras a versão do Firefox na qual o código teria que funcionar.
    Rodei aqui com uma versão arcaica e o resultado foi catastrófico.

    (Apenas um comentário:

    Eu, particularmente, já fui usuário do Firefox, mas me decepcionei muito desde que o Firefox se tornou um sanguessuga do source do Opera.
    Desde então, tenho usado o Opera.)

  9. Jonas SantosNo Gravatar disse:

    Parabéns ao autor deste blog, com os seus desafios aprendi muito sob webdesign. Obrigado

  10. Lincoln D.No Gravatar disse:

    Que legal! Pena que só estou vendo o desafio agora, mas vou tentar fazer mesmo assim, CSS é tudo de bom!

  11. Eduardo - Técnicas de relajaciónNo Gravatar disse:

    Alo, bom dia, esteve olhando teu blog, muito bom, parabens.

  12. Carlos - La BarraNo Gravatar disse:

    Gostei muito de seu desafio. Você tein contribuído para a formação de muito webdesigners e proffessionais que trabalhan con a web.
    E possive facer isso usando so Css3 o tein feito alguma outra cosa.
    Obrigado.

  13. EliuNo Gravatar disse:

    O link para a solução se encontra offline.

    Maujor disse:
    Grato por informar.
    Link corrigido: http://kwz.me/r1

  14. Igor Isaias BanlianNo Gravatar disse:

    Parabéns, “Leandro Panaccione Fernandes”, o seu é o único que funcionou 100% aqui no Opera 11.52!

    Obs.: Eu sei que o desafio era para fazer funcionar corretamente apenas no Firefox, mas funcionando em outros navegadores é um bônus incrível que faz com que ele mereça levar o mérito como a melhor implementação deste desafio, na minha opinião pessoal, claro!

    Abraço,
    Igor Isaias Banlian

    Maujor disse:
    respeito a sua opinião porém não há mérito algum em copiar/colar o mesmo código mudando o prefixo proprietário. O grande mérito foi ter solucionado o desafio no Firefox.

  15. AndreiNo Gravatar disse:

    Opa, coloquei somente a nível de informação… Mas e aí, quando vai rolar o próximo? 😀

  16. Erick MartimNo Gravatar disse:

    Ahh, que pena, o prazo foi muito curto pra entrega, Maujor ! Só soube do desafio faltando dois dias pra terminar, porém só tive tempo de brincar aqui agora rs 🙁

    Mais tudo bem, consegui fazer o desafio exatamente igual, sem olhar as soluções e tomando o cuidado de testar o que eu vi que faltou em muitos, aqui tá funfando no FF 3.6 ! 😀

    Massa a idéia dos desafios, de início achei que não seria capaz de fazer esse, porém pesquisei um pouco e descobri que nem era tãaao difícil assim. Valeeu Maujor

  17. AndreiNo Gravatar disse:

    Muito bom o desafio… Vou ficar de olho para participar dos próximos…

    As soluções do Emerson Pereira, José Orlando e do Pedro Henrique são as mais “cross-browser”. Funcionaram no Chrome, Firefox e Safari. Nenhuma funcionou no Opera 🙁
    ——————————————————–

    Maujor disse:
    A proposta do desafio era para desenvolver uma CSS para o Firefox e não cross-browser.
    A finalidade foi a de não “inchar” o código com declarações repetidas
    trocando prefixos proprietários o que dificulta a leitura para aqueles que abrem o código com o objetivo de estudar a solução. 🙂

  18. Fernando DaciukNo Gravatar disse:

    Muito legal o desafio. Esse aprendizado não tem preço!

    Parabéns Maujor!

  19. MaujorNo Gravatar disse:

    Resultado final em: http://kwz.me/r1

  20. Victor GuedesNo Gravatar disse:

    Parabéns pela criação, cheguei até nesse quadrado do meio… mas acabei travando. Conhecia a função de gradiente, mas não sabia dessa opção de múltiplos gradientes. Agora no aguardo de solução.

  21. Fernando AlmeidaNo Gravatar disse:

    Quando vi o desafio nem sabia por onde começar, mas depois de muita pesquisa deu pra fazer algo…

    só esse losango chato que não ficou mto bom :/

  22. Leo BalterNo Gravatar disse:

    Essa solução foi a melhor: http://hugojunior.com/desafio_maujor/

    (é seguro e não fere as regras, podem abrir)

  23. MaujorNo Gravatar disse:

    Soluções recebidas
    Até: 27/10/2011 às 09:50 Brasília
    Cláudio Marcelo Baskeira;
    José Orlando Sousa;
    Leonardo Balter;
    Leonardo D. Schlossmacher;
    Luan Muniz;
    Pedro Henrique;
    Ycaro Afonso

  24. Lucas de LimaNo Gravatar disse:

    Puxa… quase consegui, fiquei preso no losango. =(

  25. Felipe RibeiroNo Gravatar disse:

    Posso fazer Utilizando HTML 5?
    ———————————————–
    Momento relax!

    Ploft!

    Vida de programador

  26. Lucas OliveiraNo Gravatar disse:

    opa! a noite já tenho com o que brincar! hehehe

    Pode ser usado CSS3 certo?!

    Abraço Maujor!

  27. Álex FilipeNo Gravatar disse:

    Não sei nem como começar, rs

  28. Nélio MatosNo Gravatar disse:

    Opa!
    Já rendeu até homenagem: http://vidadeprogramador.com.br/2011/10/26/prova-pratica/

  29. Gustavo MegonNo Gravatar disse:

    Caraca! =X

  30. RochesterNo Gravatar disse:

    Muito bom… quase lá, só o meu losango que ficou meio zuado… Enviei no e-mail!

    []’s

  31. XoinasNo Gravatar disse:

    Aah com CSS3 tà facil!!! :))))) Depois do trabalho (horario CET) vou tentar…

  32. RaynerNo Gravatar disse:

    Não é permitido a inserção de div no código HTML?
    :O
    Isso tudo é feito só pelo CSS?
    ———————————————————–
    Maujor disse:
    Não.
    É.

  33. WillNo Gravatar disse:

    Quem usou imagem é um fanfarrão, está clarissimo que é pra usar o css para renderizar a imagem, que acompanha as noticias sobre html, css e afins (e quem desenvolve web TEM que acompanhar isso) sabe que já é possível.

    Há uma página (não me lembro onde) em que o programador (maluco) renderizou a maioria dos icones dos aplicativos padrão do iPhone (sem usar imagem). Loucura!

  34. Felipe MendesNo Gravatar disse:

    na hora vieram Canvas na minha cabeça.. mas só em css eu não sei ainda.

  35. Luciano BaraúnaNo Gravatar disse:

    Caro Maujor

    É permitido o uso de css3 ?
    —————————————
    Maujor disse: Ver comentário 7

  36. Hugo JúniorNo Gravatar disse:

    Pô, tarde demais. kkk
    ————————————————
    Maujor disse: Tente sem imagem

  37. Fernando MoreiraNo Gravatar disse:

    aiai… faço a minima ideia de como fazer…!

  38. NltonNo Gravatar disse:

    Qual a versão do firefox a ser usada? A última?
    —————————————————
    Maujor disse: Sim

  39. Hugo JúniorNo Gravatar disse:

    Pode usar CSS3?
    —————————————————
    Maujor disse: Sim

  40. Fabiano Carrijo JustinoNo Gravatar disse:

    É ai que esta a brincadeira.. estou em horário de trabalho, a noite vou brincar com isso…

  41. RochesterNo Gravatar disse:

    Opa… Bem pensado heim, deve ter muita gente pensando “putz, tá faltando tag aqui!”

    Uma dica: lembrem que sempre tem o elemento, tem antes e depois 🙂

    Mais que isso estraga a brincadeira.

    []’s

  42. FernandoNo Gravatar disse:

    Caramba, é possível fazer isso usando só CSS?

  43. MaujorNo Gravatar disse:

    Obrigado ao Henrique Pacheco que lembrou que o desafio poderia ser resolvido usando uma imagem de fundo sem ferir as regras.
    Certo desde que o link seja para uma imagem em servidor web, pois você só poderá enviar a marcação HTML.
    Embora implícito, não foi dito que o uso de imagens não era permitido, mas vamos resolver sem imagens para “ter graça”.
    Ensinamento para os próximos desafios: proibir uso de imagens.

  44. MaujorNo Gravatar disse:

    Putz mesmo!
    Corrigido.

  45. Guilherme RosslerNo Gravatar disse:

    frist!

    putz.. não está sendo fechada a tag “body” no arquivo

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo