Skip to content

Instantly share code, notes, and snippets.

@gcyrillus
Created May 6, 2013 21:37
Show Gist options
  • Save gcyrillus/5528411 to your computer and use it in GitHub Desktop.
Save gcyrillus/5528411 to your computer and use it in GitHub Desktop.
glossy kitch menu or not
/* glossy kitch menu or not */
nav {text-align:center;margin:3em auto;opacity:0.95}
ul {margin:0;padding:0.5em;text-align:left;}
ul , li {display:inline-block;}
ul {font-size:2em;background:#dE6B26;border-radius:0.5em;
box-shadow:inset 10px 10px 5px #EE9A6D,inset 0 0 30px 20px #BE6B46, 10px 10px 10px #333, 0 0 1px #BE6B46;
position:relative;overflow:hidden;}
ul:before , p:before {content:'';position:absolute;top:0;left:5%;width:95%;height:1em;
background:linear-gradient(180deg,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.1));/* <= turn this into box-shadow for IE9 */
box-shadow: 0 0 5px rgba(255,255,255,0.2);
border-radius: 0 0.25em 400px 300px / 0 0.25em 30px 50px;}
a {text-decoration:none;margin:0 0.25em;color:#ddd;position:relative;/* remain so on top */ }
/* } { */
html{background:
repeating-linear-gradient(90deg,#159 0 ,#159 5px, transparent 5px, transparent 10px),
linear-gradient(180deg, #48b , transparent, gold);
min-height:100%;}
p {display:table;margin:2em auto;font-size:2em;
border-radius:0.25em;
box-shadow:0 0 10px 5px,inset 10px 5px 15px 10px purple, inset 0px 0px 50px 20px gold;
border:solid;
padding:0.25em;
background-color:white;
position:relative;
transform:scale(1.5) rotate(10deg);transform-origin:top}
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<p>aucune image malmenée par decoupage</p>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment