API tools faq
paste
spirkism

Updates tab: Squares (style)

spirkism
May 11th, 2014
683
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.49 KB | None | 0 0
raw download clone embed print report
  1. /*updates tab*/
  2.  
  3. /* - made by Phil (spirkism), so please don't claim as your own
  4. - credit is appreciated but not mandatory - but please at least tell people where you got it if they ask :)
  5. - play around with the code as much as you like, use it as inspiration or whatever
  6. - but please don't use this as a basecode for an updates tab you want to release (ask me if you wanna do something like this, please)
  7. - if you need any help, just ask me! :) */
  8.  
  9. #square1 {
  10. margin-left: 20px;
  11. margin-top: -35px;
  12. width: 10px;
  13. height: 10px;
  14. background-color: #4E4E4E; /* this is the colour of the squares */
  15. -webkit-transition: 1s ease;transition: 1s ease; /* change the '1s' to a different time if you want it to transition faster or slower */
  16. -o-transition: 1s ease; /* but then don't forget to change all of the others as well */
  17. -moz-transition: 1s ease;
  18. position: fixed;
  19. overflow: hidden;
  20. font-size: 11px;
  21. font-family: 'Calibri', sans-serif;
  22. text-align: center;
  23. color: #4E4E4E; /* make sure this is the same colour as the squares or you might see some text in the squares when you don't hover over them */
  24. z-index: 9999999999; /*don't change this or you will fuck shit up */
  25. }
  26.  
  27. #square1:hover {
  28. width: 150px;
  29. height: 200px; /* change this if you need the tab to have more or less room for text! */
  30. margin-left: 20px;
  31. margin-top: -35px;
  32. background-color: #fff; /* this is the background colour when you hover - for seemingly transparency make this the same colour as your blog background */
  33. font-size: 11px; /* this is the font size for the text in your updates tab /
  34. font-family: 'Calibri', sans-serif; /* here you can change the font for your updates tab text */
  35. color: #000; /* this is the text colour in your updates tab */
  36. text-align: center;
  37. -webkit-transition: 1s ease;transition: 1s ease; /* change these as well for slower or faster transition ! */
  38. -o-transition: 1s ease;
  39. -moz-transition: 1s ease;
  40. padding: 10px;
  41. }
  42.  
  43. /* these are the follow squares, comments as seen above apply as well */
  44.  
  45. #square2 {
  46. margin-left: 40px;
  47. margin-top: -35px;
  48. width: 10px;
  49. height: 10px;
  50. background-color: #4E4E4E;
  51. -webkit-transition: 1s ease;transition: 1s ease;
  52. -o-transition: 1s ease;
  53. -moz-transition: 1s ease;
  54. position: fixed;
  55. overflow: hidden;
  56. font-size: 11px;
  57. font-family: 'Calibri', sans-serif;
  58. text-align: center;
  59. color: #4E4E4E;
  60. z-index: 999999999;
  61. }
  62.  
  63. #square2:hover {
  64. width: 150px;
  65. height: 200px;
  66. margin-left: 40px;
  67. margin-top: -35px;
  68. background-color: #fff;
  69. font-size: 11px;
  70. font-family: 'Calibri', sans-serif;
  71. color: #000;
  72. text-align: center;
  73. -webkit-transition: 1s ease;transition: 1s ease;
  74. -o-transition: 1s ease;
  75. -moz-transition: 1s ease;
  76. padding: 10px;
  77. }
  78.  
  79. #square3 {
  80. margin-left: 60px;
  81. margin-top: -35px;
  82. width: 10px;
  83. height: 10px;
  84. background-color: #4E4E4E;
  85. -webkit-transition: 1s ease;transition: 1s ease;
  86. -o-transition: 1s ease;
  87. -moz-transition: 1s ease;
  88. position: fixed;
  89. overflow: hidden;
  90. font-size: 11px;
  91. font-family: 'Calibri', sans-serif;
  92. text-align: center;
  93. color: #4E4E4E;
  94. z-index: 99999999;
  95. }
  96.  
  97. #square3:hover {
  98. width: 150px;
  99. height: 200px;
  100. margin-left: 60px;
  101. margin-top: -35px;
  102. background-color: #fff;
  103. font-size: 11px;
  104. font-family: 'Calibri', sans-serif;
  105. color: #000;
  106. text-align: center;
  107. -webkit-transition: 1s ease;transition: 1s ease;
  108. -o-transition: 1s ease;
  109. -moz-transition: 1s ease;
  110. padding: 10px;
  111. }
  112.  
  113. #square4 {
  114. margin-left: 20px;
  115. margin-top: -15px;
  116. width: 10px;
  117. height: 10px;
  118. background-color: #4E4E4E;
  119. -webkit-transition: 1s ease;transition: 1s ease;
  120. -o-transition: 1s ease;
  121. -moz-transition: 1s ease;
  122. position: fixed;
  123. overflow: hidden;
  124. font-size: 11px;
  125. font-family: 'Calibri', sans-serif;
  126. text-align: center;
  127. color: #4E4E4E;
  128. z-index: 9999999;
  129. }
  130.  
  131. #square4:hover {
  132. width: 150px;
  133. height: 200px;
  134. margin-left: 20px;
  135. margin-top: -15px;
  136. background-color: #fff;
  137. font-size: 11px;
  138. font-family: 'Calibri', sans-serif;
  139. color: #000;
  140. text-align: center;
  141. -webkit-transition: 1s ease;transition: 1s ease;
  142. -o-transition: 1s ease;
  143. -moz-transition: 1s ease;
  144. padding: 10px;
  145. }
  146.  
  147. #square5 {
  148. margin-left: 40px;
  149. margin-top: -15px;
  150. width: 10px;
  151. height: 10px;
  152. background-color: #4E4E4E;
  153. -webkit-transition: 1s ease;transition: 1s ease;
  154. -o-transition: 1s ease;
  155. -moz-transition: 1s ease;
  156. position: fixed;
  157. overflow: hidden;
  158. font-size: 11px;
  159. font-family: 'Calibri', sans-serif;
  160. text-align: center;
  161. color: #4E4E4E;
  162. z-index: 999999;
  163. }
  164.  
  165. #square5:hover {
  166. width: 150px;
  167. height: 200px;
  168. margin-left: 40px;
  169. margin-top: -15px;
  170. background-color: #fff;
  171. font-size: 11px;
  172. font-family: 'Calibri', sans-serif;
  173. color: #000;
  174. text-align: center;
  175. -webkit-transition: 1s ease;transition: 1s ease;
  176. -o-transition: 1s ease;
  177. -moz-transition: 1s ease;
  178. padding: 10px;
  179. }
  180.  
  181. #square6 {
  182. margin-left: 60px;
  183. margin-top: -15px;
  184. width: 10px;
  185. height: 10px;
  186. background-color: #4E4E4E;
  187. -webkit-transition: 1s ease;transition: 1s ease;
  188. -o-transition: 1s ease;
  189. -moz-transition: 1s ease;
  190. position: fixed;
  191. overflow: hidden;
  192. font-size: 11px;
  193. font-family: 'Calibri', sans-serif;
  194. text-align: center;
  195. color: #4E4E4E;
  196. z-index: 99999;
  197. }
  198.  
  199. #square6:hover {
  200. width: 150px;
  201. height: 200px;
  202. margin-left: 60px;
  203. margin-top: -15px;
  204. background-color: #fff;
  205. font-size: 11px;
  206. font-family: 'Calibri', sans-serif;
  207. color: #000;
  208. text-align: center;
  209. -webkit-transition: 1s ease;transition: 1s ease;
  210. -o-transition: 1s ease;
  211. -moz-transition: 1s ease;
  212. padding: 10px;
  213. }
  214.  
  215.  
  216. #square7 {
  217. margin-left: 20px;
  218. margin-top: 5px;
  219. width: 10px;
  220. height: 10px;
  221. background-color: #4E4E4E;
  222. -webkit-transition: 1s ease;transition: 1s ease;
  223. -o-transition: 1s ease;
  224. -moz-transition: 1s ease;
  225. position: fixed;
  226. overflow: hidden;
  227. font-size: 11px;
  228. font-family: 'Calibri', sans-serif;
  229. text-align: center;
  230. color: #4E4E4E;
  231. z-index: 9999;
  232. }
  233.  
  234. #square7:hover {
  235. width: 150px;
  236. height: 200px;
  237. margin-left: 20px;
  238. margin-top: 5px;
  239. background-color: #fff;
  240. font-size: 11px;
  241. font-family: 'Calibri', sans-serif;
  242. color: #000;
  243. text-align: center;
  244. -webkit-transition: 1s ease;transition: 1s ease;
  245. -o-transition: 1s ease;
  246. -moz-transition: 1s ease;
  247. padding: 10px;
  248. }
  249.  
  250.  
  251. #square8 {
  252. margin-left: 40px;
  253. margin-top: 5px;
  254. width: 10px;
  255. height: 10px;
  256. background-color: #4E4E4E;
  257. -webkit-transition: 1s ease;transition: 1s ease;
  258. -o-transition: 1s ease;
  259. -moz-transition: 1s ease;
  260. position: fixed;
  261. overflow: hidden;
  262. font-size: 11px;
  263. font-family: 'Calibri', sans-serif;
  264. text-align: center;
  265. color: #4E4E4E;
  266. z-index: 999;
  267. }
  268.  
  269. #square8:hover {
  270. width: 150px;
  271. height: 200px;
  272. margin-left: 40px;
  273. margin-top: 5px;
  274. background-color: #fff;
  275. font-size: 11px;
  276. font-family: 'Calibri', sans-serif;
  277. color: #000;
  278. text-align: center;
  279. -webkit-transition: 1s ease;transition: 1s ease;
  280. -o-transition: 1s ease;
  281. -moz-transition: 1s ease;
  282. padding: 10px;
  283. }
  284.  
  285. #square9 {
  286. margin-left: 60px;
  287. margin-top: 5px;
  288. width: 10px;
  289. height: 10px;
  290. background-color: #4E4E4E;
  291. -webkit-transition: 1s ease;transition: 1s ease;
  292. -o-transition: 1s ease;
  293. -moz-transition: 1s ease;
  294. position: fixed;
  295. overflow: hidden;
  296. font-size: 11px;
  297. font-family: 'Calibri', sans-serif;
  298. text-align: center;
  299. color: #4E4E4E;
  300. z-index: 99;
  301. }
  302.  
  303. #square9:hover {
  304. width: 150px;
  305. height: 200px;
  306. margin-left: 60px;
  307. margin-top: 5px;
  308. background-color: #fff;
  309. color: #000;
  310. font-size: 11px;
  311. font-family: 'Calibri', sans-serif;
  312. text-align: center;
  313. -webkit-transition: 1s ease;transition: 1s ease;
  314. -o-transition: 1s ease;
  315. -moz-transition: 1s ease;
  316. padding: 10px;
  317. }
  318.  
  319. #squares {
  320. position: fixed;
  321. margin-top: 10px; /* play around with these two numbers depending on where on your blog you want the squares */
  322. margin-left: 10px; /* right now it might show up somewhere strange, that depends on the theme you use tbh */
  323. }
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!