Morton 29 de Diciembre de 2011 a las 06.36
   Imprimir artículo
elWebmaster.com

Alertas emergentes estilo Android con HTML y CSS

CSS, Android, alerta, mensaje, ventana, emergente, toast

css3wide1En Android, encontramos notificaciones emergentes cuando una operación es realizada con éxito. El mejor ejemplo es ese aviso que recibimos al activar una alarma, que nos indica cuántas horas de sueño podremos tener antes de que suene. Aprenderemos a realizar algo similar con tan sólo un poco de HTML y un poco de CSS.

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.

Ver una demostración >>

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

PLAIN TEXT
  1. <span class="content"><span class="block" style="margin-left: 0px;"><code class="plain">#toast{</code></span></span>
  2. <div class="line alt2"><code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">position</code><code class="plain">: </code><code class="value">fixed</code><code class="plain">;</code></span></span></div>
  3. <div class="line alt1"><code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">top</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></span></span></div>
  4. <div class="line alt2"><code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">left</code><code class="plain">: </code><code class="value">50%</code><code class="plain">;</code></span></span></div>
  5. <div class="line alt1"><code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">width</code><code class="plain">: </code><code class="value">200px</code><code class="plain">;</code></span></span></div>
  6. <div class="line alt2"><code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">margin-left</code><code class="plain">: </code><code class="value">-100px</code><code class="plain">;</code></span></span></div>
  7. <div class="line alt1"><code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code> <code class="value">#666</code><code class="plain">;</code></span></span></div>
  8. <div class="line alt2"><code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">background-color</code><code class="plain">: </code><code class="value">#B1BCCF</code><code class="plain">;</code></span></span></div>
  9. <div class="line alt1"><code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">padding</code><code class="plain">: </code><code class="value">10px</code> <code class="value">0</code> <code class="plain">;</code></span></span></div>
  10. <div class="line alt2"><code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">text-align</code><code class="plain">:</code><code class="value">center</code><code class="plain">;</code></span></span></div>
  11. <div class="line alt1"><code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="plain">opacity: .</code><code class="value">9</code><code class="plain">;</code></span></span></div>
  12. <div class="line alt2"><code class="number">12.</code><span class="content"><span class="block" style="margin-left: 7px;"> </span></span></div>
  13. <div class="line alt1"><code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="comments">/*The good stuff */</code></span></span></div>
  14. <div class="line alt2"><code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="plain">-webkit-transition: opacity </code><code class="value">0.5</code><code class="plain">s ease-out; </code><code class="comments">/* Saf3.2+, Chrome */</code></span></span></div>
  15. <div class="line alt1"><code class="number">15.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="plain">-moz-transition: opacity </code><code class="value">0.5</code><code class="plain">s ease-out; </code><code class="comments">/* FF4+ */</code></span></span></div>
  16. <div class="line alt2"><code class="number">16.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="plain">-ms-transition: opacity </code><code class="value">0.5</code><code class="plain">s ease-out; </code><code class="comments">/* IE10? */</code></span></span></div>
  17. <div class="line alt1"><code class="number">17.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="plain">-o-transition: opacity </code><code class="value">0.5</code><code class="plain">s ease-out; </code><code class="comments">/* Opera 10.5+ */</code></span></span></div>
  18. <div class="line alt2"><code class="number">18.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="plain">transition: opacity </code><code class="value">0.5</code><code class="plain">s ease-out;</code></span></span></div>
  19. <div class="line alt1"><code class="number">19.</code><span class="content"><span class="block" style="margin-left: 7px;">
  20. </span></span></div>

Una vez hecho esto, el resto es muy simple. Básicamente, lo que debes hacer es cambiar 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:

PLAIN TEXT
  1. <span class="content"><span class="block" style="margin-left: 0px;"><code class="keyword">function</code> <code class="plain">hideToast(){</code></span></span>
  2. <div class="line alt2"><code class="number">2.</code><span class="content"><span class="block" style="margin-left: 28px;"><code class="keyword">var</code> <code class="plain">alert = document.getElementById(</code><code class="string">"toast"</code><code class="plain">);</code></span></span></div>
  3. <div class="line alt1"><code class="number">3.</code><span class="content"><span class="block" style="margin-left: 28px;"><code class="plain">alert.style.opacity = 0;</code></span></span></div>
  4. <div class="line alt2"><code class="number">4.</code><span class="content"><span class="block" style="margin-left: 35px;"> </span></span></div>
  5. <div class="line alt1"><code class="number">5.</code><span class="content"><span class="block" style="margin-left: 0px;"><code class="plain">}</code></span></span></div>

¡Y listo! Esperamos que les haya sido de utilidad.

Ver una demostración >>

Fuente original del artículo: DZone
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión