Advertisement
imgirlrauhl

Music Player Tab #1 - themesbyvanne

Mar 24th, 2014
6,596
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.22 KB | None | 0 0
  1. --------------------------------------------------
  2. ---------------- C O D E # 1 --------------------
  3. --------------------------------------------------
  4.  
  5. #musicicon {
  6. position: fixed;
  7. top: 20px;
  8. left: 20px;
  9. width: 26px;
  10. height: 26px;
  11. -webkit-transition: all .7s ease;
  12. -moz-transition: all .7s ease;
  13. -o-transition: all .7s ease;
  14. transition: all .7s ease;
  15. }
  16.  
  17. .micon {
  18. z-index: 1;
  19. width: 15px;
  20. background: #5EC6CB; /* music icon background */
  21. padding: 2px;
  22. width: 26px;
  23. height: 26px;
  24. border-radius: 4px;
  25. -webkit-transition: all .7s ease;
  26. -moz-transition: all .7s ease;
  27. -o-transition: all .7s ease;
  28. transition: all .7s ease;
  29. }
  30.  
  31. .micon:hover{
  32. border-top-left-radius: 4px;
  33. border-bottom-left-radius: 4px;
  34. border-top-right-radius: 0px;
  35. border-bottom-right-radius: 0px;
  36. }
  37.  
  38. .micon img { width: 15px; margin: 5px; }
  39.  
  40. .musicplayer {
  41. z-index: -1;
  42. position: absolute;
  43. margin-top: -30px;
  44. background: #fff; /* music player background */
  45. border: 1px solid #5EC6CB; /* music player border */
  46. margin-left: 5px;
  47. border-radius: 4px;
  48. width: 0px;
  49. padding: 9px;
  50. overflow: hidden;
  51. -webkit-transition: all .7s ease;
  52. -moz-transition: all .7s ease;
  53. -o-transition: all .7s ease;
  54. transition: all .7s ease;
  55. }
  56.  
  57. .mplayer { margin-left: -27px; }
  58.  
  59. #musicicon:hover .musicplayer {
  60. margin-left: 29px;
  61. width: 120px;
  62. border-top-left-radius: 0px;
  63. border-bottom-left-radius: 0px;
  64. border-top-right-radius: 4px;
  65. border-bottom-right-radius: 4px;
  66. }
  67.  
  68. #musicicon:hover .micon {
  69. border-top-left-radius: 4px;
  70. border-bottom-left-radius: 4px;
  71. border-top-right-radius: 0px;
  72. border-bottom-right-radius: 0px;
  73. }
  74.  
  75.  
  76.  
  77.  
  78. --------------------------------------------------
  79. ---------------- C O D E # 2 --------------------
  80. --------------------------------------------------
  81.  
  82. <div id="musicicon">
  83. <div class="micon">
  84. <img src="http://static.tumblr.com/n9vj50j/cxEn20wqg/12.gif">
  85. </div>
  86. <div class="musicplayer">
  87. <div class="mplayer">
  88. <!-- Delete this line and paste the code of your Billy Music Player -->
  89. </div>
  90. </div>
  91. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement