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 #18

Publicado em: 2013-03-22 — 24.420 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:

imagem

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

  1. 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>
    
  2. Use a propriedade CSS background e gradientes lineares para criar a imagem.
  3. Você pode inserir tantos elementos 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.
  4. 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.
  5. 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).
  6. 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.
  7. 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 http://www.maujor.com/blog/2013/03/22/teste-seu-conhecimento-18/trackback no seu site.

21 comentários na matéria: “Teste seu conhecimento #18”

  1. AquariumNo Gravatar disse:

    Bom!

  2. Marcelo MadeiraNo Gravatar disse:

    Bruna Pedroso, parabéns pela sua solução. Ficou show!!

  3. MaujorNo Gravatar disse:

    O resultado sai dia 22/04/2013

  4. jonathan silvaNo Gravatar disse:

    Maujor, quando sai o resultado do desafio?

  5. MaujorNo Gravatar disse:

    @James Clébio
    Não.

  6. Edvard JúniorNo Gravatar disse:

    Se não é necessário ser uma cópia perfeita e sim manter a idéia da imagem, o meu já enviei.

  7. James ClébioNo Gravatar disse:

    @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?

  8. GiovaniNo Gravatar disse:

    Feito, enviado.

    Grande desafio. 😀

  9. Paulo CarvalhoNo Gravatar disse:

    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?

  10. MaujorNo Gravatar disse:

    @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.

  11. Fabrício MattéNo Gravatar disse:

    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.

  12. Fabrício MattéNo Gravatar disse:

    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. =]

  13. Lucas TrevisanNo Gravatar disse:

    Acabei de enviar o meu!
    Muito legal esse desafio e, como sempre, vendo coisas novas 🙂

  14. Igor PimentelNo Gravatar disse:

    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!

  15. Natan MoraesNo Gravatar disse:

    Um ótimo desafio.

    Arquivo enviado 🙂

  16. Fabrício SilvaNo Gravatar disse:

    Primeiro desafio que faço! \o/

    Espero ter feito do jeito certo!

  17. Leonardo Weslei DinizNo Gravatar disse:

    @Maujor obrigado e me perdoe, me confundi.
    Arquivo enviado!

  18. Luiz TiagoNo Gravatar disse:

    background-image 🙂

  19. Luiz TiagoNo Gravatar disse:

    Já estava fazendo usando border e só depois li que era com background-position 🙂

    #vamoquevamo

  20. MaujorNo Gravatar disse:

    @Leonardo
    Por favor leia a matéria com atenção.
    Isso está claro no texto.

  21. Leonardo Weslei DinizNo Gravatar disse:

    Pode usar somente um prefixo de browser o tem que ser cross-browser?

Comentário:





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

Subscribe without commenting

topo