Skip to content

Instantly share code, notes, and snippets.

@spbooks
Created October 4, 2012 00:24
Show Gist options
  • Save spbooks/3830762 to your computer and use it in GitHub Desktop.
Save spbooks/3830762 to your computer and use it in GitHub Desktop.
HTML Structural diagram generator beta 0.1
/**
* HTML Structural diagram generator beta 0.1
*/
a {
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100px;
height:100px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
background-repeat:no-repeat;
background-origin:border-box;
background-position:50% 50%;
border-width:50px;
border-color:rgba(0,0,0,0);
-webkit-transition:0.2s ease;
-moz-transition:0.2s ease;
-ms-transition:0.2s ease;
-o-transition:0.2s ease;
transition:0.2s ease;
}
a:hover {
border-width:0;
border-color:rgba(0,0,0,0.5);
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-ms-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}
a.one {border-style:solid;}
a.two {border-style:dashed;}
a.san {border-style:dotted;}
a.yon {border:50px solid rgba(0,0,0,0.7);}
a.goo {border:50px dashed rgba(0,0,0,0.7);}
a.rok {border:50px dotted rgba(0,0,0,0.7);}
a.ryk {border:50px double rgba(0,0,0,0.7);}
a.yon:hover {border: 1px solid rgba(0,0,0,0.7);}
a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);}
a.ryk:hover {border: 1px double rgba(0,0,0,0.7);}
a.x7,
a.x8,
a.x9 {
-webkit-border-radius:0;
border-radius:0;
}
a.x7 {border:50px solid rgba(0,0,0,0.7);}
a.x8 {border:50px dashed rgba(0,0,0,0.7);}
a.x9 {border:50px dotted rgba(0,0,0,0.7);}
a.x7:hover {border: 1px solid rgba(0,0,0,0.7);}
a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);}
<a class="one" href="#">text</a>
<a class="two" href="#">asdf</a>
<a class="san" href="#">sdfg</a>
<br>
<a class="yon" href="#">qwer</a>
<a class="goo" href="#">zxcv</a>
<a class="rok" href="#">jkl;</a>
<a class="ryk" href="#">uiop</a>
<br>
<a class="x7" href="#">m,./</a>
<a class="x8" href="#">nm,.</a>
<a class="x9" href="#">hjkl</a>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment