Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created April 26, 2012 13:35
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Apr 26, 2012.
    166 changes: 166 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,166 @@

    /* Common */
    html, body {
    background:#eaeaea url(../img/bg.png) repeat;
    font-size:12px;
    font-family:"Open Sans", serif;
    min-width:960px;
    margin:0;
    padding:0;
    color:#aaa;
    }

    .content h1 {
    font-size:48px;
    color:#000;
    text-shadow:0px 1px 1px #f4f4f4;
    text-align:center;
    padding:60px 0 30px;
    }

    /* 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;
    -moz-animation:cycle 25s linear infinite;
    -webkit-animation:cycle 25s linear infinite;

    }

    #slider li.firstanimation {
    -moz-animation-delay:-20s;
    -webkit-animation-delay:-20s;
    }
    #slider li.secondanimation {
    -moz-animation-delay:-15s;
    -webkit-animation-delay:-15s;
    }
    #slider li.thirdanimation {
    -moz-animation-delay:-10s;
    -webkit-animation-delay:-10s;
    }
    #slider li.fourthanimation {
    -moz-animation-delay:-5s;
    -webkit-animation-delay:-5s;
    }
    #slider li.fifthanimation {
    -moz-animation-delay:0s;
    -webkit-animation-delay:0s;
    }

    #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;
    }


    @-moz-keyframes cycle {
    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 cycle {
    0% { top:-325px; opacity:0; z-index:0;}
    56% { top:-325px; opacity:0; z-index:0;}
    60% { top:0px; opacity:1; z-index:1;}
    64% { top:0px; opacity:1; z-index: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; }

    }

    /* 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; }
    }
    7 changes: 7 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@

    <div class="content">
    <h1>Pure CSS3 Cycle Slider</h1>
    </div>
    <div class="container">
    <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="#"> <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_1.jpg" alt="Cougar"/> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li>
    <li id="second" class="secondanimation"> <a href="#"> <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_2.jpg" alt="Lions"/> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_3.jpg" alt="Snowalker"/> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_4.jpg" alt="Howling"/> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_5.jpg" alt="Sunbathing"/> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div></div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}