• Recent Comments

    Sunday, 25 August 2013

    CSS3 Slider Tanpa Javascript

    No comments:
    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

    Thursday, 22 August 2013

    Pengertian CSS 3

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

    Tuesday, 20 August 2013

    Pengertian HTML 5

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

    Monday, 19 August 2013

    HTML CSS Basic Elements Test

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

    Wednesday, 14 August 2013

    Template Blogspot Clean, Simple, SEO Optimized

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

    Copyright © CSSHTML5

    Promoted Link: MP3 Nasyid Sponsored By: MP3 Melayu Template By: Habib