city menu

dabblet.css

/* city menu */

html {background: #000;}
nav {height:150px;width:660px;
background:url(http://lorempixel.com/800/150/city/5);
position:relative;
line-height:180px;
text-align:justify;
padding:0 70px;
margin:auto;
overflow:hidden;
}
nav:before, nav:after {content:'';position:absolute;top:0;left:0;right:0;bottom:0;
box-shadow: 0 0 45px 40px  black,inset  0 0 2px 1px  black;transform:rotate(0.75deg);z-index:1}
nav:after {transform:rotate(-2.75deg);}
nav i {width:700px;display:inline-block;}
nav i:before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;
background:linear-gradient(0deg, transparent 0 ,rgba(0,0,0,0.3) 0 , rgba(0,0,0,0.3));
}
a {position:relative;z-index:2;line-height:1.2em;display:inline-block;padding:0 0.5em;border-radius:3px 15px;border:solid turquoise 2px;
background:ivory;box-shadow:2px 2px 5px #333;text-shadow:0 0 0;text-decoration:none;
font-size:1.5em;}
a:hover {background:rgba(0,100,250,0.5);color:transparent;text-shadow:0 0 0 black, 0 0 3px white;}
a:nth-child(1):hover ~ i:before  {
background:linear-gradient(75deg, transparent 250px ,rgba(0,0,0,0.3) 250px , rgba(0,0,0,0.3));}
a:nth-child(2):hover ~ i:before  {
background:linear-gradient(75deg, rgba(0,0,0,0.3) 250px ,transparent 250px), 
linear-gradient(105deg,transparent 0px, transparent 550px, rgba(0,0,0,0.3) 550px);
}
a:nth-child(3):hover ~ i:before  {
background:linear-gradient(105deg,rgba(0,0,0,0.3) 0px, rgba(0,0,0,0.3) 550px, transparent 550px);
}
a:nth-child(1) {transform:rotate(-10deg);}
a:nth-child(2) {transform:rotate(7deg);}
a:nth-child(3) {transform:rotate(-15deg);}
/* pour augmenter la zone receptive de hover */
a:before {content:'';top:-80px;left:-50px;right:-50px;bottom:-50px;position:absolute;;

dabblet.html

<nav><a href="#">premier </a> <a href="#">second</a> <a href="#">troisieme </a><i></i></nav>

dabblet.js

// alert('Hello world!');

settings.json

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