seujeca
60 imagens deliciosas de
lindas morenas gostosas (+18)
rockntech
46 Famosos Ou Pessoas...
Parecem Com Personagens...
A vida de uma mulher peituda
A vida de uma mulher peituda
(+18)
Jasmin
Jasmin TV
canal ADULTO nível "6"... (+18)


Vivo Controle

Menu "Super Descolado" Com Puro CSS


bandeiradois
Nesta postagem compartilho com vocês este código CSS bem interessante que forma um menu bem elegante de forma que deixará seu site/blog com um Design muito melhor.













Veja uma demonstração:


Super legal, não é?

Bom! Para colocar em seu blog é simples...

Clique em adicionar "Adicionar um Gadget" do tipo "HTML/JavaScript" e cole o seguinte código

<style>
ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: black; /* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}

ul.svertical li{
text-align: right; /* right align menu links */
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid; 
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */

}
</style>
<ul class="svertical">
<li><a href="#">Início</a></li>
<li><a href="#">Parceria</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Sugestão</a></li>
<li><a href="#">Nossos Banners</a></li>
<li><a href="#">Muito Mais</a></li>
</ul>

Tendo colado o código, faça as modificações. Tendo feito isto, está pronto!!!

Menu "Super Descolado" Com Puro CSS Menu "Super Descolado" Com Puro CSS Reviewed by Muca on 8/15/2014 11:52:00 AM Rating: 5

ou pode... FECHAR [X]
Confira alguns dos melhores links dos melhores sites da WEB!!!