Teste seu conhecimento 10
Publicado em: 2009-11-11 — 17.969 visualizacoes
DESAFIO ENCERRADO Confira as soluções.
Emoticons com CSS (sem uso de imagens)
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:
- Pode usar qualquer elemento HTML e seus atributos;
- Não usar codificação de caracteres, por exemplo: • ou •
- Não usar scripts;
- Não usar imagens;
- Não usar tabelas;
- Não usar estilos inline;
- A renderização deve ser no Firefox 3x;
- 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 https://www.maujor.com/blog/2009/11/11/teste-seu-conhecimento-10/trackback no seu site.
Nossa locura esse Desafio .. Parabens …
To na lista! xD
Parabens pelo Desafio!
Achei fantástico a Iniciativa.
brincando um pouco.. at great fire (barata de fogo)
aheoauehaoiuheaUIOhea!! diversão faz parte!! :¬D
Boa, ja vi “home simpson” em css, fazer emoticon vai ser facil, so nao sei o :hover, irei fazer 😛
Parabens James, mandou bem,
gostei do desafio.
Obrigado Maujor
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!
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 =)
@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.
Muito bom, rs agora com a ajuda de todos consegui ahheauiheaiea!!
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
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
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.
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.
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!
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.
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.
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
dive umspan).Publiquei a solução de todos os autores relacionados no comentário anterior, para você conferir.
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
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..
🙁
Opa! To na lista! hehehhe
Parabens pelo Desafio!
Achei fantástico a Iniciativa.
AFF…. pequei na regra 8 né … ta grandão .. hhihihi
Eu enviei .. como não estou na lista … erro 🙁
To tentando arruma outra solução … vamo ve né
Woohoo!
Já enviei a minha. 🙂
O melhor desafio até agora! xD
Já to fazendo o meu.
:¬/ 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!
Solução enviada
Eu não gostei muito não…mas foi o jeito que eu encontrei =P
Pode mandar maisde uma solução?
Bacana demais.
Tentarei aqui se sobrar uma folga 🙂
:{ sofri.
Imaginando possibilidades aqui e …….nada .
Solução enviada para o mestre Maujor 😉
e eu .. vou ficar esperando a solução pq pra mim… ainda é #@&*…
Muito bom. Vou tentar 😀
Muito bacana este teste…. vou ver se tenho tempo de fazer os outrso.. abs!