elastic , rubber menu

dabblet.css

/* elastic , rubber menu */
p#nav {text-align:justify;background:#48a;
box-shadow:
inset 0   0    0     1px #aaa,
    0  40px  1px -38px #6CD000, 
    0 -40px  1px -38px #6CD000, 
-23px     0  1px -20px #6CD000, 
 23px     0  1px -20px #6CD000,
    0  40px  1px -34px #48a, 
    0 -40px  1px -34px #48a, 
-23px     0  1px -16px #48a,
 23px     0  1px -16px #48a, 
  0px     0  1px 8px #159,
  0       0    0 10px #aaa

;border-radius:5px;
margin:3em 1em;padding:1px ;line-height:0;
overflow:hidden;position:relative;}
a {color:white;margin:0 ;padding:0 0.5em;display:inline-block;text-align:center;vertical-align:middle;
background:radial-gradient(rgba(255,255,255,0.1) , rgba(0,0,0,0)  1em);
transform:rotate(0deg);
transition:1s;
min-width:4em;min-height:5em;line-height:5em;
}
img {vertical-align:middle;width:2em;}
#nav i {display:inline-block;width:100%;height:5em;margin:-5em 0 0;padding:0;vertical-align:top;
background:linear-gradient(0deg, #48a ,#159,#48a);}
a:hover ,a:first-child {transform:rotate(3600deg);transition:0.5s;
background:radial-gradient(rgba(255,255,255,0) 0.25em,rgba(0,150,200,1) 1.5em, rgba(255,255,255,0) 1.75em , rgba(255,255,255,0) 2em);}
html{background:#333;font-size:20px;}
@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:40px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}

dabblet.html

<p id="nav">
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/d/dd/Farm-Fresh_house.png" /></a> 
<a href="#"> tagada </a>
<a href="#"> tsouin tsouin </a>
<a href="#"> le marsoin </a>
<a href="#"> dans </a>
<a href="#"> lo lololo loo </a>
<i></i>
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}