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

Publicado em: 2017-10-4 — 420 visualizacoes         

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em solucionar problemas fáceis de se resolver com scripts, mas que deveriam ser resolvidos exclusivamente com uso de CSS.

A série “caiu no gosto” dos então apaixonados por CSS, foi um sucesso que durou até 2011 e ficou consagrada com o nome de Desafios do Maujor.

Hoje, em um daqueles momentos de nostalgia, resolvi dar uma repassada nas matérias do Blog e 18 anos de vivência com Padrões Web povoaram meus pensamentos em alguns minutos.

Bons tempos aqueles dos desafios do Maujor, pena que perdeu a graça, comentei comigo. Pena uma ova! Evidência inequívoca que só tem fera na área. Àquela época tudo, ou quase tudo de CSS era novidade.

Tem tanta coisa, escondida nas dezenas de Especificações CSS do W3C que, não raro, eu encontro verdadeiras preciosidades. Ato contínuo vou para o site caniuse (abre em nova janela) e lá encontro a linha dos sites atuais toda em fundo verde-lindo, exceto para os dois amados primeiros itens da linha que quando o fundo não é na cor vermelha, é na cor verde diarreia.

A preciosidade que encontrei recentemente inspirou-me a publicar a seguinte proposta (nome atual para desafio do Maujor):

Na marcação HTML fornecida nesse link (abre em nova janela), acrescente declarações CSS no seletor div que se encontra na folha de estilos incorporada ao documento para obter a solução conforme mostrada na figura a seguir.

figura antes x depois da série desafios do maujor

Confirmando: No documento fornecido a única edição permitida é o acréscimo de declarações CSS para o seletor div. Você sabe, mas não é demais lembrar que a sintaxe de declarações CSS é: propriedade: valor; e declaração CSS é diferente de regra CSS.

Encontrou a solução? Quer compartilhar? Publique em (JSFiddle ou outro lugar) e informe o link.

Em breve divulgarei o resultado.

Divirta-se!

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: 2017-10-4 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2017/10/04/desafios-do-maujor-20/trackback no seu site.

Um comentário na matéria: “Teste seu conhecimento #20”

  1. Michael AlvesNo Gravatar disse:

    Grande Maujor. Bons tempos… obrigado por nos relembrar.

Comentário:





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

Subscribe without commenting

topo