19 outubro, 2016

Tutorial Menu com Imagens Efeito Hover

  • 1 - Primeiro você precisa de uma imagem para cada categoria, você pode criar ou fazer download dos modelinhos que eu disponibilizo no fim desse post. Se você preferir criar, lembre-se de salvar como PNG para manter o fundo transparente. Normalmente nas imagens das categorias nós usamos ícones, que são imagens com desenhos que representam nossas categorias. Resolvi fazer uma mistureba personalizada de algumas coisinhas legais que encontrei enquanto pesquisava ícones na internet. Mas são só exemplos simples, ok? Usei como apoio algumas fontes e imagens e fiz as imagens para menu abaixo:
display, media, play, smart tv, television, tv, video iconforest, nature, plant, tree icongps, location, map, maps, navigation, pin, pointer iconbuy, cash, dollar, finance, money, pouch, wallet iconbold, colour, highlight, highlighter, mark, marker, pointer iconecuator, moon, orbit, satellite, sputnik iconcopy, documents, duplicate, files iconclothes, clothing, fashion, shirt, t-shirt, tshirt, wear iconcamera, movie, shoot, shooting, shooting camera, video, video camera iconastronomy, binocular, glass, sky, stargazing, stars, telescope icon

São apenas exemplos, vocês podem baixar a vontade nesse site.

  • 2 - Clique na imagem com o botão direito e selecione "Copiar URL da imagem". Esse URL que será copiado é o endereço da imagem que você vai usar no próximo passo.
  • 3 - O Código é esse (Copie e cole em um gadget HTML/JavaScript):


<div class='widget-content'>
<div class="cate"><img src="URL DA IMAGEM AQUI"/><a href="http://ENDEREÇO DO SEU BLOG AQUI/search/label/NOME DA CATEGORIA">NOME DA CATEGORIA</a></div>
<div class="cate"><img src="URL DA IMAGEM AQUI"/><a href="http://ENDEREÇO DO SEU BLOG AQUI/search/label/NOME DA CATEGORIA">NOME DA CATEGORIA</a></div>
<div class="cate"><img src="URL DA IMAGEM AQUI"/><a href="http://ENDEREÇO DO SEU BLOG AQUI/search/label/NOME DA CATEGORIA">NOME DA CATEGORIA</a></div>
</div>
<div class='clear'></div>
  • 4 - Para entender os códigos: Se você quiser mais categorias é muito fácil, basta copiar desde <div class="cate">... até ...</a></div> e repetir quantas vezes quiser ok?
Em VERMELHO você cola o link (URL) da imagem que pegou no site citado acima!
Onde está VERDE você pode colocar o nome da categoria, Ex: Moda, Beleza, Viagens, etc.
E onde está AZUL pode colocar o mesmo nome da categoria. 
No espaço em ROXO coloque o link do seu blog. Pronto!  

  • 5 - Agora o CSS, vá em modelo, editar código, pesquise por: /b:skin e ACIMA dele cole:

.cate a{
display: block;
color: #FFD0D3!important;
font-size: 20px!important;
font-family: 'Droid Serif',serif!important;
text-indent: 50px!important;
background: #f44092;
border-right: 6px solid #FFD0D3;
border-radius: 2px;
-moz-box-shadow: inset 50px 0px 0px 0px #FFD0D3;
-webkit-box-shadow: inset 50px 0px 0px 0px #FFD0D3;
-o-box-shadow: inset 50px 0px 0px 0px #FFD0D3;
-ms-box-shadow: inset 50px 0px 0px 0px #FFD0D3;
box-shadow: inset 50px 0px 0px 0px #FFD0D3;
margin: 1px 0 4px;
padding: 6px 3px 6px 8px;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.7s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cate a:hover {
color: #000!important;
background:#f44092;
border-radius:2px;
-moz-box-shadow: inset 550px 0px 0px 0px #FFD0D3;
-webkit-box-shadow: inset 550px 0px 0px 0px #FFD0D3;
-o-box-shadow: inset 550px 0px 0px 0px #FFD0D3;
-ms-box-shadow: inset 550px 0px 0px 0px #ffd0d3;
box-shadow: inset 550px 0px 0px 0px #ffd0d3;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.9s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.9s ease-out;
}
.cate img{
width: 38px;
margin: 0 5px -37px;
padding: 0;
display: block;
vertical-align: middle;
}
  • 6 - Final, é isso, espero que gostem, até <3



Nenhum comentário

Postar um comentário

Moda e Poesias - Design Adorável Design | Design by Szablony