Teste seu conhecimento 10

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:

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!