css3xy
by polinux
HTML
<div class="menu">
<ul class="sexym">
<li class="part"><a class="open" href="#accueil">About</a>
<div id="accueil" class="cont" >
<h3>Welcome</h3>
<p class="fnd">On CS<b style="color:#502a74;">S3XY</b><br />I Back Soon</p>
</div>
</li>
<li class="part"><a class="open" href="#portfolio">Portfolio</a>
<div id="portfolio" class="cont" >
<h3>View</h3>
<p class="fnd">My CSS3XY Demo<br />Under construction</p>
</div>
</li>
<li class="part"><a class="open" href="#contact">Contact</a>
<div id="contact" class="cont">
<h3>Contact</h3>
<p class="fnd"></p>
</div>
</li>
</ul>
</div>CSS
*{
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
outline:0!important;
margin: 0;
padding: 0;
}
::selection,::-moz-selection{background:#502a74;color:#000;}
a,
a:active,
a:visited{
color: #502a74;
text-decoration: none;
}
a:hover{text-decoration:underline;}
html{background-image: #939EA5;}
body{
font-size:0.9em;
font-family: 'Candal', serif;
font-weight: 400;
background:#939EA5;
height: auto !important;
width: 100;
background-repeat: no-repeat;
/* CSS3 */
background-image:linear-gradient(top, #373D40,
#939EA5);
background-image:-moz-linear-gradient(top, #373D40,
#939EA5);
background-image:-webkit-gradient(linear,left top,left bottom, from(#373D40),
to(#939EA5));
background-size: cover;
}
/* Menu */
.menu{
position:relative;
width:505px;
height:245px;
margin:80px auto 60px auto;
padding-top:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#272c31;
/* CSS3 */
background:linear-gradient(top, #343A41,
#1A1E22);
background:-moz-linear-gradient(top,#343A41,
#1A1E22);
background:-webkit-gradient(linear,left top,left bottom,from(#343A41),
to(#1A1E22));
-webkit-box-shadow:0px...