Pra quem não sabe, o menu folhinha é aquele com duas bordas e duas pontas, realmente parecendo uma folhinha.

Visualize em live Preview -> aqui.

OBS: Vou ensinar o menu todo, e não só a borda!

Coloque esse código no seu css:

folhaad {font-family: NOMEDAFONTE; width: TAMANHODOLINKpx; float: left; background:#CORDOFUNDO; padding: 5px; text-align: center; -moz-border-radius: 05px; -webkit-border-radius: 05px; font-size: TAMANHODALETRApt; color: #CORDALETRA; margin:3px; -webkit-border-radius: 15px 0px 15px 0px;-moz-transition: all 2.0s ease-in-out!important; -o-transition: all 1.0s ease-in-out!important; transition: all 2.0s ease-in-out!important; -webkit-transition: all 1.0s ease-in-out!important;}

folhaad:hover {font-family: NOMEDAFONTE; width: TAMANHODOLINKpx; float: left; background:#CORDOFUNDO; padding: 5px; text-align: center; margin:3px; -moz-border-radius: 03px; -webkit-border-radius: 03px; font-size:TAMANHODALETRApt; color: #CORDALETRA; -webkit-border-radius: 0px 15px 0px 15px;}

Agora é só mudar o pedido. Por exemplo, no meu preview eu só mudei a cor do fundo, o resto deixei igual, mas vai do seu gosto a mudança.

Agora, coloque isso onde você quer que apareça o menu:

Em link:

<a href=”/” title=”titulo”><folhaad>nome</folhaad></a>

Em I Frame:

<span onClick=”changeNavigation(‘ID’)”> <folhaad>Nome</folhaad> </span>

Em Pop-up:

<a href=”#?w=500” rel=”nome do pop up” class=”poplight”> <folhaad>nome</folhaad></a>

É só isso! Espero que tenha ajudado!
Recoloque todas as aspas!
Se lhe foi útil, por favor, coloque os devidos créditos.

Oi gente, bem eu achei um site bem legal que ele meio que auxilia a fazer bordas e uns efeitos bem legai. Então resolvi ensinar um efeito bem legal e nós já ate usamos e espero que gostem. Visualize o modelo aqui.

1) Coloque o seguinte código no seu css:

/*** Borda by Brida Braga ***/
.bordacolour {witdh: padding : 1px;border-right:4px solid #COR DA BORDA 1;border-bottom:4px solid # COR DA BORDA 2 ;border-left:4px solid # COR DA BORDA 3;border-top:4px solid # COR DA BORDA 4;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;border-radius:2px;-o-transition: all 1s ease;transition: all 1s ease; }

.bordacolour:hover {-webkit-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(1.383) skew(0deg) translate(0px);}

OBS: Reparem que tem como deixar cada lado de uma cor, bem você pode escolher cada um de uma cor ou igual ao modelo do exemplo, use sua imaginação!

2) Agora você colocar o seguinte no link da sua imagem:

<a href="link" target="_blank"><img src="http://25.media.tumblr.com/tumblr_m5sa0lgaTx1rxgicco1_250.png" class="bordacolour" width="LARGURA" height="ALTURA"></a> 

Bem é isso, se usar credite e de like. Por: Brida