Skip to content

Instantly share code, notes, and snippets.

@MichaelArestad

MichaelArestad/dabblet.css

Created June 11, 2012 02:45
Show Gist options
  • Save MichaelArestad/2908203 to your computer and use it in GitHub Desktop.
Save MichaelArestad/2908203 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Slider
Raw
dabblet.css
/**
* CSS Slider
*/
html {
min-height: 100%;
}
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
padding: 5%;
}
.slider {
position: relative;
text-align: center;
}
.slider img {
position: absolute;
top: 0;
left: 0;
background: red;
width: 100%;
-webkit-transition: all 0s 500000s;
-moz-transition: background 0s 500000s;
-ms-transition: all 0s 500000s;
-o-transition: all 0s 500000s;
transition: all 0s 500000s;
}
.slider a {
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
margin-top: 450px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0s 500000s;
-moz-transition: all 0s 500000s;
-ms-transition: all 0s 500000s;
-o-transition: all 0s 500000s;
transition: all 0s 500000s;
}
.slider a:active {
background: #000;
-webkit-transition: all 0s;
-moz-transition: all 0s;
-ms-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
.slider a:active ~ a {
background: #fff;
border: 2px blue solid;
-webkit-transition: all 0s;
-moz-transition: all 0s;
-ms-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
.slider a:active img {
z-index: 2;
-webkit-transition: all 0s;
-moz-transition: all 0s;
-ms-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
.slider a:active ~ a img {
z-index: 1;
-webkit-transition: all 0s;
-moz-transition: all 0s;
-ms-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="slider">
<a href="#" title="The First Slide"><img src="http://www.michaelarestad.com/rolando/img/ampersand.jpg" alt="ampersand" /></a>
<a href="#" title="The Second Slide"><img src="http://www.michaelarestad.com/rolando/img/glint.jpg" alt="glint" /></a>
<a href="#" title="The Third Slide"><img src="http://www.michaelarestad.com/rolando/img/wigo.jpg" alt="wigo" /></a>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment