1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İdda edenlere inanmayınız.. Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.
    Duyuruyu Kapat

Css [ Flex ] Mp3 Çalar

'Html - CSS - XML - JavaScript - Ajax' forumunda The61 tarafından 7 Ocak 2019 tarihinde açılan konu

  1. The61 Guest

    • Guest
    Katılım:
    20 Temmuz 2017
    Mesaj:
    608
    Alınan Beğeniler:
    473

    Özel Mesaj
    Kod :
    PHP:
    <html lang ="tr">
        <
    html>
            <
    head>
                <
    meta charset ="utf-8">
                    <
    title>Flex Media Player CSS</title>
                    <
    meta name ="title" content="Flex Media Player | CSS">
                        <
    meta name ="viewport" content="width=device-width,initial-scale=1">
                            <
    meta name ="description" content="Css flex media player example">
                                <
    link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
                                <
    link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
                                    <
    style>
                                        
    /*the61 tarafindan kodlanmistir*/
                                        
                                        /*reset*/
                                        
    *,
                                        ::
    before,
                                        ::
    after{
                                            
    margin:0;
                                            
    padding:0;
                                            
    box-sizing:border-box;
                                            }
                                        
    /*---------*/
                                        
                                        
    body{
                                            
    background:#eee;
                                            
    font-family:'Roboto',sans-serif;
                                            
    font-size:14px;
                                            }
                                        
                                        .
    wrapper{
                                            
    width:100%;
                                            
    height:100%;
                                            
    display:flex;
                                            
                                            
    align-items:center;
                                            
    justify-content:center;
                                            
    background:linear-gradient(to bottom,#000000,#BB00FF);
                                            
    }
                                        
                                        
                                        .
    media-player-wrapper{
                                            
    width:300px;
                                            
    height:400px;
                                            
    display:flex;
                                            
    flex-flow:column nowrap;
                                            
    justify-content:center;
                                            
    align-items:center;
                                            
    background:white;
                                            
    position:relative;
                                            
    z-index:1;
                                            
    background:url(https://cdn.pixabay.com/photo/2017/01/18/17/14/girl-1990347_960_720.jpg);
                                            
    background-size:cover;
                                            
    overflow:hidden;
                                            }
                                            
                                        .
    media-player-wrapper::before{
                                            
    content:"";
                                            
    position:absolute;
                                            
    top:0;
                                            
    left:0;
                                            
    width:100%;
                                            
    height:100%;
                                            
    z-index:-1;
                                            
    opacity:.4;
                                            
    background:linear-gradient(to bottom,white,black);
                                            
    transition:all 2s ease-out;
                                            }
                                            
                                        .
    media-player-wrapper #music-name{
                                            
    display:flex;
                                            
    flex-flow:column nowrap;
                                            
    align-items:center;
                                            }
                                            
                                        .
    media-player-wrapper #music-name h1{
                                            
    color:rgb(255,255,255);
                                            
    text-shadow:0px 0px 5px rgba(0,0,0,0.3);
                                            
                                            }
                                            
                                        .
    media-player-wrapper #music-name p{
                                            
    color:rgba(255,255,255,0.5);
                                            
    font-size:17px;
                                            
    text-shadow:0px 0px 5px rgba(0,0,0,0.3);
                                            }
                                            
                                        .
    media-player-wrapper #media-player-buttons{
                                            
    width:100%;
                                            
    height:70px;
                                            
    display:flex;
                                            
    opacity:0;
                                            
    flex-flow:row wrap;
                                            
    justify-content:center;
                                            
    background:rgb(255,255,255);
                                            
    position:absolute;
                                            
    bottom:-100px;
                                            
    left:0;
                                            -
    webkit-transition:all 2s ease-out;
                                            
    transition:all 2s ease-out;
                                            }
                                            
                                        .
    media-player-wrapper #media-player-buttons span{
                                            
    color:rgba(0,0,0,0.5);
                                            
    padding:10px;
                                            
    align-self:center;
                                            -
    webkit-transition:all 2s ease-out;
                                            
    transition:all 2s ease-out;
                                            }
                                        
                                        .
    media-player-wrapper:hover{
                                            
    box-shadow:0px 0px 10px rgba(0,0,0,0.3);
                                            -
    webkit-transition:all 2s ease-out;
                                            
    transition:all 2s ease-out;
                                            }
                                        .
    media-player-wrapper:hover #media-player-buttons{
                                            
    opacity:1;
                                            
    bottom:0px;
                                            }
                                            
                                        .
    media-player-wrapper #media-player-buttons span:hover{
                                            
    color:rgb(0,0,0);
                                            
    text-shadow:0px 0px 5px rgba(255,255,255,0.8);
                                            
                                            }
                                        </
    style>
                                        </
    head>
                                        <
    body>
                                            <!--
    wrapper start-->
                                            <
    div class="wrapper">
                                                <!--
    media player wrapper start-->
                                                <
    div class="media-player-wrapper">
                                                    <
    div id="music-name">
                                                        <
    h1>Pop Song</h1>
                                                        <
    p>Work Hard..</p>
                                                        </
    div>
                                                        <
    div id ="media-player-buttons">
                                                            <
    span><class="fas fa-play"></i></span>
                                                            <
    span><class="fas fa-pause"></i></span>
                                                            <
    span><class="fas fa-stop"></i></span>
                                                            </
    div>
                                                    </
    div><!--#media player wrapper-->
                                                
    </div><!--#wrapper-->
                                            
    </body>
                                            </
    html>
                                

    [ ÖNİZLE ]
     
    AKERCAN ve AydoganGotu bunu beğendi.

Bu Sayfayı Paylaş