clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

13/06/2012

Tutorial: Modelos de Sidebar (I)


Yo pessoal! Trago alguns estilos de sidebar para vocês espero que vocês gostem. Todos eles foram de modelos antigos aqui do blog, então são bem simples. Ate a próxima post pessoal.

OBS: Para você usar um dos modelos abaixo você deve remover todo conteudo do .sidebar .widget  e .sidebar h2, esta bem? Caso não saiba como remover aqui esta o tutorial.


.sidebar .widget {
width:100% !important;
background:#fff;
margin:15px 0 !important;
border-radius:5px;
padding:10px;
box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
overflow:hidden
}
.sidebar .widget:first-child {
  margin-top: 0;
}
.sidebar h2 {
font-family: Verdana;
font-size: 17px;
color: #fff;
background: url(http://4.bp.blogspot.com/-8laXTavwMhk/UEa9S5Dl_zI/AAAAAAAAAjc/BXAkqjknreE/s1600/Faixinha+gadgets.png) no-repeat center;
height: 25px;
width: 300px;
text-align: center;
margin-top:-5px;
margin-left:-9px ;
margin-bottom:10px ;
text-shadow:0 1px #5C487E ;
padding:5px;
width:114%; }



Cred: Sweet Poison
   .sidebar .widget {
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   padding-bottom: 12px;
   margin: 0px 0;
   Background: #ffffff;
   border-bottom:5px #2D3A86 solid;
    margin-top:41px;
    padding:11px;
    box-shadow: 1px 2px 3px 1px #e1dddd;
    }
   .sidebar h2 {
    text-align:center;
   color: #2C2C2C;
    background-color: #83B7FF;
    -moz-box-shadow: inset 0 0 10px #6DA8FB;
    -webkit-box-shadow: inset 0 0 10px #6DA8FB;
    box-shadow: inset 0 0 10px #8193FF;
    padding:2px;
   -webkit-border-top-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display:inline;
    float:right;
    margin-top:-38px;
    } 


Cred: Kawaii World
    .sidebar .widget {
    border-bottom: 5px solid #D682DE;
    border-top: 5px solid #621E85;
    padding-bottom: 20px;
    margin: 10px 0;
    background: #fff;
    padding:12px;
    box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
    }
    .sidebar .widget h2 {
    background:#45CFAF;
    font-size:16px;
   font-family: Stoke;
    color: #fff;
    font-size: 23px;
    text-shadow:0 1px #ddd ;
    margin-top:-12px;
    margin-left:-13px;
    margin-bottom:10px ;
    padding:5px;
    width:107%;
    }



.sidebar .widget {
background: #fff;
padding: 5px;
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
 margin: 10px 0; }
h2 {
display:block; background:#EAC3B8;
color:#A95A4E;
text-shadow: 1px 1px 0 #transparent; font-size:12px;
font-weight:bold; letter-spacing:1px; padding:3px 5px 3px 10px; margin:5 0 0px 0;
text-transform: normal; border-bottom: 1px dotted #000000;
}


26 comentários:

  1. Acho que você esqueceu dos créditos. Você só mudou as cores e eles são do Kawaii World. Põe os créditos por favor..

    ResponderExcluir
    Respostas
    1. Yo Luuh eu peguei apenas um no Kawaii, o de aba eu já não sei mas abaixo dele esta com os créditos já. ^^

      Excluir
  2. Anônimo6/7/13

    Yo! Como se muda a cor do 1º?
    Preciso mesmo de saber, pode me ajudar? T.T

    ResponderExcluir
    Respostas
    1. é uma imagem você muda por um programa editável e o fundo branco dos gadgets se muda nessa parte:
      background:#fff;

      já sombra por dentro dele é nessa parte
      box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;

      se deseja mudar a fonte é nessa parte
      color: #fff;

      e nessa aqui também é o contorno da letra
      text-shadow:0 1px #5C487E ;

      espero que tenha ajudado ^^

      Excluir
    2. Anônimo6/7/13

      Ajudou muito! Obrigado!
      Visite se quiser: http://otakudreamplace.blogspot.pt/ (estou em "obras" kkkk, por isso esta fechado durante um tempo)

      Excluir
    3. Hihi que bom que ajudou, não foi nada.

      Claro assim que você abrir e eu voltar de viajem eu faço uma visita sem duvida conta comigo lá.

      Excluir
    4. Anônimo6/7/13

      Ano, outra pergunta: Em que zona do HTML se põe o código?
      Desculpe se estiver a incomodar de mais T.T

      Excluir
    5. Que isso tudo bem se preocupa não, você procura por:

      .sidebar .widget { pague dessa parte ate o } e cole o codigo escolhido na postagem ^^

      Excluir
    6. Anônimo6/7/13

      Arigatou! _saltando para os seus braços_

      Excluir
    7. Douitashimashite ^.-

      -upa-

      Excluir
  3. Tô planejando pegar o 1 ;p Tô aprendendo a fazer layouts ainda, graças ao blog. Obrigada!

    ResponderExcluir
    Respostas
    1. Entendo, com certeza ficara lindo seu layout. De nada fico grata em poder ajudar

      Excluir
  4. Peguei o 2, mas a cor dentro dele fica cinza :/, como muda ?

    ResponderExcluir
    Respostas
    1. Estranho... o fundo dele esta branco, você mudou a cor ao colocar? Ou removeu todo o código da antiga sidebar?

      Excluir
  5. Peguei o código da 2º sidebar amor

    ResponderExcluir
  6. oiiii poderia fazer um sidebar com esssa cor
    #8A2BE2

    ResponderExcluir
  7. os layout são muito lindos,mais infelizmente no meu não adicionou,não sei o porque

    ResponderExcluir
  8. Peguei o terceiro amoore!!
    Amei os modeloos! :3 :)
    To sem postar, mas vou voltar ;)
    vidadanovata.blogspot.com

    ResponderExcluir
    Respostas
    1. Volta sim! Saudades de suas postagens.

      Excluir