Teste seu conhecimento 15
Publicado em: 2011-10-25 — 42.743 visualizacoes
DESAFIO ENCERRADO
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
- 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. - 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.
- 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. 😉
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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 https://www.maujor.com/blog/2011/10/25/teste-seu-conhecimento-15/trackback no seu site.
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.
[…] CSS challenge, this time made in Maujor web […]
Parabéns, eu falo algo de portugueis o seu é o único que funcionou 100% aqui no Opera 11.
[…] 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 […]
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
E Muito legal o desafio…. Parabéns Maujor!!!!!
aprendizado não tem preço!!!!
Ora vamos lá então aceitar o desafio html5 e ver no que dá. Penso que não será assim tão difícil.
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.)
Parabéns ao autor deste blog, com os seus desafios aprendi muito sob webdesign. Obrigado
Que legal! Pena que só estou vendo o desafio agora, mas vou tentar fazer mesmo assim, CSS é tudo de bom!
Alo, bom dia, esteve olhando teu blog, muito bom, parabens.
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.
O link para a solução se encontra offline.
Grato por informar.
Link corrigido: http://kwz.me/r1
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
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.
Opa, coloquei somente a nível de informação… Mas e aí, quando vai rolar o próximo? 😀
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
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 🙁
——————————————————–
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. 🙂
Muito legal o desafio. Esse aprendizado não tem preço!
Parabéns Maujor!
Resultado final em: http://kwz.me/r1
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.
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 :/
Essa solução foi a melhor: http://hugojunior.com/desafio_maujor/
(é seguro e não fere as regras, podem abrir)
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
Puxa… quase consegui, fiquei preso no losango. =(
Posso fazer Utilizando HTML 5?
———————————————–
Momento relax!
Vida de programador
opa! a noite já tenho com o que brincar! hehehe
Pode ser usado CSS3 certo?!
Abraço Maujor!
Não sei nem como começar, rs
Opa!
Já rendeu até homenagem: http://vidadeprogramador.com.br/2011/10/26/prova-pratica/
Caraca! =X
Muito bom… quase lá, só o meu losango que ficou meio zuado… Enviei no e-mail!
[]’s
Aah com CSS3 tà facil!!! :))))) Depois do trabalho (horario CET) vou tentar…
Não é permitido a inserção de div no código HTML?
:O
Isso tudo é feito só pelo CSS?
———————————————————–
Maujor disse:
Não.
É.
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!
na hora vieram Canvas na minha cabeça.. mas só em css eu não sei ainda.
Caro Maujor
É permitido o uso de css3 ?
—————————————
Maujor disse: Ver comentário 7
Pô, tarde demais. kkk
————————————————
Maujor disse: Tente sem imagem
aiai… faço a minima ideia de como fazer…!
Qual a versão do firefox a ser usada? A última?
—————————————————
Maujor disse: Sim
Pode usar CSS3?
—————————————————
Maujor disse: Sim
É ai que esta a brincadeira.. estou em horário de trabalho, a noite vou brincar com isso…
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
Caramba, é possível fazer isso usando só CSS?
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.
Putz mesmo!
Corrigido.
frist!
putz.. não está sendo fechada a tag “body” no arquivo