Advertisement
Guest User

avgrund.css

a guest
Jan 17th, 2013
47
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.05 KB | None | 0 0
  1. /*!
  2.  * avgrund 0.1
  3.  * http://lab.hakim.se/avgrund
  4.  * MIT licensed
  5.  *
  6.  * Created by Hakim El Hattab, http://hakim.se
  7.  */
  8.  
  9. .avgrund-active body {
  10.     -webkit-transform: scale( 0.9 );
  11.        -moz-transform: scale( 0.9 );
  12.         -ms-transform: scale( 0.9 );
  13.          -o-transform: scale( 0.9 );
  14.             transform: scale( 0.9 );
  15. }
  16.  
  17. .avgrund-cover {
  18.     position: absolute;
  19.     width: 100%;
  20.     height: 100%;
  21.     top: 0;
  22.     left: 0;
  23.     z-index: 1;
  24.     visibility: hidden;
  25.     opacity: 0;
  26.     background: rgba( 0, 0, 0, 0.5 );
  27. }
  28.     .avgrund-active .avgrund-cover {
  29.         visibility: visible;
  30.         opacity: 1;
  31.     }
  32.  
  33. .avgrund-contents {
  34.     position: relative;
  35.     padding: 20px;
  36.     max-width: 400px;
  37.     height: 100%;
  38.     margin: auto;
  39. }
  40.     .avgrund-active .avgrund-contents {
  41.         -webkit-filter: blur(2px);
  42.            -moz-filter: blur(2px);
  43.             -ms-filter: blur(2px);
  44.              -o-filter: blur(2px);
  45.                 filter: blur(2px);
  46.     }
  47.     .no-blur.avgrund-active .avgrund-contents {
  48.         -webkit-filter: none;
  49.            -moz-filter: none;
  50.             -ms-filter: none;
  51.              -o-filter: none;
  52.                 filter: none;
  53.     }
  54.  
  55. .avgrund-popup {
  56.     position: absolute;
  57.     width: 340px;
  58.     height: 180px;
  59.     left: 50%;
  60.     top: 50%;
  61.     margin: -130px 0 0 -190px;
  62.     visibility: hidden;
  63.     opacity: 0;
  64.     z-index: 2;
  65.     padding: 20px;
  66.  
  67.     background: white;
  68.     box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
  69.     border-radius: 3px;
  70.  
  71.     -webkit-transform: scale( 0.8 );
  72.        -moz-transform: scale( 0.8 );
  73.         -ms-transform: scale( 0.8 );
  74.          -o-transform: scale( 0.8 );
  75.             transform: scale( 0.8 );
  76. }
  77.     .avgrund-active .avgrund-popup-animate {
  78.         visibility: visible;
  79.         opacity: 1;
  80.  
  81.         -webkit-transform: scale( 1.1 );
  82.            -moz-transform: scale( 1.1 );
  83.             -ms-transform: scale( 1.1 );
  84.              -o-transform: scale( 1.1 );
  85.                 transform: scale( 1.1 );
  86.     }
  87.     .avgrund-popup.stack {
  88.         -webkit-transform: scale( 1.5 );
  89.            -moz-transform: scale( 1.5 );
  90.             -ms-transform: scale( 1.5 );
  91.              -o-transform: scale( 1.5 );
  92.                 transform: scale( 1.5 );
  93.     }
  94.     .avgrund-active .avgrund-popup.stack {
  95.         -webkit-transform: scale( 1.1 );
  96.            -moz-transform: scale( 1.1 );
  97.             -ms-transform: scale( 1.1 );
  98.              -o-transform: scale( 1.1 );
  99.                 transform: scale( 1.1 );
  100.     }
  101.  
  102.  
  103. .avgrund-ready body,
  104. .avgrund-ready .avgrund-contents,
  105. .avgrund-ready .avgrund-popup,
  106. .avgrund-ready .avgrund-cover {
  107.     -webkit-transform-origin: 50% 50%;
  108.        -moz-transform-origin: 50% 50%;
  109.         -ms-transform-origin: 50% 50%;
  110.          -o-transform-origin: 50% 50%;
  111.             transform-origin: 50% 50%;
  112.  
  113.     -webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  114.        -moz-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  115.         -ms-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  116.          -o-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  117.             transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  118. }
  119. .avgrund-ready .avgrund-popup.no-transition {
  120.     -webkit-transition: none;
  121.        -moz-transition: none;
  122.         -ms-transition: none;
  123.          -o-transition: none;
  124.             transition: none;
  125. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement