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 — 14.220 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!

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

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