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 10

Publicado em: 2009-11-11 — 12.295 visualizacoes

DESAFIO ENCERRADO Confira as soluções.

Emoticons com CSS (sem uso de imagens)

emoticons

Vamos fazer este desafio focado para um “exercício de aprendizado e lazer”, deixando de lado as considerações de acessibilidade, uso na prática ou mesmo utilidade do exercício. Assim o objetivo é exercitar suas habilidades com a dupla HTML + CSS, procurando uma solução com uso de menos marcação possível. É necessário apenas que a marcação passe no validador do W3C.

A imagem acima é um screenshot do que se pretende obter. Ao carregar a página deverá ser apresentado o emoticon em seu estado normal, como mostrado na figura. Quando o usuário passar o mouse sobre ele o emoticon muda para a figura mostrada no estado mouse over.

Leia com atenção as regras a seguir. Não pode usar imagens! regra 4

Regras gerais:

  1. Pode usar qualquer elemento HTML e seus atributos;
  2. Não usar codificação de caracteres, por exemplo: • ou •
  3. Não usar scripts;
  4. Não usar imagens;
  5. Não usar tabelas;
  6. Não usar estilos inline;
  7. A renderização deve ser no Firefox 3x;
  8. O diâmetro do emoticon deve estar entre 180px e 220px.

Se você encontrar a solucão mande via email um arquivo gravado com o seu nome_sobrenomes.html (por exemplo: Jose_da_Silva.html – não mande arquivos zipados) para maujorcss[arroba]maujor[ponto]com. E, não poste a solução nos comentários, para que outros possam tentar.

Para cada solução correta recebida eu postarei nos comentários informando o nome do autor.
Dependendo da quantidade de soluções recebidas decidirei quando postar a solução.
Ah! não se esqueça que você pode se inscrever para receber email informando quando novos comentários forem postados nos arquivos no Blog e assim acompanhar uma matéria de seu interesse.

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 Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2009-11-11 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/11/11/teste-seu-conhecimento-10/trackback no seu site.

32 comentários na matéria: “Teste seu conhecimento 10”

  1. PabloNo Gravatar disse:

    Nossa locura esse Desafio .. Parabens …

  2. L2OuroNo Gravatar disse:

    To na lista! xD
    Parabens pelo Desafio!
    Achei fantástico a Iniciativa.

  3. Felipe BorcardNo Gravatar disse:

    brincando um pouco.. at great fire (barata de fogo)

    aheoauehaoiuheaUIOhea!! diversão faz parte!! :¬D

  4. ElisonNo Gravatar disse:

    Boa, ja vi “home simpson” em css, fazer emoticon vai ser facil, so nao sei o :hover, irei fazer 😛

  5. estevisNo Gravatar disse:

    Parabens James, mandou bem,
    gostei do desafio.
    Obrigado Maujor

  6. edydNo Gravatar disse:

    ah eu ia mandar agora o meu..
    não vi que já tinha terminado

    tinha feito uma solução usando para os olhos

    realmente a sacada dos dois pontos foi ótima
    Parabéns!

  7. Vitor N. ReisNo Gravatar disse:

    Acho que alguns dos publicados não estão exatamente de acordo com o pedido, pois o hover só está funcionando quando passamos o mouse sobre a boca, e não sobre o emoticon inteiro =)

  8. HazNo Gravatar disse:

    @Helio Souza

    até dá pra fazer funcionar no chrome, safari, etc. mas como o desafio era só pro Firefox 3x, só usaram o prefíxo -moz- pra fazer as bordas arredondadas.

  9. Felipe BorcardNo Gravatar disse:

    Muito bom, rs agora com a ajuda de todos consegui ahheauiheaiea!!

  10. Helio SouzaNo Gravatar disse:

    Muito legal… pena que não renderiza em outros browsers, né? Só no firefox mesmo para ver os circulos…

    No Chrome, p.ex., a melhor solução ficou com a “boca” do lado de fora… rsrsrsrsrsrs

    Bem que o próximo desafio poderia ser cross-browser!

    []’s

  11. Marco MannesNo Gravatar disse:

    O teste serviu para eu ver que bordas arredondadas já são suportadas desde a versão 3x do Firefox! Achei que não valia utilizar esse recurso.

    Meu smile é o único que fica arredondado no IE6! hehehe

  12. HazNo Gravatar disse:

    Parabéns a todos!
    Eu usei uma borda pontilhada pra fazer os olhos em uma única DIV, mas a solução do James Clébio foi muito boa… simples e objetiva.

  13. Jeferson SigalesNo Gravatar disse:

    Realmente, o James Clébio está de parabens!
    Sacada brilhante os olhos com dois pontos (..)

    E ao meu gosto, visualmente o do colega Diego Haz está muito bom.

    Parabens pra nós!

    Aguardamos o próximo desafio do nosso Grão Mestre Maujor.

  14. Julio BitencourtNo Gravatar disse:

    James Clébio, parabéns! Solução muito criativa!

    Parabéns ao maujor pela iniciativa dos desafios. Nos força a estudar e depois todos ganhamos estudando as soluções dos outros!

  15. Rael MaxNo Gravatar disse:

    Bom, só agora vi a resposta do Maujor do meu email. Enviei um arquivo .css separado do arquivo .html. Falha nossa! 🙂

    Deixa pra próxima.

  16. Allan BorgesNo Gravatar disse:

    Tenho que admitir que a solução do James Clébio foi brilhante,ele usou os caracteres ponto(.) para servir como olho,e aplicou a propriedade letter-spacing para deixar um espaçamento.

  17. MaujorNo Gravatar disse:

    Desafio encerrado.
    Excelente a participação dos leitores e impressionante como o pessoal está dominando CSS nos dias atuais. Há alguns anos quando eu lançava desafios quase ninguém conseguia resolver.
    Parabéns a todos, muito obrigado aos participantes e lamento por aqueles que esqueceram de validar o documento e foram desconsiderados, mas isto está claro nas regras.

    Destaque especial para a solução do James Clébio que resolveu com a marcação mínima (um div e um span).

    Publiquei a solução de todos os autores relacionados no comentário anterior, para você conferir.

  18. MaujorNo Gravatar disse:

    Este comentário é atualizado sempre que recebo uma solução certa.
    Os seguintes autores (em ordem alfabética) enviaram a solução certa para o desafio:
    Allan Borges;
    Bruno Zonovelli;
    Caio Tarifa;
    Diego Haz;
    Digones Faccini;
    Estevis Tristão;
    Fábio Emerson;
    Gustavo Campos Ferreira Guimaraes;
    Iderlando Rodrigues;
    James Clébio;
    Jeferson Sigales;
    Júlio Bitencourt;
    Leonardo Souza;
    Luan Muniz;
    Luiz Gustavo Soares;
    Mateus Manosso Barszcz;
    Piero Giusti;
    Rodrigo Padovani;
    Vitor Napolião Reis.

    O autor Marco Mannes enviou uma solução que ele mesmo diz ser *tosca*

    Desafio encerra hoje às 15:00h

  19. RaphaelDDLNo Gravatar disse:

    Errei uma coisa idiota..
    Meu nome é Raphael França e então, coloquei no Title.

    Não passou no W3C pq ç dá pal em UTF-8 então teria que colocar & ccedil ;.

    Mandei a correção mas o Maujor não aceitou.

    “Shorey osseanus” por que ele não vai considerar a correção..
    🙁

  20. Jeferson SigalesNo Gravatar disse:

    Opa! To na lista! hehehhe

    Parabens pelo Desafio!
    Achei fantástico a Iniciativa.

  21. jairohvsNo Gravatar disse:

    AFF…. pequei na regra 8 né … ta grandão .. hhihihi

  22. jairohvsNo Gravatar disse:

    Eu enviei .. como não estou na lista … erro 🙁
    To tentando arruma outra solução … vamo ve né

  23. Rael MaxNo Gravatar disse:

    Woohoo!
    Já enviei a minha. 🙂

  24. HazNo Gravatar disse:

    O melhor desafio até agora! xD
    Já to fazendo o meu.

  25. Felipe BorcardNo Gravatar disse:

    :¬/ gostei do desafio mas pra mim ainda tá foda, vou esperar ancioso a solução para clarear minha mente aheaoeaieha! ta muito escuro aqui ainda aheauoiheauea!! valeu Maujor vc é demais!

  26. Luan MunizNo Gravatar disse:

    Solução enviada
    Eu não gostei muito não…mas foi o jeito que eu encontrei =P
    Pode mandar maisde uma solução?

  27. RaphaelDDLNo Gravatar disse:

    Bacana demais.

    Tentarei aqui se sobrar uma folga 🙂

  28. Roniel SantanaNo Gravatar disse:

    :{ sofri.

    Imaginando possibilidades aqui e …….nada .

  29. Fábio EmersonNo Gravatar disse:

    Solução enviada para o mestre Maujor 😉

  30. Fabio BotelhoNo Gravatar disse:

    e eu .. vou ficar esperando a solução pq pra mim… ainda é #@&*…

  31. IderlandoNo Gravatar disse:

    Muito bom. Vou tentar 😀

  32. Luan GarciaNo Gravatar disse:

    Muito bacana este teste…. vou ver se tenho tempo de fazer os outrso.. abs!

Comentário:





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

Subscribe without commenting

topo