Alertas estilo de notificaciones Toast de Android

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

toastexampleSi eres usuario del sistema operativo de teléfonos móviles Android te habrás encontrado en más de una ocasión, cuando una operación es realizada con éxito con las notificaciones emergentes llamadas Toast. Un ejemplo de esto es el sistema de avisos que recibimos al activar una alarma, que nos notifica cuántas horas de sueño podremos tener antes de que suene.

A continuación aprenderemos a realizar un sistema de alertas tipo Toast utilizando HTML y CSS.

Las transiciones CSS nos permiten alterar una propiedad de CSS durante un determinado periodo de tiempo.

#toast{
position: fixed;
top: 20px;
left: 50%;
width: 200px;
margin-left: -100px;
border: 1px solid #666;
background-color: #B1BCCF;
padding: 10px 0 ;
text-align:center;
opacity: .9;

/*The good stuff */
-webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */
-moz-transition: opacity 0.5s ease-out; /* FF4+ */
-ms-transition: opacity 0.5s ease-out; /* IE10? */
-o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */
transition: opacity 0.5s ease-out;

}

[browser css keyword]: [property to animate] [duration] [easing method]

Para finalizar, cambia el valor de la propiedad a la que has añadido un transform, y el navegador se encargará del resto. Por eso, para que el mensaje emergente se desvanezca, habrá que configurar la opacidad en 0.

Finalmente, un poco de Javascript:

function hideToast(){
    var alert = document.getElementById("toast");
    alert.style.opacity = 0;

}

Lo bueno del concepto, es que este tipo de notificaciones simplifican el proceso de la configuración de opciones. Normalmente, en otros entornos virtuales, simplemente se nos informa de que el cambio ha sido realizado y luego debemos volver manualmente a la pantalla principal de opciones.

En cambio, con estas alertas emergentes, recibes la confirmación a través de un sólo mensaje que a su vez, nos envía de regreso a la pantalla anterior.

Las transiciones CSS nos permiten alterar una propiedad de CSS durante un determinado periodo de tiempo.

Puedes ver un ejemplo de este tipo de alertas con estilo de notificaciones Toast de Android en Toast Demo.

Sé la primera persona en comentar

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.