Posted By

tpryan on 12/22/11


Tagged

css transition toast


Versions (?)

Toast CSS Definition


 / Published in: CSS
 

A CSS definition for an Android like toast in HTML.

  1. #toast{
  2. position: fixed;
  3. top: 20px;
  4. left: 50%;
  5. width: 200px;
  6. margin-left: -100px;
  7. border: 1px solid #666;
  8. background-color: #B1BCCF;
  9. padding: 10px 0 ;
  10. text-align:center;
  11. opacity: .9;
  12.  
  13. /*The good stuff */
  14. -webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */
  15. -moz-transition: opacity 0.5s ease-out; /* FF4+ */
  16. -ms-transition: opacity 0.5s ease-out; /* IE10? */
  17. -o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */
  18. transition: opacity 0.5s ease-out;
  19.  
  20. }

Report this snippet  

You need to login to post a comment.