• Sunday, 25 August 2013

    CSS3 Slider Tanpa Javascript

    Dengan adanya teknologi web CSS3, penggunaan javascript yang memberatkan sebuah blog dapat dikurangi. Salahsatu contohnya adalah pembuatan Slider pada blog hanya dengan CSS3.

    Contoh dari CSS3 Slider yang Saya pakai disini adalah teknik pembuatan slider yang telah diajarkan oleh SmashingMagazine yang berjudul A Pure CSS3 Cycling Slideshow.

    Teknik CSS3 yang digunakan adalah:

    CSS3 Transition:
    transition-property
    transition-duration
    transition-timing-function
    transition-delay

    CSS3 Animation:
    animation-delay
    animation-direction
    animation-duration
    animation-iteration-count
    animation-name
    animation-play-state
    animation-timing-function
    animation-fill-mode

    CSS

    /* LAYOUT */
    
    .container {
    
     margin:0 auto;
    
     overflow:hidden;
    
     width:960px;
    
    }
    
    
    
    /* CONTENT SLIDER */
    
    #content-slider {
    
     width:100%;
    
     height:360px;
    
     margin:10px auto 0;
    
    }
    
    /* SLIDER */
    
    #slider {
    
     background:#000;
    
     border:5px solid #eaeaea;
    
     box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    
     height:320px;
    
     width:680px;
    
     margin:40px auto 0;
    
     overflow:visible;
    
     position:relative;
    
    }
    
    #mask {
    
     overflow:hidden;
    
     height:320px;
    
    }
    
    #slider ul {
    
     margin:0;
    
     padding:0;
    
     position:relative;
    
    }
    
    #slider li {
    
     width:680px;
    
     height:320px;
    
     position:absolute;
    
     top:-325px;
    
     list-style:none;
    
    }
    
    
    
    #slider li.firstanimation {
    
     -moz-animation:cycle 25s linear infinite; 
    
     -webkit-animation:cycle 25s linear infinite;  
    
    }
    
    #slider li.secondanimation {
    
     -moz-animation:cycletwo 25s linear infinite;
    
     -webkit-animation:cycletwo 25s linear infinite;  
    
    }
    
    #slider li.thirdanimation {
    
     -moz-animation:cyclethree 25s linear infinite;
    
     -webkit-animation:cyclethree 25s linear infinite;  
    
    }
    
    #slider li.fourthanimation {
    
     -moz-animation:cyclefour 25s linear infinite;
    
     -webkit-animation:cyclefour 25s linear infinite;  
    
    }
    
    #slider li.fifthanimation {
    
     -moz-animation:cyclefive 25s linear infinite;
    
     -webkit-animation:cyclefive 25s linear infinite;  
    
    }
    
    
    
    #slider .tooltip {
    
     background:rgba(0,0,0,0.7);
    
     width:300px;
    
     height:60px;
    
     position:relative;
    
     bottom:75px;
    
     left:-320px;
    
     -moz-transition:all 0.3s ease-in-out;
    
     -webkit-transition:all 0.3s ease-in-out; 
    
    }
    
    #slider .tooltip h1 {
    
     color:#fff;
    
     font-size:24px;
    
     font-weight:300;
    
     line-height:60px;
    
     padding:0 0 0 20px;
    
    }
    
    #slider li#first:hover .tooltip,
    
    #slider li#second:hover .tooltip,
    
    #slider li#third:hover .tooltip,
    
    #slider li#fourth:hover .tooltip,
    
    #slider li#fifth:hover .tooltip {
    
     left:0px;
    
    }
    
    #slider:hover li,
    
    #slider:hover .progress-bar {
    
     -moz-animation-play-state:paused;
    
     -webkit-animation-play-state:paused;
    
    }
    
    
    
    /* PROGRESS BAR */
    
    .progress-bar {
    
     position:relative;
    
     top:-5px;
    
     width:680px;
    
     height:5px;
    
     background:#000;
    
     -moz-animation:fullexpand 25s ease-out infinite;
    
     -webkit-animation:fullexpand 25s ease-out infinite;
    
    }
    
    
    
    /* ANIMATION */
    
    @-moz-keyframes cycle {
    
     0%  { top:0px; }
    
     4%  { top:0px; }
    
     16% { top:0px; opacity:1; z-index:0; }
    
     20% { top:325px; opacity:0; z-index:0; }
    
     21% { top:-325px; opacity:0; z-index:-1; }
    
     92% { top:-325px; opacity:0; z-index:0; }
    
     96% { top:-325px; opacity:0; }
    
     100%{ top:0px; opacity:1; }
    
     
    
    }
    
    @-moz-keyframes cycletwo {
    
     0%  { top:-325px; opacity:0; }
    
     16% { top:-325px; opacity:0; }
    
     20% { top:0px; opacity:1; }
    
     24% { top:0px; opacity:1; }
    
     36% { top:0px; opacity:1; z-index:0; }
    
     40% { top:325px; opacity:0; z-index:0; }
    
     41% { top:-325px; opacity:0; z-index:-1; }
    
     100%{ top:-325px; opacity:0; z-index:-1; }
    
    }
    
    @-moz-keyframes cyclethree {
    
     0%  { top:-325px; opacity:0; }
    
     36% { top:-325px; opacity:0; }
    
     40% { top:0px; opacity:1; }
    
     44% { top:0px; opacity:1; }
    
     56% { top:0px; opacity:1; }
    
     60% { top:325px; opacity:0; z-index:0; }
    
     61% { top:-325px; opacity:0; z-index:-1; }
    
     100%{ top:-325px; opacity:0; z-index:-1; }
    
    }
    
    @-moz-keyframes cyclefour {
    
     0%  { top:-325px; opacity:0; }
    
     56% { top:-325px; opacity:0; }
    
     60% { top:0px; opacity:1; }
    
     64% { top:0px; opacity:1; }
    
     76% { top:0px; opacity:1; z-index:0; }
    
     80% { top:325px; opacity:0; z-index:0; }
    
     81% { top:-325px; opacity:0; z-index:-1; }
    
     100%{ top:-325px; opacity:0; z-index:-1; }
    
    }
    
    @-moz-keyframes cyclefive {
    
     0%  { top:-325px; opacity:0; }
    
     76% { top:-325px; opacity:0; }
    
     80% { top:0px; opacity:1; }
    
     84% { top:0px; opacity:1; }
    
     96% { top:0px; opacity:1; z-index:0; }
    
     100%{ top:325px; opacity:0; z-index:0; }
    
    }
    
    
    
    @-webkit-keyframes cycle {
    
     0%  { top:0px; }
    
     4%  { top:0px; }
    
     16% { top:0px; opacity:1; z-index:0; }
    
     20% { top:325px; opacity:0; z-index:0; }
    
     21% { top:-325px; opacity:0; z-index:-1; }
    
     50% { top:-325px; opacity:0; z-index:-1; }
    
     92% { top:-325px; opacity:0; z-index:0; }
    
     96% { top:-325px; opacity:0; }
    
     100%{ top:0px; opacity:1; }
    
     
    
    }
    
    @-webkit-keyframes cycletwo {
    
     0%  { top:-325px; opacity:0; }
    
     16% { top:-325px; opacity:0; }
    
     20% { top:0px; opacity:1; }
    
     24% { top:0px; opacity:1; }
    
     36% { top:0px; opacity:1; z-index:0; }
    
     40% { top:325px; opacity:0; z-index:0; }
    
     41% { top:-325px; opacity:0; z-index:-1; } 
    
     100%{ top:-325px; opacity:0; z-index:-1; }
    
    }
    
    @-webkit-keyframes cyclethree {
    
     0%  { top:-325px; opacity:0; }
    
     36% { top:-325px; opacity:0; }
    
     40% { top:0px; opacity:1; }
    
     44% { top:0px; opacity:1; }
    
     56% { top:0px; opacity:1; z-index:0; }
    
     60% { top:325px; opacity:0; z-index:0; }
    
     61% { top:-325px; opacity:0; z-index:-1; }
    
     100%{ top:-325px; opacity:0; z-index:-1; }
    
    }
    
    @-webkit-keyframes cyclefour {
    
     0%  { top:-325px; opacity:0; }
    
     56% { top:-325px; opacity:0; }
    
     60% { top:0px; opacity:1; }
    
     64% { top:0px; opacity:1; }
    
     76% { top:0px; opacity:1; z-index:0; }
    
     80% { top:325px; opacity:0; z-index:0; }
    
     81% { top:-325px; opacity:0; z-index:-1; }
    
     100%{ top:-325px; opacity:0; z-index:-1; }
    
    }
    
    @-webkit-keyframes cyclefive {
    
     0%  { top:-325px; opacity:0; }
    
     76% { top:-325px; opacity:0; }
    
     80% { top:0px; opacity:1; }
    
     84% { top:0px; opacity:1; }
    
     96% { top:0px; opacity:1; z-index:0; }
    
     100%{ top:325px; opacity:0; z-index:0; }
    
    }
    
    
    
    /* ANIMATION BAR */
    
    @-moz-keyframes fullexpand {
    
        0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    
        4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
    
       16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
    
       17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
    
       18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
    
    }
    
    @-webkit-keyframes fullexpand {
    
        0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    
        4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
    
       16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
    
       17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
    
       18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
    
    }
    


    HTML

    <div class="container">
    
     <div id="content-slider">
    
         <div id="slider">
    
             <div id="mask">
    
                <ul>
    
                <li id="first" class="firstanimation">
    
                <a href="#">
    
                <img src="http://4.bp.blogspot.com/-QJUTMTxkQUA/UgLtLHXwEpI/AAAAAAAADVU/xrtKCPxu6yQ/s680/img_1.jpg" alt="Cougar" width='680' height='320'/>
    
                </a>
    
                <div class="tooltip">
    
                <h1>Cougar</h1>
    
                </div>
    
                </li>
    
    
    
                <li id="second" class="secondanimation">
    
                <a href="#">
    
                <img src="http://4.bp.blogspot.com/-dDVG1LWt6_Y/UgLtLqYqQYI/AAAAAAAADVk/nZuQTbI9_yk/s680/img_2.jpg" alt="Lions" width='680' height='320'/>
    
                </a>
    
                <div class="tooltip">
    
                <h1>Lions</h1>
    
                </div>
    
                </li>
    
               
    
                <li id="third" class="thirdanimation">
    
                <a href="#">
    
                <img src="http://2.bp.blogspot.com/-EV4DRDNtScc/UgLtLqMInyI/AAAAAAAADVY/GAgz4K9PSSw/s680/img_3.jpg" alt="Snowalker" width='680' height='320'/>
    
                </a>
    
                <div class="tooltip">
    
                <h1>Snowalker</h1>
    
                </div>
    
                </li>
    
                           
    
                <li id="fourth" class="fourthanimation">
    
                <a href="#">
    
                <img src="http://2.bp.blogspot.com/-sEHtFHVlY5o/UgLtMAEMcDI/AAAAAAAADVo/fgGCco87iiY/s680/img_4.jpg" alt="Howling" width='680' height='320'/>
    
                </a>
    
                <div class="tooltip">
    
                <h1>Howling</h1>
    
                </div>
    
                </li>
    
                           
    
                <li id="fifth" class="fifthanimation">
    
                <a href="#">
    
                <img src="http://4.bp.blogspot.com/-NJ6aoNXJaPA/UgLtMTqjRhI/AAAAAAAADVw/rucgCBIB8xI/s680/img_5.jpg" alt="Sunbathing" width='680' height='320'/>
    
                </a>
    
                <div class="tooltip">
    
                <h1>Sunbathing</h1>
    
                </div>
    
                </li>
    
                </ul>
    
                </div>
    
                <div class="progress-bar"></div>
    
            </div>
    
        </div>
    
    </div>
    
    


    DEMO - TUTORIAL

    CSSHTML5 uses cookies to ensure you get the best experience on our website. More info

    Thursday, 22 August 2013

    Pengertian CSS 3

    CSS3 adalah Cascading Style Sheet versi ke 3, yaitu pengatur dan pengendali tampilan sebuah halaman ...

    CSSHTML5 uses cookies to ensure you get the best experience on our website. More info

    Tuesday, 20 August 2013

    Pengertian HTML 5

    Pengertian HTML5 adalah HyperText Markup Language (HTML) revisi ke lima. HTML5 merupakan sebuah ba...

    CSSHTML5 uses cookies to ensure you get the best experience on our website. More info

    Monday, 19 August 2013

    HTML CSS Basic Elements Test

    CSS Basic Elements The purpose of this HTML is to help determine what default settings are with CS...

    CSSHTML5 uses cookies to ensure you get the best experience on our website. More info

    Wednesday, 14 August 2013

    Template Blogspot Clean, Simple, SEO Optimized

    Blogspot Template Clean, Simple, Seo Optimized, User Friendly, Retina Friendly, Robots Friendly sert...

    CSSHTML5 uses cookies to ensure you get the best experience on our website. More info

    Copyright © CSSHTML5

    Promoted Link: Tafsir Sponsored By: Gratis Template By: Habib