Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Html Player UI
#1
www.deccal.org

HTML:

PHP Kod:
<div class="app">
  <
nav>
    <
div class="menu-button"></div>
    <
ul class="playlist">
      <
li>Cyberizm Playlist</li>
      <
li class="active">Beggin' for Thread <span>Banks</span></li>
      <li>Brain <span>Banks</span></li>
      <li>Goddess <span>Banks</span></li>
      <li>Alibi <span>Banks</span></li>
      <li>Waiting Game <span>Banks</span></li>
    </ul>
  </nav>
  <div class="now-playing">
    <div class="overlay"></div>
    <div class="info">
      <div class="small">Now Playing</div>
      <h2>Beggin' 
for Thread</h2>
      <
h3><span>by</spanBanks</h3>
    </
div>
  </
div>
</
div

CSS
PHP Kod:
htmlbody
  background
-color#212121
  
color#ffffff
  
font-family'Raleway'sans-serif
.app
  position
relative
  margin
50px auto
  width
420px
  height
300px
  background
-color#ffffff
  
overflowhidden
  
&:hover .info
    opacity
1
    bottom
10px
  
&:hover .overlay
    opacity
1
nav
  position
relative
  z
-index10
  
&:hover .menu-button
    opacity
1
  
.menu-active
    opacity
!important
    
&:before, &:after
      transition
all .3s
    
&:before
      top
2px !important
      transform
rotate(45deg)
    &:
after
      top
2px !important
      transform
rotate(-45deg)
  .
menu-button
    position
absolute
    z
-index10
    top
20px
    left
20px
    width
30px
    height
20px
    cursor
pointer
    opacity
0.4
    transition
all .3s
    
&:before, &:after
      content
''
      
positionabsolute
      background
-color#ffffff
      
height4px
      width
30px
      transition
all .3s
    
&:before
      top
0
    
&:after
      top
10px
  ul
.playlist-active
    left
!important
  ul
.playlist
    position
absolute
    z
-index4
    top
0
    left
: -50%
    
width50%
    
height300px
    padding
60px 0 0 0
    box
-sizingborder-box
    transition
all .3s
    background
-colorrgba(#212121, 0.8)
    
li
      display
inline-block
      font
-size11px
      padding
10px 20px
      border
-bottom1px solid #323232
      
width100%
      
box-sizingborder-box
      
&:hover
        background
-colorrgba(#b6b6b6, 0.1)
      
&:first-child
        font
-weight600
        padding
10px
        
&:hover
          background
-colortransparent !important
      span
        
&:before
          content
'by'
          
padding-right3px
          font
-size10px
          color
#b6b6b6
    
li.active
      position
relative
      background
-colorrgba(#03a9f4, 0.3)
.now-playing-active
  background
-positionleft !important
.now-playing
  z
-index5
  position
absolute
  top
0
  left
0
  width
100%
  
height100%
  
background-color#727272
  
background-imageurl('http://dev.nuro.me/img/banks.jpg')
  
background-repeatno-repeat
  background
-sizecover
  background
-positioncenter
  transition
all .3s
  
.overlay, .info, .controls
    position
absolute
    transition
all .3s
  
.overlay
    z
-index3
    top
0
    left
0
    width
100%
    
height100%
    
opacity0.2
    background
-colorrgba(#212121,0.4)
  
.info
    z
-index5
    bottom
0
    right
0
    width
50%
    
padding10px 20px
    box
-sizingborder-box 
    opacity
0.1
    text
-alignright
    
.small
      font
-size10px
      color
#03a9f4
      
font-weight600
      text
-transformuppercase
    h2
      font
-size22px
      font
-weight600
      text
-transformuppercase
    h3
      font
-size16px
      text
-transformuppercase
      span
        font
-size12px 
JS
PHP Kod:
var menu = $('.menu-button'),
    
playlist = $('ul.playlist'),
    
current = $('.now-playing');

menu.on('click', function() {
  $(
this).toggleClass('menu-active');
  
playlist.toggleClass('playlist-active');
  
current.toggleClass('now-playing-active');
}) 
İnsɑnlɑr değişmez değişen tek şey şɑrtlɑr ve çıkɑrlɑr...
Beğenenler: Ayar
#2
eline sağlık
www.deccal.org


Beğenenler:

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Çok Şık Admin Paneli [HTML + CSS] CyberAngel 38 1,357 11-11-2016, Saat: 14:29
Son Yorum: berat00
  Spastik Menü (css,html) HackLock 26 1,918 04-11-2016, Saat: 12:12
Son Yorum: Cesm-i Dil
  Temel HTML Kodları ve Anlamları KingSkrupellos 1 74 27-08-2016, Saat: 09:37
Son Yorum: H4Sec
  Dark Login Panel [HTML] CyberAngel 9 415 22-08-2016, Saat: 23:35
Son Yorum: Slowycan
  HTML Dersi Dark-Capar 4 213 18-02-2016, Saat: 03:40
Son Yorum: By.Jojo
Anahtar Kelimeler

Html Player UI indir, Html Player UI Videosu, Html Player UI Online izle, Html Player UI Bedava indir, Html Player UI Yükle, Html Player UI Hakkında, Html Player UI Nedir, Html Player UI Free indir, Html Player UI Oyunu, Html Player UI Download


1 Ziyaretçi