Cómo crear una notificación al estilo Mountain Lion con CSS3

Con Mountain Lion llegaron las notificaciones que nos facilitan la vida haciendo que ahora no necesitemos abrir una aplicación para ver que es lo que hay de nuevo con nuestra vida social. Las notificaciones aparecen en la parte superior derecha y después de un tiempo desaparecen.

Hay varios tipos de notificaciones, pero en este tutorial vamos a ver cómo crear una notificación sencilla con CSS3, que aparezca y desaparezca sin dejar rastro alguno.usando animaciones y un diseño bonito.

Dificultad del tutorial: medio
Demo del tutorial

HTML

Para nuestro HTML necesitamos una capa contenedora que tiene una imagen y dos capas, una para un título y otra para la descripción, nada del otro mundo.

CSS

Primero tenemos que darle forma a nuestra capa contenedora y para poder crear el degradado que tiene usamos muchas líneas de código, pero no se preocupen, son muchas para lograr la máxima compatibilidad de degradado, ya que es quizá de las propiedades que más variantes tiene para cada navegador. Al final creamos una instancia de animación “noti” para que dure 15 segundos.

Lo que sigue es configurar la imagen, el título y el texto para que tengan una mejor posición y color.

Por último, configuramos nuestra animación. Si se fijan nuestra notificación está escondida fuera del marco del sitio y tiene una opacidad de 0. Con la animación vamos a hacer que baje y aparezca, se mantenga por un tiempo y después vuelva a aparecer.

Recuerden incluir los sufijos para cada navegador, yo los omití para que no vieran tanto código, pero tendrían que ponerlos también.

 

Si todo salió bien ya deberían tener una notificación saliendo de la pantalla automáticamente.