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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *