Como todos sabem, e usam, eu disponibilizo um menu simples para vocês editarem. E ele tem bordas arredondadas, hoje vou ensinar vocês a deixar apenas algumas 'pontas' do menu arredondadas. Primeiramente você irá entrar neste site, que é super-hiper-mega útil. Nele é possível você arredondar o box model (caixa de modelo) para que pegue o código e utilize depois. Primeiramente, você põe um número qualquer para por as bordas (no caso, eu coloquei 15), assim que você digita 15 em um dos quadradinhos em um dos cantos em todo o resto também fica com este valor. Mais você consegue alterá-los e por um numero diferente em cada um. Clique no link abaixo para ler o resto do tutorial.
 |
| Clique para ampliar as imagens. |
Seguindo os passos dos prints, vocês agora deverão abusar da criatividade e aproveitar dos números (estou tola hoje kkk), assim que terminar copie todo o código que estará na caixa central. Certamente, você estará com o código das bordas no seu CTRL+V. Guarde ele no bloco de notas. Agora, iremos copiar o código do menu, copie e cole o código ACIMA da tag ]]>
/*** MENU SIMPLES extras-placefame.tk ***/.menusimples {
background-color:#f8f8f8; /*** cor do fundo ***/
float:left;
text-shadow: 1px 1px 0 #E4E4E4; /*** cor da sombra da letra ***/
color:#707070; /*** cor da fonte ***/
font-variant:small-caps;
width:150px; /*** largura da aba ***/
font-size: 10pt; /*** tamanho da fonte ***/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menusimples:hover {
background-color:#FF99CC; /*** cor do fundo ***/
float:left;
color: #fff; /*** cor da fonte ***/
text-shadow: 1px 1px 0 #acacac; /*** cor da sombra da letra ***/
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
As partes destacadas de azul, são as bordas arredondadas que já vem no menu. Agora vá até o bloco de notas, e copie novamente o código. Substitua as partes azuis pelo que está no seuCTRL+V, e salve. Agora instale (Design > Elementos de página > Adicionar um gadget > HTML/Javascript) e copie e cole o código abaixo:
Salve! Enfim, você também pode usar para por em qualquer outra situação.
creditos : extras
Nenhum comentário:
Postar um comentário
Comente ...
Se não um Panda vai roubar seu Cupcake a noite !