Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

Menu hover na imagem








Boa noite galerinha do bem, como vão? ( ̄ ̄)ノ Cadê vocês povo? Sumiram tudo? Já estão em semana de prova? Não né? (Espero que não) O que tá conteseno com o mundo kpop? Não para mais de ter comeback, debuts, sub units e por ai vai, cara melhor vocês pisarem no freio porque a tia aqui não tá conseguindo acompanhar viu? Vão tomá no fiofó de vocês, é muito coisa boa acontecendo e eu perdendo por falta da droga de tempo. Cadê os pedidos da Ask povo? Ninguém pede mais nada, to só de zoio hein?

Esse menu que estou postando hoje foi feito na mera cagada, eu queria muito um menu hover mas todos os que eu procurava não me agradavam, cara eu fiquei praticamente uma tarde inteira tentando e editando, até que saiu esse resultado que vocês irão ver logo abaixo. E quem está de prova é a dona do blog lollipop candy a Martina, eu ia editando e mostrando a ela. O menu é o mesmo que eu estou usando no blog de avatares, ele ficou bem simples mas bem fofo e do jeitinho que eu queria, espero vocês curtam.



Vá até o seu modelo e clique em editar html, dentro procure ]]skin; e acima dele cole o código abaixo:

.imagemm{
width: 102px;
height: 130px;
background:#fff;
border-top: solid 5px #fff;
border-right: solid 5px #fff;
border-left: solid 5px #fff;
border-bottom: solid 5px #fff;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
opacity:0.7;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
}
.imagemm:hover{
border-top: solid 5px #fff;
border-right: solid 5px #fff;
border-left: solid 5px #fff;
border-bottom: solid 5px #fff;
text-shadow: 1px 1px 1px #ad908b;
-moz-opacity: 0.5;
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease; -o-transition: all 5s ease;
transition: all 5s ease;
}
.menuzinho a {
background:#fff;
opacity:0.1;
padding:1px;
width:100px;
height:24px;
line-height:24px;
margin:0px;
display:block;
text-align:center;
text-transform:uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-size:11.5px;
color: #fff;
text-shadow: 1px 1px 1px #C0C7CA;
-webkit-transition-duration: .90s;
}
.menuzinho a:hover {
background:#d8dcde;
opacity:1;
padding:1px;
width:100px;
height:24px;
line-height:24px;
margin:0px;
display:block;
text-align:center;
text-transform:uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-size:11.5px;
color: #fff;
text-shadow: 1px 1px 1px #C0C7CA;
-webkit-transition-duration: .90s;
}
Lembrando que ele está editado exatamente como está no link do preview, e óbvio que se vocês quiserem modificá-lo fiquem a vontade pois todo o código é editável, só não recomendo que quem não tem muita noção de html mexa nas opacidades pois é isto que faz o menu ficar invisível certo?

CÓDIGOS PARA OS LINKS:

<div style="position: fixed; margin-top: -7px; margin-left: 650px;z-index:200;">
<center>
<div class="imagemm">
<img src="http://i.imgur.com/riUhNMw.jpg"/>
</div></center></div>
<div style="position: fixed; margin-top: 3px; margin-left: 660px;z-index:300;">
<div class="menuzinho">
<a href="/"target="_blank" title="nome">nome</a>
<a href="/"target="_blank" title="nome">nome</a>
<a href="/"target="_blank" title="nome">nome</a>
<a href="/"target="_blank" title="nome">nome</a>
<a href="/"target="_blank" title="nome">nome</a>
</div>
</div>

3 comentários:

  1. Lo ameeeeee, gracias por compartir. Me encanta tu blog uwu ♥

    ResponderExcluir
  2. Olá Roh <33
    Minha semana de provas já passou. Eu não tenho ask por isso não faço pedidos. Adorei esse menu, com certeza irei usá-lo alguma hora. Parabéns pela ideia continue com os bons tutos.

    ┈━═☆Até
    O Snack Cheese é a queijolândia~✧ | Temos tintas e penteados! ✄ Venham, o Snack Cheese virou salão ♥ ฅ(^T^)

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)