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
<!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>
background e gradientes lineares para criar a imagem.div na seção body da 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.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.
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. 😉
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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. :D
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.