• As instruções de uso e instalação podem ser lidas na págia DEMO do template.
• Não retire os créditos do rodapé do template.
• É necessário conhecimento básico em HTML e CSS para realizar as alterações.

Clique na imagem abaixo para ver a DEMO:

1453 Downloads realizados

Posts Relacionados:

As instruções de uso e instalação podem ser lidas na págia DEMO do template. Não retire os créditos do rodapé do template. É necessário conhecimento básico em HTML e CSS para realizar as alterações. Clique na imagem abaixo para ver a DEMO: 1453 Downloads realizados

Exemplo:

1. Adicione o código abaixo no seu CSS:

.menu{
 display: inline-block;
 padding:10px;
 text-decoration:none;
 -webkit-border-top-left-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
 -moz-border-radius-topleft: 8px;
 -moz-border-radius-bottomright: 8px;
 border-top-left-radius: 8px;
 border-bottom-right-radius: 8px;
 background: #76c1d9; /*cor do plano de fundo*/
 color: #fff; /*cor da fonte*/
 text-align: center;
 font-family: Verdana;
 font-size: 11px; /*tamanho da fonte*/
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}
.menu:hover{
 background:#ffa3a8; /*cor do plano de fundo ao passar o mouse*/
 -webkit-border-top-right-radius: 8px;
 -webkit-border-bottom-left-radius: 8px;
 -moz-border-radius-topright: 8px;
 -moz-border-radius-bottomleft: 8px;
 border-top-right-radius: 8px;
 border-bottom-left-radius: 8px;
 -webkit-border-top-left-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-topleft: 8px;
 -moz-border-radius-bottomright: 0px;
 border-top-left-radius: 0px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}

3. Onde quer que apareça o menu, acrescente desta forma, mudando os links e nomes:

<a href="www.SEULINKAQUI.com" class="menu">Link</a>
<a href="www.SEULINKAQUI.com" class="menu">Link</a>
<a href="www.SEULINKAQUI.com" class="menu">Link</a>
<a href="www.SEULINKAQUI.com" class="menu">Link</a>
<a href="www.SEULINKAQUI.com" class="menu">Link</a>

Posts Relacionados:

Exemplo: 1. Adicione o código abaixo no seu CSS: 3. Onde quer que apareça o menu, acrescente desta forma, mudando os links e nomes:

Crie transições em suas imagens de modo simples sem utilizar javascript!

Exemplo:

1. No seu CSS, adicione:

/* Tutoriais Cor Seletiva */
#tran-image img{
display:block;
position:absolute;
transition:all 2s linear; -moz-transition:all 2s linear;
-webkit-transition:all 2s linear; -o-transition:all 2s linear;
}
#tran-image img:hover{
transition:all 2s linear; -moz-transition:all 2s linear;
-webkit-transition:all 2s linear; -o-transition:all 2s linear; opacity:0;
}

2. Para que apareça suas imagens, utilize o código abaixo, lembre-se de sempre utilizar imagens do mesmo tamanho.

<div id="tran-image">
<img src="www.LINKDASUAIMAGEM.com">
<img src="www.LINKDASUAIMAGEM-AO-PASSAR-O-MOUSE.com">
</div>

Posts Relacionados:

Crie transições em suas imagens de modo simples sem utilizar javascript! Exemplo: 1. No seu CSS, adicione: 2. Para que apareça suas imagens, utilize o código abaixo, lembre-se de sempre utilizar imagens do mesmo tamanho.