API tools faq
paste
Venciity

[CSS] presentation ДОМАШНО - 4 задача CSS

Venciity
Feb 7th, 2014
146
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.06 KB | None | 0 0
raw download clone embed print report
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body
  4. {
  5.     color:#333;
  6.     font-family: Arial, Helvetica, sans-serif;
  7.     font-size:12px;
  8. }
  9.  
  10.  
  11. #wrapper
  12.     {
  13.     width:416px;
  14.     height:360px;
  15.     border-radius:5px;        
  16.     border: 1px solid #333;
  17.     padding-left:6px;
  18.     padding-top:27px;
  19.     color:#333;
  20.     box-shadow: 0 0 1px 1px white inset;
  21.     background: #cfe4f9; /* Old browsers */
  22. background: -moz-linear-gradient(top,  #cfe4f9 0%, #ffffff 24%, #ffffff 36%, #d6eaff 39%, #c0d9f1 74%, #cfe4f9 100%); /* FF3.6+ */
  23. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe4f9), color-stop(24%,#ffffff), color-stop(36%,#ffffff), color-stop(39%,#d6eaff), color-stop(74%,#c0d9f1), color-stop(100%,#cfe4f9)); /* Chrome,Safari4+ */
  24. background: -webkit-linear-gradient(top,  #cfe4f9 0%,#ffffff 24%,#ffffff 36%,#d6eaff 39%,#c0d9f1 74%,#cfe4f9 100%); /* Chrome10+,Safari5.1+ */
  25. background: -o-linear-gradient(top,  #cfe4f9 0%,#ffffff 24%,#ffffff 36%,#d6eaff 39%,#c0d9f1 74%,#cfe4f9 100%); /* Opera 11.10+ */
  26. background: -ms-linear-gradient(top,  #cfe4f9 0%,#ffffff 24%,#ffffff 36%,#d6eaff 39%,#c0d9f1 74%,#cfe4f9 100%); /* IE10+ */
  27. background: linear-gradient(to bottom,  #cfe4f9 0%,#ffffff 24%,#ffffff 36%,#d6eaff 39%,#c0d9f1 74%,#cfe4f9 100%); /* W3C */
  28. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe4f9', endColorstr='#cfe4f9',GradientType=0 ); /* IE6-9 */
  29.        
  30.     }
  31. #ico
  32. {
  33.     float:left;
  34.     margin-top:-20px;
  35.     margin-left:6px;
  36. }
  37. #calc
  38. {
  39.     float:left;
  40.     margin-top:-20px;
  41.     margin-left:24px;
  42.     font-family:Arial, Verdana, sans-serif;
  43.     font-size:12px;
  44.     color:#000;
  45. }
  46. #calc:first-letter
  47. {
  48.     font-size:13px;
  49. }
  50. #win
  51. {
  52.     float:right;
  53.     margin-top:-27px;
  54.     margin-right:5px;
  55. }
  56.  
  57. #secondDiv
  58. {
  59.     width:408px;
  60.     height:350px;
  61.     border:1px solid #666;
  62.     background:#d9e4f1;
  63. }
  64. #menu
  65. {
  66.     width:408px;
  67.     height:20px;
  68.     border:1px solid #666;
  69.     margin-left:-1px;
  70.     margin-top: -1px;
  71.     background: #f9f9f9; /* Old browsers */
  72. background: -moz-linear-gradient(top,  #f9f9f9 0%, #e6ecf2 26%, #d0d9ef 39%, #d4dbee 100%); /* FF3.6+ */
  73. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(26%,#e6ecf2), color-stop(39%,#d0d9ef), color-stop(100%,#d4dbee)); /* Chrome,Safari4+ */
  74. background: -webkit-linear-gradient(top,  #f9f9f9 0%,#e6ecf2 26%,#d0d9ef 39%,#d4dbee 100%); /* Chrome10+,Safari5.1+ */
  75. background: -o-linear-gradient(top,  #f9f9f9 0%,#e6ecf2 26%,#d0d9ef 39%,#d4dbee 100%); /* Opera 11.10+ */
  76. background: -ms-linear-gradient(top,  #f9f9f9 0%,#e6ecf2 26%,#d0d9ef 39%,#d4dbee 100%); /* IE10+ */
  77. background: linear-gradient(to bottom,  #f9f9f9 0%,#e6ecf2 26%,#d0d9ef 39%,#d4dbee 100%); /* W3C */
  78. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d4dbee',GradientType=0 ); /* IE6-9 */
  79.  
  80.  
  81. }
  82. ul
  83. {
  84.     margin-top: 2px;
  85.     margin-left: -30px;
  86. }
  87. ul li
  88. {
  89.     display:inline-block;
  90.     list-style-type:none;
  91.     color:#333;
  92.     padding-right:15px;
  93. }
  94. li:first-letter
  95. {
  96.     text-decoration:underline;
  97. }
  98.  
  99. #display
  100. {
  101.     height:39px;
  102.     width:380px;
  103.     border:1px solid #8696aa;
  104.     border-radius:3px;
  105.     box-shadow: 0 0 1px 1px white inset;
  106.     margin-left:11px;
  107.     margin-bottom: 0;
  108.     margin-top:10px;
  109.     font-family:Consolas;
  110.     color:#333;
  111.     text-align:right;
  112.     font-size:22px;
  113.     font-weight:bold;
  114.     padding-top:10px;
  115.     padding-right:4px;
  116.    
  117.     background: #e6effb; /* Old browsers */
  118. background: -moz-linear-gradient(top,  #e6effb 0%, #ffffff 100%); /* FF3.6+ */
  119. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6effb), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  120. background: -webkit-linear-gradient(top,  #e6effb 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  121. background: -o-linear-gradient(top,  #e6effb 0%,#ffffff 100%); /* Opera 11.10+ */
  122. background: -ms-linear-gradient(top,  #e6effb 0%,#ffffff 100%); /* IE10+ */
  123. background: linear-gradient(to bottom,  #e6effb 0%,#ffffff 100%); /* W3C */
  124. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6effb', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  125.  
  126. }
  127. table
  128. {
  129.     width:384px;
  130.     height:12px;
  131.     border:1px solid #8696aa;
  132.     border-radius:3px;
  133.     box-shadow: 0 0 1px 1px white inset;
  134.     margin-left:11px;
  135.     margin-bottom: 6px;
  136.     margin-top:5px;
  137.     color:#1e395b;
  138.     font-family:Consolas;
  139.     line-height: 10px;
  140.     padding-left:8px;
  141.    
  142. }
  143.  
  144. #floatL
  145. {
  146.     float:left;
  147.     width:72px;
  148.     height:180px;
  149.     margin: 0;
  150.     margin-left:11px;
  151.    
  152. }
  153. .ns
  154. {
  155.     width:72px;
  156.     height:85px;
  157.     border-radius: 3px;        
  158.     border: 1px solid #8696aa;
  159.     padding-top: 5px;
  160.     margin-bottom: 4px;
  161.     color:#1e395b;
  162. }
  163.  
  164.  
  165. #btn
  166. {
  167.     float:left;
  168.     margin-left:8px;
  169. }
  170. button
  171. {
  172.     width:33px;
  173.     height:25;
  174.     margin:1.4px;
  175.     margin-bottom:5px;
  176.     margin-left:0px;
  177.     padding:0px;
  178.     font-weight:500;
  179.     color:#1e395b;
  180. }
  181. .cleanBtn
  182. {
  183.     width:34px;
  184.     height:26px;
  185.     background:#d9e4f1;
  186.     border:1px solid #aaa;
  187.     border-radius:3px;
  188. }
  189. .hhBtn
  190. {
  191.     width:34px;
  192.     height:26px;
  193.     background:#d9e4f1;
  194.     border:1px solid #aaa;
  195.     border-radius:3px;
  196.     box-shadow: 0 0 1px 1px white inset;
  197. }
  198. .fancyBtn
  199. {
  200.     width:34px;
  201.     height:26px;
  202.     border:1px solid #aaa;
  203.     border-radius:3px;
  204.     box-shadow: 0 0 1px 1px white inset;
  205.     background: #f2f7ff; /* Old browsers */
  206. background: -moz-linear-gradient(top,  #f2f7ff 0%, #f4f8ff 48%, #e6ecf2 49%, #ededed 100%); /* FF3.6+ */
  207. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f7ff), color-stop(48%,#f4f8ff), color-stop(49%,#e6ecf2), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
  208. background: -webkit-linear-gradient(top,  #f2f7ff 0%,#f4f8ff 48%,#e6ecf2 49%,#ededed 100%); /* Chrome10+,Safari5.1+ */
  209. background: -o-linear-gradient(top,  #f2f7ff 0%,#f4f8ff 48%,#e6ecf2 49%,#ededed 100%); /* Opera 11.10+ */
  210. background: -ms-linear-gradient(top,  #f2f7ff 0%,#f4f8ff 48%,#e6ecf2 49%,#ededed 100%); /* IE10+ */
  211. background: linear-gradient(to bottom,  #f2f7ff 0%,#f4f8ff 48%,#e6ecf2 49%,#ededed 100%); /* W3C */
  212. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f7ff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
  213.  
  214. }
  215. .numBtn
  216. {
  217.     width:34px;
  218.     height:26px;
  219.     border:1px solid #aaa;
  220.     border-radius:3px;
  221.     box-shadow: 0 0 1px 1px white inset;
  222.     background: #ffffff; /* Old browsers */
  223. background: -moz-linear-gradient(top,  #ffffff 1%, #f4f8ff 48%, #f4fbff 49%, #ffffff 100%); /* FF3.6+ */
  224. background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(48%,#f4f8ff), color-stop(49%,#f4fbff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  225. background: -webkit-linear-gradient(top,  #ffffff 1%,#f4f8ff 48%,#f4fbff 49%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  226. background: -o-linear-gradient(top,  #ffffff 1%,#f4f8ff 48%,#f4fbff 49%,#ffffff 100%); /* Opera 11.10+ */
  227. background: -ms-linear-gradient(top,  #ffffff 1%,#f4f8ff 48%,#f4fbff 49%,#ffffff 100%); /* IE10+ */
  228. background: linear-gradient(to bottom,  #ffffff 1%,#f4f8ff 48%,#f4fbff 49%,#ffffff 100%); /* W3C */
  229. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  230.  
  231. }
  232. #zero
  233. {
  234.     width: 72px;
  235. }
  236. #equals
  237. {
  238.     height:58px;
  239.     float:right;
  240.     margin-right:4px;
  241. }
  242.    
  243. .numBtn:hover, .fancyBtn:hover
  244. {
  245.     border:1px solid #f7dd34;
  246.     background: #ffffff; /* Old browsers */
  247. background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 49%, #ffd754 50%, #ffe18e 91%, #fffdf4 100%); /* FF3.6+ */
  248. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#ffffff), color-stop(50%,#ffd754), color-stop(91%,#ffe18e), color-stop(100%,#fffdf4)); /* Chrome,Safari4+ */
  249. background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#ffd754 50%,#ffe18e 91%,#fffdf4 100%); /* Chrome10+,Safari5.1+ */
  250. background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#ffd754 50%,#ffe18e 91%,#fffdf4 100%); /* Opera 11.10+ */
  251. background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#ffd754 50%,#ffe18e 91%,#fffdf4 100%); /* IE10+ */
  252. background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 49%,#ffd754 50%,#ffe18e 91%,#fffdf4 100%); /* W3C */
  253. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fffdf4',GradientType=0 ); /* IE6-9 */
  254.  
  255. }
  256. .hhBtn:hover
  257. {
  258.     border:1px solid #f7dd34;
  259.     background: #ffc823; /* Old browsers */
  260. background: -moz-linear-gradient(top,  #ffc823 0%, #ffd754 67%, #fefcea 97%, #ffffff 100%); /* FF3.6+ */
  261. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc823), color-stop(67%,#ffd754), color-stop(97%,#fefcea), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  262. background: -webkit-linear-gradient(top,  #ffc823 0%,#ffd754 67%,#fefcea 97%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  263. background: -o-linear-gradient(top,  #ffc823 0%,#ffd754 67%,#fefcea 97%,#ffffff 100%); /* Opera 11.10+ */
  264. background: -ms-linear-gradient(top,  #ffc823 0%,#ffd754 67%,#fefcea 97%,#ffffff 100%); /* IE10+ */
  265. background: linear-gradient(to bottom,  #ffc823 0%,#ffd754 67%,#fefcea 97%,#ffffff 100%); /* W3C */
  266. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc823', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  267.  
  268. }
  269.  
  270. .grey
  271. {
  272.   color:#555;
  273. }
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!