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

Untitled

By: a guest on Jul 29th, 2012  |  syntax: None  |  size: 2.45 KB  |  hits: 12  |  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. /**
  2.  * Sliding Bookmark Launchpad
  3.  */
  4.  
  5. * {
  6.         margin: 0;
  7.         padding:0;
  8. }
  9.  
  10.  
  11. h1 {   
  12.         letter-spacing: 4px;
  13.         text-align:center;
  14.         color:white;
  15.         font-size: 60px;       
  16.         font-weight: 200;
  17.         font-family:Helvetica Neue;
  18.         text-shadow: 0px 0px 4px black,1px 1px 1px black;
  19. }
  20.  
  21. /*=================================================
  22.         Main Styles
  23. ==================================================*/
  24.  
  25. #content-slider {
  26.         width: 1488px;
  27.         margin: 36px auto;
  28. }
  29.  
  30. #content {
  31.         overflow: scroll;
  32.         width: 1488px;
  33. }
  34.  
  35. #content-inner {
  36.         width:4464px;
  37. }
  38.  
  39. .page {
  40.         width: 1488px;
  41.         float: left;
  42. }
  43.  
  44. .page ul {
  45.         list-style:none;
  46. }
  47.  
  48. .page li {
  49.         float:left;
  50.         margin: 14px 33px 14px 33px;
  51.         opacity:1;
  52.         transition: opacity .1s ease-in;
  53. }
  54.  
  55. /*change to active class for folders animation*/
  56.  
  57. .page li:active {
  58.         opacity:1;
  59.         transition: opacity .1s ease-in;
  60. }
  61.  
  62. .page ul:active li:not(:active) {
  63.         opacity:.7;
  64.         transition: opacity .1s ease-in;
  65. }
  66.  
  67. .page a:active img, .page a:active .folder {
  68.         transform: scale(1.1);
  69. }
  70.  
  71. a img, a .folder {
  72.         transition: all ease-in .1s;
  73. }
  74.  
  75. .page li {     
  76.         text-align:center;
  77.         height:150px;
  78.         width: 120px;
  79. }
  80.  
  81. .page li img {
  82.         height:120px;
  83.         width:120px;
  84. }
  85.  
  86. .page a,h3{     margin-top:10px;
  87.         font-size: 14px;
  88.         font-weight: 300;
  89.         text-decoration:none;
  90.         color:white;
  91.         font-family:Helvetica;
  92.         text-shadow: 0px 0px 4px black,1px 1px 1px black;
  93.         letter-spacing: 0px;
  94. }
  95.  
  96. .folder {
  97.         padding:5px;
  98.         height: 110px;
  99.         width: 110px;
  100.         background: linear-gradient(rgba(211,211,211,.6),rgba(165,165,165,.7)),white;
  101.         border-radius:20px;
  102.         box-shadow:1px 1px 8px black;
  103. }
  104.  
  105. .content {
  106.         box-shadow:inset 0px 0px 6px black;
  107.         background:url(http://pawelskowronek.me/bookmark_launchpad/bg_folder.png);
  108.         border-radius:15px;
  109.         width:110px;
  110.         height:110px;
  111. }
  112.  
  113. /*
  114.  *  Background originally comes from http://www.icloud.com/
  115.  */
  116.  
  117. /*================================================
  118.         Styling the targets.
  119. ================================================*/
  120. #content-inner-1:target #content-inner {
  121.         transition: margin-left 400ms ease;
  122.         margin-left: 0px;
  123. }
  124.  
  125. #content-inner-2:target #content-inner {
  126.         transition: margin-left 400ms ease;
  127.         margin-left: -1488px;
  128. }
  129.  
  130.  
  131.  
  132. /*=======================================
  133.         Generic styling here.
  134. ========================================*/
  135.  
  136. #nav {
  137.         list-style-type: none;
  138.         width: 52px;
  139.         height: 16px;
  140.         margin: 60px auto;
  141. }
  142.  
  143. #nav li {
  144.         float:left;
  145. }
  146.  
  147. button {
  148.         background: white;
  149.         width: 8px;
  150.         height: 8px;
  151.         border-radius: 8px;
  152.         border: white;
  153.         margin-left: 3px;
  154.         margin-right: 4px;
  155.        
  156. }
  157.  
  158. button:active {
  159.         opacity: .25;
  160. }
  161.  
  162. button a {
  163.         display:block;
  164. }
create a new version of this paste RAW Paste Data