Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

iPhoneCSS2

By: a guest on Jun 9th, 2012  |  syntax: CSS  |  size: 4.65 KB  |  hits: 39  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. body, ul, li {
  2.         margin:0;
  3.         padding:0;
  4.         font-family: Helvetica;
  5. }
  6.  
  7. body {background-color:#C5CCD4;
  8.         background-image: url(../ch5/iphoneback.svg);
  9.    background: -moz-repeating-linear-gradient( 0, #C5CCD4 0%, #C5CCD4 29%, #CBD2D8 29%, #CBD2D8 100% );
  10.         background-image: -webkit-gradient(linear,
  11.                 left top, right top,  
  12.                 color-stop(0.7142, #C5CCD4),
  13.                 color-stop(0.7142, #CBD2D8));
  14.          -webkit-background-size:7px 1px;
  15.          -moz-background-size:7px 7px;
  16.          background-size:7px 1px;
  17.          background-repeat:repeat;
  18. }
  19.  
  20. h1 {
  21.         color: white;
  22.         font-size: 20px;
  23.         font-weight: bold;
  24.         margin: auto;
  25.         overflow: hidden;
  26.         text-align: center;
  27.         text-overflow: ellipsis;
  28.         text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0px;
  29.         white-space: nowrap;
  30.         width: 150px;
  31. }
  32.  
  33. h2 {
  34.         color: black;
  35.         font-size: 25px;
  36.         font-weight: bold;
  37.         margin: auto;
  38.         overflow: hidden;
  39.         text-align: center;
  40.         height: 320px;
  41.         display: table-cell;
  42.         vertical-align: middle;
  43.         text-overflow: ellipsis;
  44.         text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0px;
  45.         white-space: nowrap;
  46.         width: 320px;
  47. }
  48.  
  49. h3 {
  50.         color: black;
  51.         font-size: 85px;
  52.         font-weight: bold;
  53.         margin: auto;
  54.         overflow: hidden;
  55.         text-align: center;
  56.         height: 320px;
  57.         display: table-cell;
  58.         vertical-align: bottom;
  59.         text-overflow: ellipsis;
  60.         text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0px;
  61.         white-space: nowrap;
  62.         width: 320px;
  63. }
  64.  
  65. p {
  66.         color: #F7F7F7;
  67.         font-size: 16px;
  68.         font-weight: bold;
  69.         margin: auto;
  70.         overflow: hidden;
  71.         text-align: left;
  72.         text-overflow: ellipsis;
  73.         text-shadow: rgba(0, 0, 0, 0.7) 0px -1px 0px;
  74.         white-space: nowrap;
  75.         width: 280px;
  76. }
  77.  
  78.  
  79. header {
  80.         background-image: -webkit-gradient(linear,
  81.                         0% 0%, 0% 50%,
  82.                         from(rgba(176, 188, 205, 1)),
  83.                         to(rgba(129, 149, 175, 1)));
  84.         background-image: -moz-linear-gradient(top, rgb(176, 188, 205) 50%,
  85.                         rgb(129, 149, 175) 100%);
  86.         padding: 7px 10px;
  87.         background-color: rgb(109, 132, 162);
  88.         border-bottom-color:1px solid rgb(45, 54, 66);
  89.         border-top:1px solid rgb(109, 132, 162);
  90.         display: block;
  91.         height: 31px;
  92.         line-height: 30px;
  93.         display: block;
  94.         border-bottom: 1px solid #2C3542;
  95.         border-top: 1px solid #CDD5DF;
  96. }
  97.  
  98. .button {
  99.         color: #FFFFFF;
  100.         text-decoration: none;
  101.         background-image: -webkit-gradient(linear, top, bottom,
  102.                 from(#C5CCD4),
  103.                 to(#fff));
  104.         background-image: -moz-linear-gradient(top, #C5CCD4, rgba(255,255,255,0.2));
  105.         text-shadow:  0 -1px 0 rgba(0, 0, 0, 0.6);
  106.         overflow: hidden;
  107.         max-width: 80px;
  108.         white-space: nowrap;
  109.         text-overflow: ellipsis;
  110.         font-family: Helvetica;
  111.         font-size: 12px;
  112.         font-weight:bold;
  113.         -webkit-border-radius: 4px;
  114.         -moz-border-radius: 4px;
  115.         border-radius: 4px;
  116.         height:30px;
  117.         padding: 0 10px;
  118.          -webkit-background-size: 100% 50%;
  119.          -moz-background-size: 100% 50%;
  120.          background-size: 100% 50%;
  121.          background-repeat:no-repeat;
  122.          border: 1px solid #2F353E;
  123.          -webkit-box-shadow:
  124.                         0 1px 0 rgba(255,255,255, 0.4),
  125.                         inset 0 1px 0 rgba(255,255,255,0.4);
  126.         -moz-box-shadow:
  127.                         0 1px 0 rgba(255,255,255, 0.4),
  128.                         inset 0 1px 0 rgba(255,255,255,0.4);
  129.         box-shadow:
  130.                         0 1px 0 rgba(255,255,255, 0.4),
  131.                         inset 0 1px 0 rgba(255,255,255,0.4);
  132.         }
  133.  
  134. .nav li {padding: 8px;}
  135.  
  136. .cancel {
  137.         float:left;
  138.         background-image: -webkit-gradient(linear, 0 0, 0 100%,
  139.                 from(#8EA4C1),
  140.                 to(#5877A2));
  141.         background-color:#4A6C9B;
  142.         border-color: #2F353E #375073 #375073;
  143. }
  144.  
  145. .done {
  146.         float: right;
  147.         background-image: -webkit-gradient(linear, 0 0, 0 100%,
  148.                 from(#7B9EEA),
  149.                 to(#376FE0));
  150.         background-color: #2463DE;
  151.         }
  152.        
  153. infotext{
  154.         width: 280px;
  155.         font-size: 14px;
  156.         background-color: #ffffff;
  157.         -webkit-border-radius: 10px;
  158.         -moz-border-radius: 10px;
  159.         border-radius: 10px;
  160.         border: 1px solid #A8ABAE;
  161.         display: block;
  162.         margin: 10px auto;
  163.         padding: 5px 10px;
  164. }
  165.  
  166. article ul{
  167.         width: 300px;
  168.         background-color: #ffffff;
  169.         -webkit-border-radius: 10px;
  170.         -moz-border-radius: 10px;
  171.         border-radius: 10px;
  172.         border: 1px solid #A8ABAE;
  173.         display: block;
  174.         margin: 10px auto;
  175. }
  176.  
  177. article li {
  178.  list-style-type:none;
  179.  line-height: 44px;
  180.  border-top:1px solid #A8ABAE;
  181.  padding: 0 10px;
  182.  
  183.  }
  184.  
  185.  article ul a {
  186.         text-decoration: none;
  187.         color: black;
  188.         list-style-type:none;
  189.         padding: 0 0px;
  190.         top-margin: 10px;
  191. }
  192.  
  193. article table li {
  194.  list-style-type:none;
  195.  line-height: 75px;
  196.  border-top:1px solid #A8ABAE;
  197.  padding: 0 10px;
  198.  
  199.  }
  200. article table ul{
  201.         width: 143px;
  202.         background-color: #ffffff;
  203.         -webkit-border-radius: 10px;
  204.         -moz-border-radius: 10px;
  205.         font-size: 45px;
  206.         text-align:center;
  207.         border-radius: 10px;
  208.         border: 1px solid #A8ABAE;
  209.         display: block;
  210.         margin: 0px auto;
  211. }
  212. /* article ul li:hover {
  213.         background-color: #aaa;
  214.         color: #fff
  215. } */
  216.  
  217. article ul a:first-of-type li {
  218.         border-top:none;
  219. }
create a new version of this paste RAW Paste Data