Smiley con CSS3

Una de las mejores formas de aprender algo es viendo un ejemplo. La ventaja del diseño web frente a otras disciplinas es que siempre puedes ver cómo está hecho accediendo a su código. En el Demo Studio de Mozilla hay ahora mismo 633 demos de ejemplos categorizadas por tecnologías (HTML5, Vídeo, SVG, Mobile, formularios, etc.)

En nuestro caso la categoría es CSS3, en ella puedes encontrar desde Super Mario Bros (juego) y Mario Bros (dibujo), un planetario o esta curiosa y simpática ilusión óptica tipográfica.

Este es un ejemplo sencillo, el famoso emoticon smiley inevntado en 1963, sin canvas ni javascript, simple y llano CSS, border-radius para los ojos, un degradado para el fondo y para la boca un border-bottom.

smiley-css3

Ver demo Smile CSS3

Escribí esto el 7/04/2013

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies