In Tutoriais

Modelo para Perfil (2)

Olá! Trouxe outro modelinho para perfil (o primeiro é esse ->clica<-). Esse de hoje é mais simples, tem menu bem fofinho, com efeito, e texto dentro da imagem que no caso seria sua foto; para usar, adicione no primeiro gadget HTML/JavaScript no seu layout, ou onde preferir, o código abaixo...

<style>
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
.imgmenu{ /**parte em que os textos aparecem quando o mouse passar**/
background:rgba(255, 255, 255, 0.99);
color: #FD6D8C;
text-shadow: 1px 1px #fff;  
text-align: center;  
font-size: 28px;
line-height: 1em;
font-family:'Lobster Two', cursive;  
font-weight: bold;
width:460px; 
height:300px;
margin-top: -348px; 
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1; 
-webkit-transition:all .5s ease-in-out; }
.imgmenu:hover{opacity:.7}
.img-menu {/**personaliza a imagem**/  
-webkit-transition-duration:2.5s;
border-top: 5px solid #fcc;
border-left: 2px solid #fcc;
border-bottom: 5px solid #fcc;  
border-right: 2px solid #fcc;  
}
.img-menu:hover{/**imagem em hover**/
opacity:0.8;
-webkit-transition-duration:2.5s;
} 
a.themenu{
font-family:'Lobster Two', cursive;
background: #EBDAFE;  
color: pink;
text-shadow: 0 1px 1px #fff;  
font-size:20px;
padding:5px;
text-align:center;  
text-decoration:none;
width:100px;
display:inline-block;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
-moz-box-shadow:inset 200px 0px 0px #fcc;
-webkit-box-shadow:inset 200px 0px 0px #fcc;
box-shadow:inset 200px 0px 0px #fee;
outline-offset: -5px;
outline: 1px dashed #fcc;
border: 1px solid;
}
a.themenu:hover{
color: #CCA6F5;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
padding-left : 5px;
-moz-box-shadow:inset -200px 0px -200px -0.5px rgba(255, 255, 255, 0.51);
-webkit-box-shadow:inset -200px 0px -200px -0.5px rgba(255, 255, 255, 0.51);
box-shadow:inset -200px 0px 0px -0.5px rgba(255, 255, 255, 0.51);
outline-offset: -5px;
outline: 1px dashed #CCA6F5;
border: 1px solid;  
}
</style>
<center>
<img class='img-menu' src='http://2.bp.blogspot.com/-T91za-L7pMk/T2UGtFh56sI/AAAAAAAAFto/_Z8ti5HRRy0/s460/ttb.png'/>

  <div class='imgmenu'><br/><br/><br/>Sejam todos bem-vindos!<br/>Eu sou Roberta, autora desse blog e é com muito carinho que recebo sua visita! Espero que aqui seja um cantinho tão especial para você quanto é para mim!</div></center>
<center>
<a class='themenu' href="http://reinokawaii.blogspot.com">Home</a>
<a class='themenu' href="http://reinokawaii.blogspot.com">About</a>
<a class='themenu' href="http://reinokawaii.blogspot.com">F.A.Q</a>
<a class='themenu' href="http://reinokawaii.blogspot.com">Credits</a>
</center>

Resultado:



Sejam todos bem-vindos!
Eu sou Roberta, autora desse blog e é com muito carinho que recebo sua visita! Espero que aqui seja um cantinho tão especial para você quanto é para mim!
Home About F.A.Q Credits

Personalize ao seu modo, mudando larguras (width), alturas (height), cores, o texto de boas vindas, os links, a imagem...o código é bem simples! Esse efeito no menu, eu vi nesse template aqui e achei fofo  Espero que gostem!

Related Articles

14 comentários:

  1. Olá ^3^. Que efeito lindo! É super fácil de usar e está bem explicadinho ♥
    Adorei o tutorial, muito útil e com um resultado lindo :3

    Até mais ♡ || miki candy。

    ResponderExcluir
  2. Oi roberta, achei seu menu lindo lindo lindo! Parabens
    http://docebunny.blogspot.com.br/

    ResponderExcluir
  3. Eu amei, só que a imagem está muito grande vc poderia me ajudar: aonde fica o tamanho e a largura da imagem??
    http://chiclete-funny.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. O tamanho é 460 de largura e 300 de altura.

      Excluir
  4. Aww!Adoro suas postagens,fofa!Sempre a pegar suas dicas e a te seguir!
    Beijinhos^^
    Aguardando sua visitinha!
    imaginesgirl.blogspot.com.br

    ResponderExcluir
  5. Nossa *--* Lindo de mais! Se blog é incrivelmente fofo :3

    Kissus~♥ || Sonhos HTML

    ResponderExcluir
  6. Meu Deus, que lindooooo *ooooo* estou apaixonada <3 só não vou usar porque meu blog é em estilo revista :c mas eu vou criar um layout só pra usar esse menu <3 mt fofo *o*

    ResponderExcluir
  7. Oi, esse modelo só pega em gadaget mesmo? eu queria colocar em postagem, beijos!

    ResponderExcluir
  8. Noooosa que lindoo, vou usar no meu <3 http://vihpaula.blogspot.com.br/

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart