Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created July 10, 2012 06:27
Show Gist options
  • Save alexmwalker/3081557 to your computer and use it in GitHub Desktop.
Save alexmwalker/3081557 to your computer and use it in GitHub Desktop.
Download ZIP
A Very Brady Adjacent Sibling Selector Demo
Raw
dabblet.css
/**
* A Very Brady Adjacent Sibling Selector Demo
*/
body{
background: #000;
min-height: 100%;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
#main{
list-style-position:inside;
color:#fff;
margin:50px auto;
position:relative;
z-index:999;
overflow:auto;
}
footer{
text-align:center;
color:#888;
font-size:22px
}
h1{
text-align:center;
color:#888;
font-size:28px
}
#centertile{
position:absolute;
text-indent:-999em;
width:180px;
height:133px;
left:180px;
top:115px;
border:0px none;
background:url(http://www.sitepoint.com/examples/sibling-selectors/adjacent-title.png) no-repeat;
}
ol{
width:475px;
list-style-position:inside;
color:#66aaff;
margin:1em auto;
position:relative;
}
li{
height:118px;
width:148px;
float:left;
border:#000 solid 2px;
font-size:10px;
padding-left:5px;
background:#327AB6
}
/* The Brady's */
#marcia{
background-image:url(http://www.sitepoint.com/examples/sibling-selectors/s1-marsha.png)
}
#carol{
background-image:url(http://www.sitepoint.com/examples/sibling-selectors/s2-carol.png);
}
#greg{
background-image:url(http://www.sitepoint.com/examples/sibling-selectors/s3-greg.png)
}
#jan{
background-image:url(http://www.sitepoint.com/examples/sibling-selectors/s4-jan.png);
margin-right:157px /* keeping the center box clear */
}
#peter{
background-image:url(http://www.sitepoint.com/examples/sibling-selectors/s5-peter.png?r=1)
}
#cindy{
background-image:url(http://www.sitepoint.com/examples/sibling-selectors/s6-cindy.png)
}
#mike{
background-image:url(http://www.sitepoint.com/examples/sibling-selectors/s7-mike.png);
}
#bobby{
background-image:url(http://www.sitepoint.com/examples/sibling-selectors/s8-bobby.png);
}
/* Push the button */
li:hover{
background-position:0 -118px;
}
/* Buzz phhft buzz animation */
@keyframes flash{
0%{background-position:0 -236px;}
50%{background-position:0 -354px;}
100%{background-position:0 -236px;}
}
/* sibling selectors*/
li:hover + li {
animation:flash .2s infinite steps(1);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<section id="main">
<h1 >The Sibling Selectors</h1>
<ol>
<li id="centertile">The Adjacent Sibling Selector</li>
<li id="marcia">Marcia </li>
<li id="carol">Carol</li>
<li id="greg">Greg </li>
<li id="jan">Jan</li>
<li id="peter">Peter</li>
<li id="cindy">Cindy </li>
<li id="mike">Mike</li>
<li id="bobby">Bobby</li>
</ol>
</section>
<footer>
<p>http://dabblet.com/gist/3081557</p>
</footer>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment