Newest Theme
Newest Page
Updates
Hello! Welcome to my theme blog, bakaothemes. Please read the terms of use for more info.
Posting: My Themes/Pages + Answers
Kris aka. my saviour.
ThemesPagesPlayersResourcesTutorials

fukuo:

Music Player Techno by Fukuo

I’ve been trying to find the style of Music Player, I had before. Now, I am going to share my experiment what I’ve done. As you can see, this is more complicated and is relatively different from my music tab, earlier. Just try to adjust the position of the music player if the position is not fit with your taste!

Live preview

HTML: Creating the Music Player!

As usual, try to insert this code under the ‘<body>’ tags!

<div id="music-rounded">
    <center><img src="https://64.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"></center>
        <div class="music-border"></div>
            <div class="music-player-embed">
             <center>MUSIC PLAYER CODE HERE</center>
        </div>
    </div>

CSS: Styling the Music Player!

And then, put this code between <style type=”text/css”> and </style>

#music-rounded {
      position:fixed;
      left:75px;
      top:150px;
      width:50px;
      height:50px;
      background-color:#000;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      border-radius:100px;
      opacity:1;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
}

#music-rounded img {
     margin-top:17px;
     margin-left:-2px;
}

#music-rounded:hover .music-player-embed {
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     border-radius:5px;
     margin-top:-20px;
     opacity:1;
     background-color:#000;
     color:#fff;
     -webkit-transition: all 0.7s ease;
     -moz-transition: all 0.7s ease;
     transition: all 0.7s ease;
} 

.music-border {
        position:absolute;
        margin-top:-42px;
        margin-left:-15px;
        border:10px solid rgba(0, 0, 0, 0.4);
        width:60px;
        height:59px;
        background-color:none;
        -moz-border-radius:100px;
        -webkit-border-radius:100px;
        border-radius:100px;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
}

.music-border:hover {
        margin-top:-48px;
        margin-left:-20px;
        border:15px solid rgba(0, 0, 0, 0.4);
        -webkit-transition: all 0.7s ease;
        -moz-transition: all 0.7s ease;
        transition: all 0.7s ease;
        -webkit-transform:rotateY(360deg);
        -moz-transform:rotateY(360deg);
        -o-transform: rotateY(360deg);
}

.music-player-embed {
    font-family:Consolas;
    font-size:11px;
    position:absolute;
    min-width:100px;
    background-color:#FFF;
    padding:9px;
    margin-left:90px;
    margin-top:0px;
    overflow:hidden;
    opacity:0;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

And, WA-LA! I hope you all like it! I was trying to make it with my sincerity from my knowledge of HTML and CSS—any form of Credit, Like and Reblog are appreciated! image

Posted On: September , 2013 @ 12:01pm with 1797
Filed Under: # rec # tutorial # music player
  1. anothercrazyemo reblogged this from fukuo
  2. galaxiesarebeautifulchaos reblogged this from fukuo
  3. mosguitoland reblogged this from bakaothemes
  4. caitsiths-theme reblogged this from themesrec
  5. fukuo posted this