city menu, voir commentaires

dabblet.css

/* city menu, voir commentaires */

html {background: #000;}
nav {height:150px;width:660px;background:url(http://lorempixel.com/800/150/city/5);/* modifier cette image comme il vous plait */
position:relative;/* utile pour la suite */
line-height:180px;/* centrage vertical pour une seule ligne */
text-align:justify;/* voir astuce plus bas pour justifier toutes les lignes d'un conteneur */
padding:0 70px;margin:auto;overflow:hidden;
}

/* maquillage pour le fun, on casse la forme rectangulaire */
nav:before, nav:after {border-radius:150px/50px 20px;content:'';position:absolute;top:0;left:0;right:0;bottom:0;box-shadow: 0 0 10px 60px  black,inset  0 0 8px   black;transform:rotate(0.75deg);z-index:1}nav:after {transform:rotate(-2.75deg);}

/* mise en forme des liens */

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) {transform:rotate(-10deg);}
a:nth-child(2) {transform:rotate(7deg);}
a:nth-child(3) {transform:rotate(-15deg);}
	/* ASTUCE GC: pour augmenter la zone receptive de hover */

a:before {content:'';top:-80px;left:-50px;right:-50px;bottom:-50px;position:absolute;}

/*mise en forme du dernier element:
2 utilités, 
	1)centrage justifier de la premiere ligne pour ne pas avoir a gerer les margin des liens,
	2)injection du masque opaque
 */
/* ASTUCE GC: alignement justifié des liens */
nav i {width:700px;display:inline-block;}

/* INJECTION DU MASUQE OPAQUE,
! preferez la technique des sprites CSS au gradient */
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));
/* un sprite css et son background-position est preferable */
}
/* deplacement(background-position si image sprite) 
ou modification du masque au hover des liens */
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);}

/* */
p {width:800px;margin:auto;color:white;text-align:center;}

dabblet.html

<nav><a href="#">premier </a> <a href="#">second</a> <a href="#">troisieme </a><i></i></nav>
<p>L'image de fond peut-etre modifier, le masque lui peut rester le même </p>

dabblet.js

// alert('Hello world!');

settings.json

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