daily pastebin goal
46%
SHARE
TWEET

8/21/13 StackOverflow

a guest Aug 21st, 2013 123 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @font-face {
  2.         font-family: 'anyoldicon';
  3.         src:url('assets/anyoldicon.eot');
  4.         src:url('assets/anyoldicon.eot?#iefix') format('embedded-opentype'),
  5.                 url('assets/anyoldicon.woff') format('woff'),
  6.                 url('assets/anyoldicon.ttf') format('truetype'),
  7.                 url('assets/anyoldicon.svg#anyoldicon') format('svg');
  8.         font-weight: normal;
  9.         font-style: normal;
  10.         unicode-range: U+00-FFFF;
  11. }
  12.  
  13. /* General grid styles */
  14. .cbp-ig-grid {
  15.         list-style: none;
  16.         padding: 0 0 50px 0;
  17.         margin: 0;
  18. }
  19.  
  20. /* Clear floats */
  21. .cbp-ig-grid:before,
  22. .cbp-ig-grid:after {
  23.         content: " ";
  24.         display: table;
  25. }
  26.  
  27. .cbp-ig-grid:after {
  28.         clear: both;
  29. }
  30.  
  31. /* grid item */
  32. .cbp-ig-grid li {
  33.         width: 33%;
  34.         float: left;
  35.         height: 420px;
  36.         text-align: center;
  37.         border-top: 1px solid #ddd;
  38. }
  39.  
  40. /* we are using a combination of borders and box shadows to control the grid lines */
  41. .cbp-ig-grid li:nth-child(-n+3){
  42.         border-top: none;
  43. }
  44.  
  45. .cbp-ig-grid li:nth-child(3n-1),
  46. .cbp-ig-grid li:nth-child(3n-2) {
  47.         box-shadow: 1px 0 0 #ddd;
  48. }
  49.  
  50. /* anchor style */
  51. .cbp-ig-grid li > a {
  52.         display: block;
  53.         height: 100%;
  54.         color: #47a3da;
  55.         -webkit-transition: background 0.2s;
  56.         -moz-transition: background 0.2s;
  57.         transition: background 0.2s;
  58. }
  59.  
  60. /* the icon with pseudo class for icon font */
  61. .cbp-ig-icon {
  62.         padding: 30px 0 0 0;
  63.         display: block;
  64.         -webkit-transition: -webkit-transform 0.2s;
  65.         transition: -moz-transform 0.2s;
  66.         transition: transform 0.2s;
  67. }
  68.  
  69. .cbp-ig-icon:before {
  70.         font-family: 'anyoldicon';
  71.         font-size: 14em;
  72.         speak: none;
  73.         font-style: normal;
  74.         font-weight: normal;
  75.         font-variant: normal;
  76.         text-transform: none;
  77.         line-height: 1;
  78.         -webkit-font-smoothing: antialiased;
  79. }
  80.  
  81. .cbp-ig-icon-shoe:before {
  82.         content: "\e000";
  83. }
  84.  
  85. .cbp-ig-icon-ribbon:before {
  86.         content: "\e001";
  87. }
  88.  
  89. .cbp-ig-icon-milk:before {
  90.         content: "\e002";
  91. }
  92.  
  93. .cbp-ig-icon-whippy:before {
  94.         content: "\e003";
  95. }
  96.  
  97. .cbp-ig-icon-spectacles:before {
  98.         content: "\e004";
  99. }
  100.  
  101. .cbp-ig-icon-doumbek:before {
  102.         content: "\e007";
  103. }
  104.  
  105. /* title element */
  106. .cbp-ig-grid .cbp-ig-title {
  107.         margin: 20px 0 10px 0;
  108.         padding: 20px 0 0 0;
  109.         font-size: 2em;
  110.         position: relative;
  111.         -webkit-transition: -webkit-transform 0.2s;
  112.         -moz-transition: -moz-transform 0.2s;
  113.         transition: transform 0.2s;
  114. }
  115.  
  116. .cbp-ig-grid .cbp-ig-title:before {
  117.         content: '';
  118.         position: absolute;
  119.         background: #47a3da;
  120.         width: 160px;
  121.         height: 6px;
  122.         top: 0px;
  123.         left: 50%;
  124.         margin: -10px 0 0 -80px;
  125.         -webkit-transition: margin-top 0.2s; /* top or translate does not seem to work in Firefox */
  126.         -moz-transition: margin-top 0.2s;
  127.         transition: margin-top 0.2s;
  128. }
  129.  
  130. .cbp-ig-grid .cbp-ig-category {
  131.         text-transform: uppercase;
  132.         display: inline-block;
  133.         font-size: 1em;
  134.         letter-spacing: 1px;
  135.         color: #fff;
  136.         -webkit-transform: translateY(10px);
  137.         -moz-transform: -moz-translateY(10px);
  138.         -ms-transform: -ms-translateY(10px);
  139.         transform: translateY(10px);
  140.         opacity: 0;
  141.         -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  142.         -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  143.         -webkit-transition: transform 0.3s, opacity 0.2s;
  144. }
  145.  
  146. .cbp-ig-grid li:hover .cbp-ig-category,
  147. .touch .cbp-ig-grid li .cbp-ig-category {
  148.         opacity: 1;
  149.         -webkit-transform: translateY(0px);
  150.         -moz-transform: translateY(0px);
  151.         -ms-transform: translateY(0px);
  152.         transform: translateY(0px);
  153. }
  154.  
  155. /* Hover styles */
  156.  
  157. .cbp-ig-grid li > a:hover {
  158.         background: #47a3da;
  159. }
  160.  
  161. .cbp-ig-grid li > a:hover .cbp-ig-icon {
  162.         -webkit-transform: translateY(10px);
  163.         -moz-transform: translateY(10px);
  164.         -ms-transform: translateY(10px);
  165.         transform: translateY(10px);
  166. }
  167.  
  168. .cbp-ig-grid li > a:hover .cbp-ig-icon:before,
  169. .cbp-ig-grid li > a:hover .cbp-ig-title {
  170.         color: #fff;
  171. }
  172.  
  173. .cbp-ig-grid li > a:hover .cbp-ig-title {
  174.         -webkit-transform: translateY(-30px);
  175.         -moz-transform: translateY(-30px);
  176.         -ms-transform: translateY(-30px);
  177.         transform: translateY(-30px);
  178. }
  179.  
  180. .cbp-ig-grid li > a:hover .cbp-ig-title:before {
  181.         background: #fff;
  182.         margin-top: 80px;
  183. }
  184.  
  185.  
  186. @media screen and (max-width: 62.75em) {
  187.         .cbp-ig-grid li {
  188.                 width: 50%;
  189.         }
  190.  
  191.         /* reset the grid lines */
  192.         .cbp-ig-grid li:nth-child(-n+3){
  193.                 border-top: 1px solid #ddd;
  194.         }
  195.  
  196.         .cbp-ig-grid li:nth-child(3n-1),
  197.         .cbp-ig-grid li:nth-child(3n-2) {
  198.                 box-shadow: none;
  199.         }
  200.  
  201.         .cbp-ig-grid li:nth-child(-n+2){
  202.                 border-top: none;
  203.         }
  204.  
  205.         .cbp-ig-grid li:nth-child(2n-1) {
  206.                 box-shadow: 1px 0 0 #ddd;
  207.         }
  208. }
  209.  
  210. @media screen and (max-width: 41.6em) {
  211.         .cbp-ig-grid li {
  212.                 width: 100%;
  213.         }
  214.  
  215.         .cbp-ig-grid li:nth-child(-n+2){
  216.                 border-top: 1px solid #ddd;
  217.         }
  218.  
  219.         .cbp-ig-grid li:nth-child(2n-1) {
  220.                 box-shadow: none
  221.         }
  222.  
  223.         .cbp-ig-grid li:first-child {
  224.                 border-top: none;
  225.         }
  226. }
  227.  
  228. @media screen and (max-width: 25em) {
  229.         .cbp-ig-grid {
  230.                 font-size: 80%;
  231.         }
  232.  
  233.         .cbp-ig-grid .cbp-ig-category {
  234.                 margin-top: 20px;
  235.         }
  236. }
RAW Paste Data
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
 
Top