4 de mar. de 2013

3 Pedidos: Menu Fade Imagem + Pngs e Fontes + Ilustrações

Hey, angels :) What's up?

Recebi três pedidos recentemente:




Odeio deixar vocês esperando, então resolvi atender tudo em um só pedido. Dessa vez não está separado por Pedido Número Tal, e sim pelo que me foi pedido. Então usem Ctrl+F, se interessar. Vamos lá?

PNGs - Marina And The Diamonds
Foram os únicos de boa qualidade que achei.
Fonte: [www]




 


Fontes 

[www]

[www]

[www]

[www]

[www]

[www]

[www]

[www]

[www]

Ilustrações - Garotas de Cabelos/Mechas Coloridas + Borda Laranja
O laranja é igual ao do blog, me certifiquei disso.
















Menu Fade Imagem

Preview:
(Print do Pedido)

Como fazer:

Vá em Modelo > Editar HTML. Usando Ctrl + F, busque pela tag  ]]></b:skin> . Quando encontrar, cole o seguinte código antes:
#aparece:hover #menu{
opacity:1;
}
#menu{
opacity: 0;
position:absolute;
-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;
margin-top:-70px;
}
#menu a{
display: block;
padding-right:5px;
margin-left:15px;
padding:2px;
width:80px;text-align:right;font-family:'04b03';font-size:8px;text-transform: uppercase;color:#ff699e;background: white; border-right:5px #D02090 solid; margin-bottom:1px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-ms-transition:all .3s linear;}
#menu a:hover{border-right:0px #CCC solid;padding-right:6px;}
@font-face {font-family: '04b03';url(http://static.tumblr.com/rozpbz7/j0dm2jpkp/04b_03__.ttf) format('woff');}
Sobre o código: presumo que não precise ser alterado, mas atenção...
Não precisa mudar nada no código, mas se quiser que o menu fique na imagem sem que passe o mouse troque "opacity: 0;" por "opacity: 1;". A cor da letra está representada pelo código #ff699e. A cor do fundo por white. A cor da borda por #fdd95b. 
Para que o menu apareça, cole o código abaixo em um gadget:
<div id="aparece">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/526361_452231948156550_1505989352_n.jpg" />
<div id="menu">
<a href="SEU LINK">home</a>
<a href="SEU LINK">about</a>
<a href="SEU LINK">goodies</a>
<a href="SEU LINK">credits</a>
</div></div>
Altere as partes em negrito e pronto! Aprendi com o blog I am a Girl., mas presumo que o tutorial inicial venha do Kawaii World.

Bom, é isso. 
Espero que tenham gostado.
Beijos,

Mrs. Nightshade.

11 comentários:

  1. Adorei as imagens, todas muito lindas. Já salvei todas, em breve farei um post sobre mechas e eu precisava das imagens. Obrigada.

    Beijos
    blog-sonhosedevaneios.blogspot.com

    ResponderExcluir
    Respostas
    1. Fico muito feliz que tenha gostado :D Entendo ^.^ De nada <3

      Beijos!

      Excluir
  2. Quanta coisa!! OwO'

    Ehehehe' De qualquer forma te agradeço pelo tutorial, agora sim vou poder usá-lo \o/ e acho que irei 'raptar' algumas ilustrações de cabelos coloridos, pois enquanto eu não tenho um.. xDD

    Beijos! ;33

    ResponderExcluir
    Respostas
    1. Até que sim o.O kkk
      De nada, flor. Peça sempre que quiser :D Fico feliz em te ajudar :D O meu já não está tão colorido T_T kkk

      Beijos!

      Excluir
  3. Gostei muito do post,
    e gostei muito das meninas de cabelos coloridos!
    ^^
    muito bom,
    bjs!

    relicariodasrafleur.blogspot.com.br

    ResponderExcluir
  4. Adoreei mesmo as imagens u.u
    Posso fazer um pedido ?
    Eu to procurando uma imagem tipo essas aí que fiquem em um bom tamanho na sidebar,para colocar tipo ali no seu blog, onde tem o gadget : The End. *-*
    BEEEIJOS
    http://diary-crazy-official.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou >.< Entendo... Qual o tema e largura da sua sidebar? ^.^

      Beijos!

      Excluir
  5. Que tantão (pareço um bebê falando isso ç.ç) !!! OMG OMG OMG!
    Excelentes!
    Gostei demais e todas!
    Beijinhos!

    ResponderExcluir
    Respostas
    1. Asdfgasdfg Fofa >.< kkkk
      Que bom que achou >.< Fico muito feliz que tenha gostado :D

      Beijos!

      Excluir
  6. baixei a fonte Call me Maybe (linda, nér? pena que não tem acento) x3
    http://risosshi.blogspot.com.br/

    ResponderExcluir