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 — 20.302 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. 😉

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: 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