Pure CSS Slider with Radio Buttons

by secretgspot

HTML

<ul class="slider">
    <li>
        <input type="radio" id="slide1" name="slide" checked>
        <label for="slide1"></label>
        <img src="http://www.dessko.com/assets/images/116/116_size_400x300_wallpaper-25331.jpg?1265653882">
    </li>
    <li>
        <input type="radio" id="slide2" name="slide">
        <label for="slide2"></label>
        <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/09/Beautiful-Landscape-400x300.jpg">
    </li>
    <li>
        <input type="radio" id="slide3" name="slide">
        <label for="slide3"></label>
        <img src="http://www.photofurl.com/wp-content/uploads/2010/04/blue-water-beach-wallpaper-400x300.jpg">
    </li>
    <li>
        <input type="radio" id="slide4" name="slide">
        <label for="slide4"></label>
        <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/10/Winter_Landscape-400x300.jpg">
    </li>
</ul>

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #eefbf8;
    background-image: -webkit-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)),
                      -webkit-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%);
    background-image:    -moz-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)),
                         -moz-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%);
    background-image:     -ms-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)),
                          -ms-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%);
    background-image:      -o-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)),
                           -o-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%);
    background-image:         radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)),
                              linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%);
    background-position: 50% 75%, 50% 50%;
    background-repeat: no-repeat, repeat;
    background-size: 150% 150%, 3em 3em;
    font-size: 100%;
    min-height: 100%;
}
  /**********/
 /* Slider */
/**********/

.slider {
    background-color: #fff;
    box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
                0 3px 1px hsla(0,0%,100%,.75),
                0 -1px 1px 2px hsla(0,0%,0%,.1);
    height: 15em;
    left: 50%;
    margin: -8em -13em;
    padding: .5em;
    position: absolute;
    top: 50%;
    width: 25em;
}
/* Frame */
.slider:before {
    background-color: #22130c;
    bottom: -2.5em;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
                inset 0 -2px 1px hsla(0,0%,0%,.4),
                0 5px 50px hsla(0,0%,0%,.25),
                0 20px 20px -15px hsla(0,0%,0%,.2),
                0 30px 20px -15px hsla(0,0%,0%,.15),
                0 40px 20px -15px hsla(0,0%,0%,.1);
    content: '';
    left: -2.5em;
    position: absolute;
   ...