API tools faq
paste
Advertisement
Guest User

popup - raka adi nugroho blogs

a guest
Apr 17th, 2014
444
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.68 KB | None | 0 0
raw download clone embed print report
  1.  
  2.         #popup
  3.         {  
  4.             width:500px;
  5.             height:300px;;
  6.             border:1px solid white;
  7.             background-color:white;
  8.             top:20%;
  9.             position:relative;
  10.             margin: 0 auto;
  11.             background: rgb(247, 247, 247);
  12.             border: 1px solid rgba(147, 184, 189,0.8);
  13.             -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),  0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
  14.                -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),  0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
  15.                     box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),  0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
  16.             -webkit-box-shadow: 10px;
  17.             -moz-border-radius: 10px;
  18.                  border-radius: 10px;
  19.                  opacity:1;
  20.                
  21.         }
  22.         #overlay_signup
  23.         {
  24.             position:absolute;
  25.             top:0px;
  26.             visibility:hidden;
  27.             background-color:black;
  28.             opacity:1;
  29.             left:0px;
  30.             height:100%;
  31.             width:100%;
  32.             text-align:center;
  33.            
  34.         }
  35.         #overlay_signup:target
  36.         {
  37.             visibility:visible;
  38.             -webkit-animation: fade 400ms ease;
  39.         }
  40.         #overlay_signup:target > #popup
  41.         {
  42.            
  43.              -webkit-animation: moveFromBottom 400ms ease;
  44.         }
  45.        
  46.         #overlay_gallary
  47.         {
  48.             position:absolute;
  49.             top:0px;
  50.             visibility:hidden;
  51.             background-color:black;
  52.             opacity:1;
  53.             left:0px;
  54.             height:100%;
  55.             width:100%;
  56.             text-align:center;
  57.         }
  58.         #overlay_gallary:target
  59.         {
  60.             visibility:visible;
  61.             -webkit-animation: fade 400ms ease;
  62.         }
  63.         #overlay_gallary:target > #popup
  64.         {
  65.            
  66.              -webkit-animation: moveFromBottom 400ms ease;
  67.         }
  68.         #overlay
  69.         {
  70.             position:absolute;
  71.             top:0px;
  72.             visibility:hidden;
  73.             background-color:black;
  74.             opacity:1;
  75.             left:0px;
  76.             height:100%;
  77.             width:100%;
  78.             text-align:center;
  79.         }
  80.         #overlay:target
  81.         {
  82.             visibility:visible;
  83.             -webkit-animation: fade 400ms ease;
  84.         }
  85.         #overlay:target > #popup
  86.         {
  87.            
  88.              -webkit-animation: moveFromBottom 400ms ease;
  89.         }
  90.         @-webkit-keyframes fade
  91.         {
  92.             from {
  93.                
  94.                
  95.                
  96.                 opacity: 0;
  97.             }
  98.             to {
  99.                
  100.                
  101.                 opacity: 1;        
  102.             }
  103.         }
  104.        
  105.        
  106.         @-webkit-keyframes moveFromBottom
  107.         {
  108.             from {
  109.                
  110.                
  111.                 -webkit-transform: scale(.5);
  112.                 opacity: 0;
  113.             }
  114.             to {
  115.                
  116.                 -webkit-transform: scale(1);
  117.                 opacity: 1;        
  118.             }
  119.         }
  120.        
  121.        
  122.         @-moz-keyframes fade
  123.         {
  124.             from {
  125.                
  126.                
  127.                
  128.                 opacity: 0;
  129.             }
  130.             to {
  131.                
  132.                
  133.                 opacity: 1;        
  134.             }
  135.         }
  136.        
  137.        
  138.         @-moz-keyframes moveFromBottom
  139.         {
  140.             from {
  141.                
  142.                
  143.                 -webkit-transform: scale(.5);
  144.                 opacity: 0;
  145.             }
  146.             to {
  147.                
  148.                 -webkit-transform: scale(1);
  149.                 opacity: 1;        
  150.             }
  151.         }
  152.        
  153.        
  154.         @-ms-keyframes fade
  155.         {
  156.             from {
  157.                
  158.                
  159.                
  160.                 opacity: 0;
  161.             }
  162.             to {
  163.                
  164.                
  165.                 opacity: 1;        
  166.             }
  167.         }
  168.        
  169.        
  170.         @-ms-keyframes moveFromBottom
  171.         {
  172.             from {
  173.                
  174.                
  175.                 -webkit-transform: scale(.5);
  176.                 opacity: 0;
  177.             }
  178.             to {
  179.                
  180.                 -webkit-transform: scale(1);
  181.                 opacity: 1;        
  182.             }
  183.         }
  184.        
  185.        
  186.         @-o-keyframes fade
  187.         {
  188.             from {
  189.                
  190.                
  191.                
  192.                 opacity: 0;
  193.             }
  194.             to {
  195.                
  196.                
  197.                 opacity: 1;        
  198.             }
  199.         }
  200.        
  201.        
  202.         @-o-keyframes moveFromBottom
  203.         {
  204.             from {
  205.                
  206.                
  207.                 -webkit-transform: scale(.5);
  208.                 opacity: 0;
  209.             }
  210.             to {
  211.                
  212.                 -webkit-transform: scale(1);
  213.                 opacity: 1;        
  214.             }
  215.         }
  216.        
  217.          @keyframes fade
  218.         {
  219.             from {
  220.                
  221.                
  222.                
  223.                 opacity: 0;
  224.             }
  225.             to {
  226.                
  227.                
  228.                 opacity: 1;        
  229.             }
  230.         }
  231.        
  232.        
  233.         @keyframes moveFromBottom
  234.         {
  235.             from {
  236.                
  237.                
  238.                 -webkit-transform: scale(.5);
  239.                 opacity: 0;
  240.             }
  241.             to {
  242.                
  243.                 -webkit-transform: scale(1);
  244.                 opacity: 1;        
  245.             }
  246.         }
  247.                
  248.      
  249.         .login
  250.         {
  251.             padding:30px;
  252.             margin-top:30px;
  253.            
  254.         }
  255.         .login label
  256.         {
  257.             font-size:25px;
  258.             font-family:sans-serif;
  259.         }
  260.        
  261.        
  262.        
  263.         .login .input
  264.         {
  265.             display: inline;
  266.             font-family: "Helvetica Neue", Arial, sans-serif;
  267.             border-style: solid;
  268.             border-width: 1px;
  269.             border-color: #dedede;
  270.            
  271.             font-size: 1.55em;
  272.             padding: 11px 25px;
  273.             padding-left: 55px;
  274.             width: 300px;
  275.             color: #777;
  276.            
  277.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  278.             -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  279.             -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  280.            
  281.         }
  282.        
  283.        
  284.        
  285.        
  286.         #submitbtn
  287.         {
  288.             height: 2em;
  289.             padding: 0 1em;
  290.             border: 1px solid;
  291.             outline: 0;
  292.             font-weight: bold;
  293.             font-size: 1.3em;
  294.             color: #fff;
  295.             text-shadow: 0px 1px 0px #222;
  296.             white-space: nowrap;
  297.             word-wrap: normal;
  298.             vertical-align: middle;
  299.             cursor: pointer;
  300.            
  301.             -moz-border-radius: 2px;
  302.             -webkit-border-radius: 2px;
  303.             border-radius: 2px;
  304.            
  305.             border-color: #030a03 #071807 #000;
  306.            
  307.             -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
  308.             -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
  309.             -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
  310.             box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
  311.            
  312.             background-color: #1c2107;
  313.             background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);
  314.             background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38)));
  315.             background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
  316.             background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
  317.             background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
  318.             background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
  319.             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );
  320.           }
  321.            
  322.            
  323.             .close_button
  324.             {
  325.                 position:absolute;
  326.                 right:1px;
  327.                 cursor:pointer;
  328.                 border:none;
  329.                 margin-top:-30px;
  330.             }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!