Skip to content

Instantly share code, notes, and snippets.

@gentle-media

gentle-media/dabblet.css

Created June 10, 2012 10:38
Show Gist options
  • Save gentle-media/2904904 to your computer and use it in GitHub Desktop.
Save gentle-media/2904904 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 :target experiment
Raw
dabblet.css
/**
* CSS3 :target experiment
*/
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Helvetica, arial, serif;
font-size: 100%;
background-color: #333}
nav {
position: absolute;
width: 96%;
margin: 0;
left: 4%;
bottom: 5%;
z-index: 1}
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 1%}
li {
position: relative;
float: left;
width: 10px;
height: 10px;
margin-right: 5px}
li a {
display: block;
width: 10px;
height: 10px;
text-indent: -9999px}
li span {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background-color: #FFF;
z-index: -1;
transition: background-color 0s 9999999s}
li a:active + span {
background-color: #FF0;
transition: background-color 0s}
#container {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden}
.section {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
left: -100%;
color: #000;
overflow: hidden;
background-size: cover;
transition: left .3s ease-in-out}
h1 {
position: absolute;
width: 100%;
font-size: 4em;
font-weight: bold;
text-transform: uppercase;
text-align: center;
margin: 0;
top: 85%;
left: 100%;
transition: left .3s ease-out .5s}
#section-01 {
background-image: url(http://farm4.staticflickr.com/3391/5818105341_a23f220570_b.jpg);
/*http://www.flickr.com/photos/pedrosz/5818105341/*/}
#section-02 {
background-image: url(http://farm9.staticflickr.com/8161/6970210668_dba3cd1e34_b.jpg);
/*http://www.flickr.com/photos/americanbulldogbully007/6970210668/*/
background-position: bottom}
#section-03 {
background-image: url(http://statics.photodom.com/photos/2012/05/31/2425668.jpg?v=0);
/*http://www.photodom.com/photo/2425668*/
background-position: bottom}
.section:target {
left: 0}
.section:target > h1 {
left: 0}
Raw
dabblet.html
<body>
<nav>
<ul>
<li><a href="#section-01">01</a><span></span></li>
<li><a href="#section-02">02</a><span></span></li>
<li><a href="#section-03">03</a><span></span></li>
<li><a href="#section-04">04</a><span></span></li>
</ul>
</nav>
<div id="container">
<section id="section-01" class="section">
<h1>section 01</h1>
</section>
<section id="section-02" class="section">
<h1>section 02</h1>
</section>
<section id="section-03" class="section">
<h1>section 03</h1>
</section >
<section id="section-04" class="section">
<h1>section 04</h1>
</section>
</div>
</body>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment