Recursos CSS | Todo en codigos! | 3

Bienvenidos a mi post! Hoy les voy a traer
Recursos CSS en codigos
Voy a ir posteando de a 3 recursos (Siganme para los futuros ) porque son muy largos los codigos.




#1 Boton con Hover Elegante





Codigo HTML


<div class="button gray"><div class="shine"></div>Button</div>
<div class="button blue"><div class="shine"></div>Button</div>
<div class="button green"><div class="shine"></div>Button</div>
<div class="button red"><div class="shine"></div>Button</div>
<div class="button purple"><div class="shine"></div>Button</div>
<div class="button orange"><div class="shine"></div>Button</div>


Codigo CSS


[size=9]body {
    font-family: 'museoslab500';
    text-transform: uppercase;
    background: #333;
    font-size: 75%;
    text-align: center;
    -webkit-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.button {
    min-height: 1.5em;
    display: inline-block;
    padding: 12px 36px;
    margin: 40px 5px 5px 0px;
    cursor: pointer;
    opacity: 0.9;
    
    color: #FFF;
    font-size: 1em;
    letter-spacing: 1px;
    text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;
    
    background: #434343;
    border: 1px solid #242424;
   
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    -webkit-transition: all 0.1s linear;
     -khtml-transition: all 0.1s linear;
       -moz-transition: all 0.1s linear;
         -o-transition: all 0.1s linear;
            transition: all 0.1s linear;
}
.button:hover {
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}
.button:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}
.shine {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    padding: 0px 12px;
    top: -12px;
    left: -24px;
    height: 1px;
    -webkit-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
     -khtml-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
       -moz-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
         -o-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
            box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
    -webkit-transition: all 0.3s ease-in-out;
     -khtml-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.button:hover .shine {left: 24px;}
.button:active .shine {opacity: 0;}

.button.gray {background: #555;}
.button.blue {background: #3a617e;}
.button.green {background: #477343;}
.button.red {background: #723131;}
.button.purple {background: #4b3f5e;}
.button.orange {background: #624529;}[/size]





#2 Boton de download animado




Codigo HTML

<div class="button"><div class="outer"><div class="height"><div class="inner">DOWNLOAD</div></div></div></div>

Codigo CSS


body {
    font-family: Impact;
}
.button {
    height: 80px;
    width: 180px;
    cursor: pointer;
    margin: 50px auto;
}
.button .outer {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: rgba(0,0,0,0.65);
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
    -webkit-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
    -moz-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
    -webkit-transform: perspective(500px) rotateX(35deg);
    -moz-transform: perspective(500px) rotateX(35deg);
}
.button .outer .height {
    position: relative;
    height: 100%;
    margin-top: -15px;
    padding-bottom: 15px;
    background: #39a02d;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
    -webkit-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
    -moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
}       
.button:hover .outer .height {
    margin-top: -10px;
    padding-bottom: 10px;
    background: #3aaf2d;
    box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
    -webkit-box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
    -moz-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
}
.button:active .outer .height {
    margin-top: 0px;
    padding-bottom: 0px;
}
.button .outer .height .inner {
    line-height: 2.8em;
    font-size: 30px;
    letter-spacing: .05em;
    position: relative;
    height: 100%;
    text-align: center;
    text-shadow: #8aff7b 0px 0px 1px;
    background: #44d135;
    background: -moz-linear-gradient(top, #80ec75 0%, #43d034 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80ec75), color-stop(100%,#43d034)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #80ec75 0%,#43d034 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #80ec75 0%,#43d034 100%); /* W3C */
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
    -webkit-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
    -moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
}
.button:hover .outer .height .inner{
    text-shadow: #99f48d 0px 0px 1px;
    background: #43d034; /* Old browsers */
    background: -moz-linear-gradient(top, #43d034 0%, #67e45c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43d034), color-stop(100%,#67e45c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #43d034 0%,#67e45c 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #43d034 0%,#67e45c 100%); /* W3C */
}
.button:active .outer .height .inner{
    text-shadow: #319926 0px 1px 0px;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
    -webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
    -moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
    background: #1d7d12; /* Old browsers */
    background: -moz-linear-gradient(top, #1d7d12 0%, #4fd342 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d7d12), color-stop(100%,#4fd342)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* W3C */





#3 Menu 3D Animado




Codigo HTML


<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Mobile Carts</a></li>
                <li><a href="#">Cart Storage</a></li>
                <li><a href="#">Wall Stations</a></li>
                <li><a href="#">Power Systems</a></li>
                <li><a href="#">Charging Stations</a></li>
            </ul>
        </li>
        <li><a href="#">Company</a>
            <ul>
                <li><a href="#">News</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Jobs</a></li>
            </ul>
        </li>
        <li><a href="">Partners</a>
            <ul>
                <li><a href="#">CDW</a></li>
                <li><a href="#">Dell</a></li>
                <li><a href="#">Insight</a></li>
                <li><a href="#">PC Connection</a></li>
                <li><a href="#">PDS</a></li>
                <li><a href="#">Synnex</a></li>
                <li><a href="#">Liquid PC</a></li>
                <li><a href="#">More Direct</a></li>
                <li><a href="#">SHI</a></li>
            </ul>
        </li>
        <li><a href="#">Support</a>
            <ul>
                <li><a href="#">Warranty</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>


Codigo CSS


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
}

/**** ELEMENTS ****/

#navigation {
    width: 700px;
    height: 40px;
    margin: 50px auto;
    
    border: #a5a5a5 solid 1px;
    background: #efefef;
    background: -webkit-linear-gradient(top, #efefef 0%,#dedede 50%,#d8d8d8 50%,#d3d3d3 70%,#dcdcdc 100%);
    -webkit-border-radius: 20px;
     -khtml-border-radius: 20px;
       -moz-border-radius: 20px;
         -o-border-radius: 20px;
            border-radius: 20px;
    -webkit-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
     -khtml-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
       -moz-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
         -o-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
            box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
}
#navigation ul {
    width: 700px;
    height: 40px;
}
#navigation ul li {
    float: left;
    width: 100px;
    height: 40px;
    position: relative;
}
#navigation ul li a {
    display: block;
    width: 99px;
    height: 12px;
    padding: 14px 0px;
    
    border-left: rgba(0,0,0,0.2) 1px solid;
    -webkit-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
     -khtml-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
       -moz-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
         -o-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
            box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
    
    text-align: center;
    font-size: 12px;
    line-height: 12px;
    text-decoration: none;
    color: #333;
    text-shadow: #FFF 0px 1px 1px;
}
#navigation ul li ul {
    margin-top: 40px;
    top: 35px;
    width: 201px;
    height: auto;
    padding: 20px 0px;
    position: absolute;
    left: -9999px;
    opacity: 0;
    
    -webkit-transition: all .2s ease;
    
    background: rgba(0,0,0,0.5);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.6) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.6)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%);
    background: linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%);
    -webkit-border-radius: 0px 0px 20px 20px;
     -khtml-border-radius: 0px 0px 20px 20px;
       -moz-border-radius: 0px 0px 20px 20px;
         -o-border-radius: 0px 0px 20px 20px;
            border-radius: 0px 0px 20px 20px;
    -webkit-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
     -khtml-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
       -moz-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
         -o-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
            box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
}

#navigation ul li:hover ul {

    -webkit-animation: anim .2s forwards linear;
    -moz-animation: anim .2s forwards linear;
    -ms-animation: anim .2s forwards linear;
    -o-animation: anim .2s forwards linear;
    animation: anim .2s forwards linear;
}

#navigation ul li ul li {
    float: none;
    height: auto;
    width: 201px;
    height: 20px;
}

#navigation ul li ul li a {
    width: 161px;
    height: 12px;
    padding: 4px 20px;
    
    border-left: 0px;
    background: transparent;
    -webkit-box-shadow: none;
     -khtml-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
    
    text-align: left;
    color: #fff;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 1px;
}


/**** PSUEDO ELEMENTS ****/

#navigation ul li:nth-child(1) a {
    border-left: 0px;
    width: 100px;
    -webkit-border-radius: 20px 0px 0px 20px;
     -khtml-border-radius: 20px 0px 0px 20px;
       -moz-border-radius: 20px 0px 0px 20px;
         -o-border-radius: 20px 0px 0px 20px;
            border-radius: 20px 0px 0px 20px;
}
#navigation ul li:nth-child(7) a {
    -webkit-border-radius: 0px 20px 20px 0px;
     -khtml-border-radius: 0px 20px 20px 0px;
       -moz-border-radius: 0px 20px 20px 0px;
         -o-border-radius: 0px 20px 20px 0px;
            border-radius: 0px 20px 20px 0px;
}
#navigation ul li ul li:nth-child(1) a {
    width: 161px;
    -webkit-border-radius: 0px;
     -khtml-border-radius: 0px;
       -moz-border-radius: 0px;
         -o-border-radius: 0px;
            border-radius: 0px;
}
#navigation ul li ul li:nth-child(7) a {
    -webkit-border-radius: 0px 20px 20px 0px;
     -khtml-border-radius: 0px 20px 20px 0px;
       -moz-border-radius: 0px 20px 20px 0px;
         -o-border-radius: 0px 20px 20px 0px;
            border-radius: 0px 20px 20px 0px;
}
#navigation ul li:nth-child(7):hover {
    
}

/**** HOVER STATES ****/

#navigation ul li:hover {
    
}
#navigation ul li:hover a {
    background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(196,196,196,1) 50%,rgba(186,186,186,1) 50%,rgba(189,189,189,1) 100%);
    -webkit-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
     -khtml-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
       -moz-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
         -o-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
            box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
}
#navigation ul li ul li:hover {
    
}
#navigation ul li ul li:hover a {
    text-decoration: underline;
}
#navigation ul li:hover ul {
    display:;
}
#navigation ul li:hover ul li a {
    background: transparent;
    -webkit-box-shadow: none;
     -khtml-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 1px;
}

/**** ACTIVE STATES ****/

#navigation ul li:active {
    
}
#navigation ul li:active a {
    background: rgb(92,92,92);
    background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(117,117,117,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(117,117,117,1)));
    background: -webkit-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%);
    background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%);
    background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%);
    -webkit-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
     -khtml-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
       -moz-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
         -o-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
            box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
    color: #fff;
    text-shadow: rgba(0,0,0,0.6) 0px 1px 2px;
}
#navigation ul li ul li:active {
    
}
#navigation ul li ul li:active a { 
    
}


@-webkit-keyframes anim {
    0% { left:0; opacity: 0}
    100% {left: 0; top: 0; opacity: 1}
}

@-moz-keyframes anim {
    0% { left:0; opacity: 0}
    100% {left: 0; top: 0; opacity: 1}
}

@-ms-keyframes anim {
    0% { left:0; opacity: 0}
    100% {left: 0; top: 0; opacity: 1}
}

@-o-keyframes anim {
    0% { left:0; opacity: 0}
    100% {left: 0; top: 0; opacity: 1}
}

@keyframes anim {
    0% { left:0; opacity: 0}
    100% {left: 0; top: 0; opacity: 1}





Eso fue todo por hoy (Creditos cssdeck.com) Proximamente otros 3 recursos