DESAFIO ENCERRADO Confira as soluções.
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
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!
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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 :P
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