3 modelos para Sidebar

Oie de novo,
Como fiquei sem nada pra fazer, tava terminando algumas coisas no layout do blog e percebi que tenho poucos utilitários.Então resolvi trazer três modelos para sidebar, bom um deles não são totalmente meus, usei como base mas não me lembro de onde eu os tirei, mas se lembrar eu credito.Eles são de layouts testes que não deram certo, por isso ficaram sem crédito.

  .sidebar .widget {
      padding-bottom: 10px;
      padding-left: 5px;
      padding-right: 5px;
      margin: 10px 0;
      background: #fff;
      box-shadow: 0px 0px 2px #ccc;
    }
    .sidebar h2 {
    margin-top: 8px;
    border-bottom: 1px  solid #eee;
    text-align: center;
    height: 15px;
    font-size: 12px;
    font-family: 'Oswald';
    color: #87CEEB;  /*Cor da fonte*/
    text-shadow: 0px 0px 5px #B0E0E6;
    text-transform: uppercase;
    }

.sidebar .widget {
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px 0;
  background: #fff;
  border: 1px  solid #DCDCDC;
  margin-top: 3px;
}
.sidebar h2 {
margin-top: 8px;
background: #baabc1;  /*Cor da barrinha*/
text-align: center;
height: 15px;
font-size: 13px;
font-family: AbeeZee; /*Fonte da sua letra*/
color: #FFF; /*Cor da fonte*/
text-transform: uppercase;
}
Código da fonte usada:
<link href='http://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'/>



 .sidebar .widget {
Background: #ffffff;
padding-top: 5px;
font-family: 'silkscreen'; /*Fonte da letra*/
font-size: 8px;
box-shadow: 1px 1px 1px 1px #e1dddd;
}
.sidebar h2{
background: #9370DB; /*Cor da barra*/
color: #fff; /* Cor da fonte*/
height: 15px;
padding: 0px;
width: 220px;
font-size: 10px;
text-align: right;
border-right: 5px solid #e9e8e7;  /*Cor da borda da barra*/
font-family: 'silkscreen'; /*Fonte da letra*/
-webkit-transition-duration: .80s;
}
.sidebar h2:hover{
background: #e9e8e7; ?*Cor do fundo da barra ao passar o mouse*/
border-right: 5px solid #9370DB; /*Cor da borda ao passar o mouse*/
-webkit-transition-duration: .80s;
}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }

Um comentário:

  1. Adorei a postagem!!Foi bem útil para mim!!

    http://l-ovelyhtml.blogspot.com.br/

    ResponderExcluir

Por favor leia as regras antes de comentar:

- Sem spam!
- Sempre que puder deixe o link do seu blog, assim posso retribuir a visita.
- Não aceito "Segue de volta?", eu só sigo se gostar do blog.
- Vou responder como você perguntar, se insultar eu vou retribuir.
- Aceito críticas construtivas, opiniões desnecessárias serão recebidas como devem.
Leu tudinho?Então deixe seu comentário =]