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

Untitled

By: a guest on Aug 8th, 2012  |  syntax: None  |  size: 3.81 KB  |  hits: 10  |  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 {
  2.         font-family: sans-serif;
  3.         margin: 200px  0 0;
  4. }
  5.  
  6. .tabs {
  7.         list-style: none;
  8.         padding: 0;
  9.         background: rgb(238,238,238);
  10. }
  11.  
  12. .tabs li,
  13. .tabs a {
  14.         display: inline-block;
  15.         position:relative;
  16. }
  17.  
  18. .tabs li:first-child:before,
  19. .tabs li:last-child:after {
  20.         content: none;
  21. }
  22.  
  23. .tabs li:before,
  24. .tabs li:after{
  25.         content: '';
  26.         display: block;
  27.         width: 1px;
  28.         height: 26px;
  29.         position: absolute;
  30.         top: 2px;
  31. }
  32.  
  33. .tabs li:before {
  34.         background-color: #fff;
  35.         left: 0;
  36. }
  37.  
  38. .tabs li:after {
  39.         background-color: #aaa;
  40.         right: 0;
  41. }
  42.  
  43. .tabs li.current a:before,
  44. .tabs li.current a:after {
  45.         content: '';
  46.         position: absolute;
  47.         height: 30px;
  48.         width: 12px;
  49.         top: 0;
  50.         z-index: 1;
  51. }
  52.  
  53. .tabs li.current a:before {
  54.         left: -6px;
  55.         border-radius: 0 0 10px 0;
  56. }
  57.  
  58. .tabs li.current a:after {
  59.         right: -6px;
  60.         border-radius: 0 0 0 10px;
  61. }
  62.  
  63. .tabs a {
  64.         text-decoration: none;
  65.         padding: 0 25px;
  66.         color: #333;
  67.         height: 30px;
  68.         line-height: 30px;
  69.         text-shadow: 1px 1px 1px #fff;
  70. }
  71.  
  72.  
  73. /*      Background Colors and Gradients done with
  74.         http://www.colorzilla.com/gradient-editor/
  75. */
  76. .tabs li.current {
  77.         background: rgb(204,204,204);
  78.         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTk5OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  79.         background: -moz-linear-gradient(top,  rgba(204,204,204,1) 0%, rgba(153,153,153,1) 100%);
  80.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(153,153,153,1)));
  81.         background: -webkit-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(153,153,153,1) 100%);
  82.         background: -o-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(153,153,153,1) 100%);
  83.         background: -ms-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(153,153,153,1) 100%);
  84.         background: linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(153,153,153,1) 100%);
  85.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#999999',GradientType=0 );
  86. }
  87.  
  88. .tabs,
  89. .tabs li.current a:before,
  90. .tabs li.current a:after {
  91.         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  92.         background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
  93.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
  94.         background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
  95.         background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
  96.         background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
  97.         background: linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
  98.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
  99. }
create a new version of this paste RAW Paste Data