Skip to content

Instantly share code, notes, and snippets.

@defims

defims/index.html

Created August 19, 2012 03:00
Show Gist options
  • Save defims/3391339 to your computer and use it in GitHub Desktop.
Save defims/3391339 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<div class="topic">
topic
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Raw
style.css
body{
padding:17em;
}
.topic{
display: block; position: relative;
padding:1em 0;
width: 14em; height: 1em; line-height: 1em;
border:solid 1px black;
text-align:center; vertical-align: middle;
background: pink;
}
ul{
display: block; 0position: absolute;
margin-top:-.5em;
0width: 100%;
0top:1.5em;
0margin:0; padding:0;
text-align: justify;
0background:rgba(255,0,0,.4);
counter-reset:increment;
}
ul>li{
display:block; position: relative;
margin:.25em auto; padding: .25em 0;
width:7em; height:1em;
vertical-align: bottom; white-space:nowrap;
background:rgba(0,0,0,.3); background: gray;
counter-increment:increment;
}
ul>li:after{
content: ""; display: inline-block; position: relative; z-index: -1;
border:solid black 0;
width:125%;
margin:0 .25em; /*horizon margin*/
height:1em;
}
/*two column*/
ul>li:nth-child(even){ margin-top:-1.75em; }
ul>li:nth-child(4n+1),
ul>li:nth-child(4n+3){
left:125%;
text-align: right;
}
ul>li:nth-child(4n+1):after{
right: 125%;
margin-right:-125%;
border-width: 0 0 .2em .2em; border-color:blue;
margin-top:-9999em;
}
ul>li:nth-child(4n+3):after{
float: right;
right: 125%;
margin-right:-125%;
border-width: .2em 0 0 .2em; border-color:darkgray;
margin-bottom: 9999em;
}
ul>li:nth-child(4n+2),
ul>li:nth-child(4n+4){
right:125%;
text-align: left;
}
ul>li:nth-child(4n+2):after{
left: 125%;
margin-left:-125%;
border-width: 0 .2em .2em 0; border-color:green;
margin-top:-9999em;
}
ul>li:nth-child(4n+4):after{
float: left;
left: 125%;
margin-left:-125%;
border-width: .2em .2em 0 0; border-color:black;
margin-bottom: 9999em;
}
ul>li:before{
content: counter(increment) ; display: block; position: absolute;
left: 0; right: 0;
text-align: center; color:white; font-family: "Georgia"
}
/*user defined*/
/*long enough*/
ul>li:nth-child(4n+1),ul>li:nth-child(4n+3){ left: 125%; }
ul>li:nth-child(4n+1):after,ul>li:nth-child(4n+3):after{ right: 200%; margin-right: -200%; width:200%; }
ul>li:nth-child(4n+2),ul>li:nth-child(4n+4){ right: 125%; }
ul>li:nth-child(4n+2):after,ul>li:nth-child(4n+4):after{ left: 200%; margin-left: -200%; width:200%; }
/*change order*/
ul>li:nth-child(4n){ margin-bottom: -1.75em; }
/**/
ul>li:nth-child(3),ul>li:nth-child(4){ bottom:3.5em; }
ul>li:nth-child(7),ul>li:nth-child(8){ bottom:7em; }
ul>li:nth-child(11),ul>li:nth-child(12){ bottom:10.5em; }
ul>li:nth-child(15),ul>li:nth-child(16){ bottom:14em; }
ul>li:nth-child(19),ul>li:nth-child(20){ bottom:17.5em; }
ul>li:nth-child(23),ul>li:nth-child(24){ bottom:21em; }
ul>li:nth-child(27),ul>li:nth-child(28){ bottom:24.5em; }
ul>li:nth-child(31),ul>li:nth-child(32){ bottom:28em; }
ul>li:nth-child(35),ul>li:nth-child(36){ bottom:31.5em; }
ul>li:nth-child(39),ul>li:nth-child(40){ bottom:35em; }
ul>li:nth-child(33),ul>li:nth-child(44){ bottom:38.5em; }
ul>li:nth-child(47),ul>li:nth-child(48){ bottom:42em; }
ul>li:nth-child(51),ul>li:nth-child(52){ bottom:45.5em; }
ul>li:nth-child(55),ul>li:nth-child(56){ bottom:49em; }
ul>li:nth-child(59),ul>li:nth-child(60){ bottom:52.5em; }
/**/
/*link height increment 1.25em = 1em +.25em height + margin + padding*/
ul>li:nth-child(1):after,ul>li:nth-child(2):after,ul>li:nth-child(3):after,ul>li:nth-child(4):after{ height: 1.25em; }
ul>li:nth-child(5):after,ul>li:nth-child(6):after,ul>li:nth-child(7):after,ul>li:nth-child(8):after{ height: 3em; }
ul>li:nth-child(9):after,ul>li:nth-child(10):after,ul>li:nth-child(11):after,ul>li:nth-child(12):after{ height: 4.75em; }
ul>li:nth-child(13):after,ul>li:nth-child(14):after,ul>li:nth-child(15):after,ul>li:nth-child(16):after{ height: 6.5em; }
ul>li:nth-child(17):after,ul>li:nth-child(18):after,ul>li:nth-child(19):after,ul>li:nth-child(20):after{ height: 8.25em; }
ul>li:nth-child(21):after,ul>li:nth-child(22):after,ul>li:nth-child(23):after,ul>li:nth-child(24):after{ height: 10em; }
ul>li:nth-child(25):after,ul>li:nth-child(26):after,ul>li:nth-child(27):after,ul>li:nth-child(28):after{ height: 11.75em; }
ul>li:nth-child(29):after,ul>li:nth-child(30):after,ul>li:nth-child(31):after,ul>li:nth-child(32):after{ height: 13.5em; }
ul>li:nth-child(33):after,ul>li:nth-child(34):after,ul>li:nth-child(35):after,ul>li:nth-child(36):after{ height: 15.25em; }
ul>li:nth-child(37):after,ul>li:nth-child(38):after,ul>li:nth-child(39):after,ul>li:nth-child(40):after{ height: 17em; }
ul>li:nth-child(41):after,ul>li:nth-child(42):after,ul>li:nth-child(43):after,ul>li:nth-child(44):after{ height: 18.75em; }
ul>li:nth-child(45):after,ul>li:nth-child(46):after,ul>li:nth-child(47):after,ul>li:nth-child(48):after{ height: 20.5em; }
ul>li:nth-child(49):after,ul>li:nth-child(50):after,ul>li:nth-child(51):after,ul>li:nth-child(52):after{ height: 22.25em; }
ul>li:nth-child(53):after,ul>li:nth-child(54):after,ul>li:nth-child(55):after,ul>li:nth-child(56):after{ height: 24em; }
ul>li:nth-child(57):after,ul>li:nth-child(58):after,ul>li:nth-child(59):after,ul>li:nth-child(60):after{ height: 25.75em; }
/**/
/*link style*/
ul>li:nth-child(4n+1):after{ border-bottom-left-radius: 100%; border-left-width:.2em; border-bottom-width:.1em; }
ul>li:nth-child(4n+2):after{ border-bottom-right-radius: 100%; border-right-width:.2em; border-bottom-width:.1em; }
ul>li:nth-child(4n+3):after{ border-top-left-radius: 100%; border-left-width:.2em; border-top-width:.1em; }
ul>li:nth-child(4n+4):after{ border-top-right-radius: 100%; border-right-width:.2em; border-top-width:.1em; }
/**/
/*decoration*/
.topic{ border-radius: 1em; box-shadow: 0 0 1em rgba(0,0,0,.5),inset 0 0 2px white; }
ul>li{ box-shadow: inset 0 0 .2em rgba(0,0,0,.5); border-radius: .25em; }
ul>li:nth-child(4n):after{ box-shadow: .1em -.1em .1em rgba(0,0,0,.2) , inset -.1em .1em .1em rgba(0,0,0,.2); }
ul>li:nth-child(4n+1):after{ box-shadow: -.1em .1em .1em rgba(0,0,0,.2) , inset .1em -.1em .1em rgba(0,0,0,.2); }
ul>li:nth-child(4n+2):after{ box-shadow: .1em .1em .1em rgba(0,0,0,.2) , inset -.1em -.1em .1em rgba(0,0,0,.2); }
ul>li:nth-child(4n+3):after{ box-shadow: -.1em -.1em .1em rgba(0,0,0,.2) , inset .1em .1em .1em rgba(0,0,0,.2); }
/**/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment