API tools faq
paste
Guest User

css

a guest
Jul 4th, 2015
729
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.85 KB | None | 0 0
raw download clone embed print report
  1. #updatestab {
  2. position:fixed;
  3. margin-top:15px;
  4. margin-left:20px;
  5. width:120px;
  6. z-index:999999;
  7. }
  8.  
  9. #box1 {
  10. background:#bad1e7; /*color of tab 1: use colorpicker.com to choose a different color*/
  11. color:transparent;
  12. height:10px;
  13. width:15px;
  14. border-radius:2px;
  15. text-align:center;
  16. overflow:hidden;
  17. font-size:8px;
  18. margin-bottom:8px;
  19. -webkit-transition:all 0.5s ease-in-out;
  20. -moz-transition:all 0.5s ease-in-out;
  21. transition:all 0.5s ease-in-out
  22. }
  23.  
  24. #box1:hover {
  25. width:120px;
  26. height:190px;
  27. color:#333333;
  28. background:inherit;
  29. }
  30.  
  31. #box2 {
  32. background:#bad1e7;/*color of tab 2: use colorpicker.com to choose a different color*/
  33. color:transparent;
  34. height:10px;
  35. width:15px;
  36. border-radius:2px;
  37. text-align:center;
  38. overflow:hidden;
  39. font-size:8px;
  40. margin-bottom:8px;
  41. -webkit-transition:all 0.5s ease-in-out;
  42. -moz-transition:all 0.5s ease-in-out;
  43. transition:all 0.5s ease-in-out
  44. }
  45.  
  46. #box2:hover {
  47. width:120px;
  48. height:190px;
  49. color:#333333;
  50. background:inherit;
  51. }
  52.  
  53. #box3 {
  54. background:#bad1e7;/*color of tab 3: use colorpicker.com to choose a different color*/
  55. color:transparent;
  56. height:10px;
  57. width:15px;
  58. border-radius:2px;
  59. text-align:center;
  60. overflow:hidden;
  61. font-size:8px;
  62. margin-bottom:8px;
  63. -webkit-transition:all 0.5s ease-in-out;
  64. -moz-transition:all 0.5s ease-in-out;
  65. transition:all 0.5s ease-in-out;
  66. }
  67.  
  68. #box3:hover {
  69. width:120px;
  70. height:190px;
  71. color:#333333;
  72. background:inherit;
  73. }
  74.  
  75. #box4 {
  76. background:#bad1e7;/*color of tab 4: use colorpicker.com to choose a different color*/
  77. color:transparent;
  78. height:10px;
  79. width:15px;
  80. border-radius:2px;
  81. text-align:center;
  82. overflow:hidden;
  83. font-size:8px;
  84. margin-bottom:8px;
  85. -webkit-transition:all 0.5s ease-in-out;
  86. -moz-transition:all 0.5s ease-in-out;
  87. transition:all 0.5s ease-in-out
  88. }
  89.  
  90. #box4:hover {
  91. width:120px;
  92. height:190px;
  93. color:#333333;
  94. background:inherit;
  95. }
  96.  
  97. #box5 {
  98. background:#bad1e7;/*color of tab 5: use colorpicker.com to choose a different color*/
  99. color:transparent;
  100. height:10px;
  101. width:15px;
  102. border-radius:2px;
  103. text-align:center;
  104. overflow:hidden;
  105. font-size:8px;
  106. margin-bottom:8px;
  107. -webkit-transition:all 0.5s ease-in-out;
  108. -moz-transition:all 0.5s ease-in-out;
  109. transition:all 0.5s ease-in-out;
  110. }
  111.  
  112. #box5:hover {
  113. width:120px;
  114. height:190px;
  115. color:#333333;
  116. background:inherit;
  117. }
  118.  
  119. /*to add more tabs, copy and paste both of the #box5 bits above and change the numbers from 5 to 6. then in your html (the bit under <body>) add the following under the end of the code for box 5:
  120.  
  121. <div id="box6">
  122. write your updates here!
  123. </div>
  124.  
  125. */
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!