API tools faq
paste
unitistar

Login form

unitistar
May 23rd, 2012
66
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
LOL Code 7.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  5.  <link rel="shortcut icon" href="/favicon.ico" />
  6. <title>Форма входа на CSS3 и HTML5</title>
  7. <style>
  8.  
  9. html, body
  10. {
  11.     height: 100%;
  12. }
  13.  
  14. body
  15. {
  16.     font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;    
  17.     margin: 0;
  18.     background-color: #d9dee2;
  19.     background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));
  20.     background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);
  21.     background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);
  22.     background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);
  23.     background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);
  24.     background-image: linear-gradient(top, #ebeef2, #d9dee2);    
  25. }
  26.  
  27. /*--------------------*/
  28.  
  29. #login
  30. {
  31.     background-color: #fff;
  32.     background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  33.     background-image: -webkit-linear-gradient(top, #fff, #eee);
  34.     background-image: -moz-linear-gradient(top, #fff, #eee);
  35.     background-image: -ms-linear-gradient(top, #fff, #eee);
  36.     background-image: -o-linear-gradient(top, #fff, #eee);
  37.     background-image: linear-gradient(top, #fff, #eee);  
  38.     height: 240px;
  39.     width: 400px;
  40.     margin: -150px 0 0 -230px;
  41.     padding: 30px;
  42.     position: absolute;
  43.     top: 50%;
  44.     left: 50%;
  45.     z-index: 0;
  46.     -moz-border-radius: 3px;
  47.     -webkit-border-radius: 3px;
  48.     border-radius: 3px;  
  49.     -webkit-box-shadow:
  50.           0 0 2px rgba(0, 0, 0, 0.2),
  51.           0 1px 1px rgba(0, 0, 0, .2),
  52.           0 3px 0 #fff,
  53.           0 4px 0 rgba(0, 0, 0, .2),
  54.           0 6px 0 #fff,  
  55.           0 7px 0 rgba(0, 0, 0, .2);
  56.     -moz-box-shadow:
  57.           0 0 2px rgba(0, 0, 0, 0.2),  
  58.           1px 1px   0 rgba(0,   0,   0,   .1),
  59.           3px 3px   0 rgba(255, 255, 255, 1),
  60.           4px 4px   0 rgba(0,   0,   0,   .1),
  61.           6px 6px   0 rgba(255, 255, 255, 1),  
  62.           7px 7px   0 rgba(0,   0,   0,   .1);
  63.     box-shadow:
  64.           0 0 2px rgba(0, 0, 0, 0.2),  
  65.           0 1px 1px rgba(0, 0, 0, .2),
  66.           0 3px 0 #fff,
  67.           0 4px 0 rgba(0, 0, 0, .2),
  68.           0 6px 0 #fff,  
  69.           0 7px 0 rgba(0, 0, 0, .2);
  70. }
  71.  
  72. #login:before
  73. {
  74.     content: '';
  75.     position: absolute;
  76.     z-index: -1;
  77.     border: 1px dashed #ccc;
  78.     top: 5px;
  79.     bottom: 5px;
  80.     left: 5px;
  81.     right: 5px;
  82.     -moz-box-shadow: 0 0 0 1px #fff;
  83.     -webkit-box-shadow: 0 0 0 1px #fff;
  84.     box-shadow: 0 0 0 1px #fff;
  85. }
  86.  
  87. /*--------------------*/
  88.  
  89. h1
  90. {
  91.     text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
  92.     text-transform: uppercase;
  93.     text-align: center;
  94.     color: #666;
  95.     margin: 0 0 30px 0;
  96.     letter-spacing: 4px;
  97.     font: normal 26px/1 Verdana, Helvetica;
  98.     position: relative;
  99. }
  100.  
  101. h1:after, h1:before
  102. {
  103.     background-color: #777;
  104.     content: "";
  105.     height: 1px;
  106.     position: absolute;
  107.     top: 15px;
  108.     width: 120px;  
  109. }
  110.  
  111. h1:after
  112. {
  113.     background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
  114.     background-image: -webkit-linear-gradient(left, #777, #fff);
  115.     background-image: -moz-linear-gradient(left, #777, #fff);
  116.     background-image: -ms-linear-gradient(left, #777, #fff);
  117.     background-image: -o-linear-gradient(left, #777, #fff);
  118.     background-image: linear-gradient(left, #777, #fff);      
  119.     right: 0;
  120. }
  121.  
  122. h1:before
  123. {
  124.     background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
  125.     background-image: -webkit-linear-gradient(right, #777, #fff);
  126.     background-image: -moz-linear-gradient(right, #777, #fff);
  127.     background-image: -ms-linear-gradient(right, #777, #fff);
  128.     background-image: -o-linear-gradient(right, #777, #fff);
  129.     background-image: linear-gradient(right, #777, #fff);
  130.     left: 0;
  131. }
  132.  
  133. /*--------------------*/
  134.  
  135. fieldset
  136. {
  137.     border: 0;
  138.     padding: 0;
  139.     margin: 0;
  140. }
  141.  
  142. /*--------------------*/
  143.  
  144. #inputs input
  145. {
  146.     background: #f1f1f1 url(http://www.red-team-design.com/wp-content/uploads/2011/09/login-sprite.png) no-repeat;
  147.     padding: 15px 15px 15px 30px;
  148.     margin: 0 0 10px 0;
  149.     width: 353px; /* 353 + 2 + 45 = 400 */
  150.     border: 1px solid #ccc;
  151.     -moz-border-radius: 5px;
  152.     -webkit-border-radius: 5px;
  153.     border-radius: 5px;
  154.     -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  155.     -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  156.     box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  157. }
  158.  
  159. #username
  160. {
  161.     background-position: 5px -2px !important;
  162. }
  163.  
  164. #password
  165. {
  166.     background-position: 5px -52px !important;
  167. }
  168.  
  169. #inputs input:focus
  170. {
  171.     background-color: #fff;
  172.     border-color: #e8c291;
  173.     outline: none;
  174.     -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  175.     -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  176.     box-shadow: 0 0 0 1px #e8c291 inset;
  177. }
  178.  
  179. /*--------------------*/
  180. #actions
  181. {
  182.     margin: 25px 0 0 0;
  183. }
  184.  
  185. #submit
  186. {      
  187.     background-color: #ffb94b;
  188.     background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
  189.     background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
  190.     background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
  191.     background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
  192.     background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
  193.     background-image: linear-gradient(top, #fddb6f, #ffb94b);
  194.    
  195.     -moz-border-radius: 3px;
  196.     -webkit-border-radius: 3px;
  197.     border-radius: 3px;
  198.    
  199.     text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  200.    
  201.      -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  202.      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  203.      box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
  204.    
  205.     border-width: 1px;
  206.     border-style: solid;
  207.     border-color: #d69e31 #e3a037 #d5982d #e3a037;
  208.  
  209.     float: left;
  210.     height: 35px;
  211.     padding: 0;
  212.     width: 120px;
  213.     cursor: pointer;
  214.     font: bold 15px Arial, Helvetica;
  215.     color: #8f5a0a;
  216. }
  217.  
  218. #submit:hover,#submit:focus
  219. {      
  220.     background-color: #fddb6f;
  221.     background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
  222.     background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
  223.     background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
  224.     background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
  225.     background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
  226.     background-image: linear-gradient(top, #ffb94b, #fddb6f);
  227. }  
  228.  
  229. #submit:active
  230. {      
  231.     outline: none;
  232.    
  233.      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  234.      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  235.      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;       
  236. }
  237.  
  238. #submit::-moz-focus-inner
  239. {
  240.   border: none;
  241. }
  242.  
  243. #actions a
  244. {
  245.     color: #3151A2;    
  246.     float: right;
  247.     line-height: 35px;
  248.     margin-left: 10px;
  249. }
  250.  
  251. /*--------------------*/
  252.  
  253. #back
  254. {
  255.     display: block;
  256.     text-align: center;
  257.     position: relative;
  258.     top: 60px;
  259.     color: #999;
  260. }
  261. </style>
  262. </head>
  263.  
  264. <body>
  265.  
  266. <form id="login">
  267.     <h1>Войти</h1>
  268.     <fieldset id="inputs">
  269.         <input id="username" placeholder="Логин" autofocus="" required="" type="text">  
  270.         <input id="password" placeholder="Пароль" required="" type="password">
  271.     </fieldset>
  272.     <fieldset id="actions">
  273.         <input id="submit" value="Войти" type="submit">
  274.         <a href="">You loste password?</a><a href="">Registration!</a>
  275.     </fieldset>
  276. </form>
  277.  
  278.  
  279.  
  280.  
  281.  
  282. </body>
  283. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!