Teste seu conhecimento #18
Publicado em: 2013-03-22 — 33.459 visualizacoes
Desafio encerrado. Resultado publicado neste link
A inspiração para lançar esse Desafio do Maujor #18 veio de uma matéria de autoria do Bernard De Luna publicada há dois dias no site Tableless (link abre em nova janela). Na matéria o autor incita os leitores a não usar uma das inúmeras ferramentas online para criar gradientes lineares.
Bernard chama seus leitores a criar gradientes lineares com uso das funcionalidades das CSS3 codificando “a unha” e justifica deixando implícito que ao conhecer e saber empregar aquelas funcionalidades ficarão em condições de criar efeitos muito mais agradáveis e de grande impacto visual do que aqueles gerados por ferramentas online.
E, segue explicando a teoria e mostrando vários exemplos de gradientes lineares.
Eu acrescentaria: Seja criativo! Para gradientes lineares vá além do Ctrl+C/Ctrl+V. Entenda como funciona essa poderosa funcionalidade das CSS3.
Mas, na verdade o que me inspirou a lançar o desafio não foi a matéria muito bem escrita pelo Bernard e sim a imagem que está colocada na abertura da matéria. A imagem transcrita a seguir:
O desafio consiste em criar a imagem mostrada, somente a imagem, ou seja, estão fora os textos: “20 de marco de 2013”, “CSS3” bem como o título da matéria, com uso de gradiente-linear
Regras gerais
- Use a seguinte marcação HTML5:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>Imagem com linear-gradient das CSS3</title> <style type="text/css"> /* insira a folha de estilo aqui */ </style> </head> <body> <!-- insira aqui tantos elementos div quanto necessários --> </body> </html>
- Use a propriedade CSS
backgrounde gradientes lineares para criar a imagem. - Você pode inserir tantos elementos
divna seçãobodyda marcação quantos considere necessários, mas a inserção é somente das tags de abertura e fechamento (<div></div>) e nada mais. Não insira atributos nem conteúdos. - Não precisa usar prefixo proprietário nas CSS pois os navegadores Firefox e Opera dão suporte nativo para gradiente linear. Mas, se preferir use-os.
- Seu trabalho deve ser enviado por email para: maujor[AT]maujor[PT]com e no assunto escreva: desafio18. Envie somente um arquivo .html (com as CSS incorporadas ao arquivo) não zipado e nomeado com o seu nome, separe nome e sobrenomes com hífen (por exemplo: jose-maria-da-silva.html).
- O recebimento e triagem dos emails é automatizado e baseados nas regras acima. Se você usar underscore no nome do arquivo ou usar letra maiúscula, ou assunto diferente do indicado, ou enviar mais de um arquivo, etc., o script bloqueia a chegada do seu email e eu nunca vou saber que você enviou um trabalho. De toda forma acusarei o mais breve possível o recebimento dos trabalhos.
- Prazo de entrega: 15 de abril de 2013.
Premiação
Entre os trabalhos corretos recebidos vou separar aquele(s) que usou(aram) o menor número de divs. Entre os separados se houver só um ele será declarado “o escolhido” se mais de um, o “escolhido” será por sorteio. O autor do “escolhido” receberá em qualquer endereço no Brasil um exemplar do meu livro “CSS3″ autografado e livre de qualquer despesa.
Sugestões
Na minha solução crie a imagem com as dimensões de 655px por 365px e as cores #0081b9, #007a34, #a1a2a3. Isso é apenas uma sugestão, você não precisa usar as mesmas dimensões e não se trata de uma trabalho pixel perfeito.
Dúvidas? Pergunte nos comentários.
Divirta-se e não se stresse 🙂
Em tempo — Dica para o desafio:
Quanto menos marcação você usar (DIVs) mais avançados são seus conhecimentos sobre gradientes lineares.
É possível resolver o desafio com UM div apenas. 😉
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2013-03-22 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2013/03/22/teste-seu-conhecimento-18/trackback no seu site.
Bom!
Bruna Pedroso, parabéns pela sua solução. Ficou show!!
O resultado sai dia 22/04/2013
Maujor, quando sai o resultado do desafio?
@James Clébio
Não.
Se não é necessário ser uma cópia perfeita e sim manter a idéia da imagem, o meu já enviei.
@Maujor, o post explica claramente que os textos na imagem não são necessários. Minha dúvida somente é: os boxes por trás dos textos devem estar presentes na imagem?
Feito, enviado.
Grande desafio. 😀
Maujor você disse que os textos não precisam aparecer, mas e o quadrado branco e o preto com opacidade você quer que eles estejam presentes?
@Fabrício Matté
Suas respostas:
1-) Muito bem observado, de vez que é possível resolver sem acrescentar DIVs.
Vou fazer o seguinte:
Três sorteios e determinar três “escolhidos”, um entre as soluções sem DIVs, outro com o 1 DIV e outro com qualquer número de DIVs.
2-) Não serão considerados os “detalhes” na reprodução da imagem.
3-) Como dito nas “Sugestões” adote um tamanho aproximado de 655px por 365px e não se preocupe com proporção.
Ah, desculpe pelas perguntas redundantes, li mais uma vez e encontrei respostas para #2 e parcialmente #3, porém gostaria obter resposta para a pergunta #1.
Maujor, tenho algumas dúvidas.
1. Quanto ao número de divs: caso o desafio seja feito sem nenhuma div, matematicamente falando 0 < 1. Isso conta como vantagem, ou causa desqualificação, ou não faz diferença desde que os estilos sejam aplicados em um único elemento?
2. Quanto à semelhança ao original: observando a imagem com atenção, nota-se que alguns triângulos cinzas não são perfeitamente fechados perto da borda do elemento, e também os hexágonos verdes não possuem uma simetria perfeito. A reprodução destes "detalhes" serão avaliados?
3. Quanto ao tamanho da reprodução: deve ser reproduzido no tamanho exato do .jpg ou desde que mantenha a proporção está OK (ex.: responsivo 100% width mantendo proporção)?
Grato. =]
Acabei de enviar o meu!
Muito legal esse desafio e, como sempre, vendo coisas novas 🙂
Grande Desafio, Maujor!
Valeu a pena parar um pouco para brincar com CSS. Já enviei o meu!
Você envia alguma confirmação do recebimento por e-mail? Ou poderia confirmar se recebeu o meu? Pergunto isso, pois mesmo seguindo todas as regras, no Desafio 16 o meu não foi recebido.
Grande Abraço!
Um ótimo desafio.
Arquivo enviado 🙂
Primeiro desafio que faço! \o/
Espero ter feito do jeito certo!
@Maujor obrigado e me perdoe, me confundi.
Arquivo enviado!
background-image 🙂
Já estava fazendo usando border e só depois li que era com background-position 🙂
#vamoquevamo
@Leonardo
Por favor leia a matéria com atenção.
Isso está claro no texto.
Pode usar somente um prefixo de browser o tem que ser cross-browser?