Teste seu conhecimento 10
Publicado em: 2009-11-11 — 5.548 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!
----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Livros do Maujor
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.
Muito bacana este teste…. vou ver se tenho tempo de fazer os outrso.. abs!
Muito bom. Vou tentar
e eu .. vou ficar esperando a solução pq pra mim… ainda é #@&*…
Solução enviada para o mestre Maujor
:{ sofri.
Imaginando possibilidades aqui e …….nada .
Bacana demais.
Tentarei aqui se sobrar uma folga
Solução enviada
Eu não gostei muito não…mas foi o jeito que eu encontrei =P
Pode mandar maisde uma solução?
:¬/ 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!
O melhor desafio até agora! xD
Já to fazendo o meu.
Woohoo!
Já enviei a minha.
Eu enviei .. como não estou na lista … erro
To tentando arruma outra solução … vamo ve né
AFF…. pequei na regra 8 né … ta grandão .. hhihihi
Opa! To na lista! hehehhe
Parabens pelo Desafio!
Achei fantástico a Iniciativa.
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..
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
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.
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.
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.
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!
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.
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.
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
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
Muito bom, rs agora com a ajuda de todos consegui ahheauiheaiea!!
@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.
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 =)
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!
Parabens James, mandou bem,
gostei do desafio.
Obrigado Maujor
Boa, ja vi “home simpson” em css, fazer emoticon vai ser facil, so nao sei o :hover, irei fazer
brincando um pouco.. at great fire (barata de fogo)
aheoauehaoiuheaUIOhea!! diversão faz parte!! :¬D
To na lista! xD
Parabens pelo Desafio!
Achei fantástico a Iniciativa.
Nossa locura esse Desafio .. Parabens …