modelos de sidebar.

Eai pessoas do meu core, como estão? eu tive uma semana muito puxada, tive 4 provas só essa semana de matemática, inglês, história e geografia. Por isso fiquei uns dias sem postar. E aí, vocês estão tendo muitas provas?. Bom, então depois de muitas provas, eu vou ficar sem aula hoje, o final de semana todo e segunda -feira. Então, oque isso resulta? = muitos tutorais e post's. então, me deem ideias plis do que postar, porque eu estou desesperada sem idéias. Bom, como eu mesma disse estou sem ideias do que postar, mas para não ficar sem postar nada. Fiz uma coletanea das minhas sidebares favoritas, deixarei o source delas. Bom, para ver elas é só clicar em - mais informações - nós vemos lá.

Vamos lá, as que eu colotei são bem simplesinhas e talvez sábado eu postarei umas feitas por mim... O jeitinho de colocar é o mesmo - modelo html - ctrl +f -  e pesquisa por ]] cole acima... enjoy.

01 - modelo 1, clique para visualização.

.sidebar .widget {
background-color: #fafafa;
padding: 3px 4px 4px 4px;
text-align: justify;
margin-bottom: -23px;
border-bottom: 3px solid #787590;
border-left: 1px solid #ebebeb;
border-top: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #d7d7d7;
text-shadow: 1px 1px 0 #fff;
}
.sidebar .widget h2 {
padding: 2px 4px 2px 4px;
margin-bottom: 3px;
margin-top: 2px;
background: #787590;
border: 1px solid #5b5778;
box-shadow: inset 1px 1px 0 #8f8ca8;
font-family: "PF Arma Five";
font-size: 8px;
outline: dotted 1px #dedddd;
outline-offset: 1px;
color: #53506d;
text-shadow: 1px 1px 0 #8f8ca8;
text-align: center;
}

         02 - modelo 2, clique para visualização.

.sidebar .widget {
background-color: #fff;
box-shadow: 1px 1px 0 #ebebeb;
padding: 3px 4px 4px 4px;
text-align: justify;
margin-bottom: -23px;
color: #d7d7d7;
text-shadow: 1px 1px 0 #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.sidebar .widget h2 {
padding: 2px 4px 2px 4px;
margin-bottom: 3px;
margin-top: 2px;
background: transparent;
border-bottom: 3px double #ebebeb;
border-top: 1px double #f9f9f9;
letter-spacing: .3em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: uppercase;
line-height: -3px;
color: #ccc;
text-align: left;
}

03 - modelo 3, clique para visualização.

/* Widgets
----------------------------------------------- */
.sidebar .widget {
font-family: 'Pf Arma Five';
color:#ccc;
font-size:8px;
padding: 5px;
margin:2px;
margin-top:5px;
margin-left:-35px;
Background: #fff;
border: 1px solid #D7E5DF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition-duration: .50s;
}
.sidebar .widget h2 {
padding-bottom: 6px;
padding-top: 6px;
color:#fff;
text-shadow: 1px 1px 1px #BDD3D4;
background: #D5E3E4;
border: 1px solid #BDD3D4;
box-shadow: inset 1px 1px 0px #ECF2F2;
border-radius:3px;
padding-left: 10px;
line-height: 8px;
margin-bottom: 5px;
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: px;
font-size: 13px;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition-duration: .80s;
}
.sidebar h2:hover {
padding-bottom: 6px;
padding-top: 6px;
background: #D5E3E4;
border: 1px solid #BDD3D4;
box-shadow: inset 1px 1px 0px #ECF2F2;
border-radius:3px;
padding-left: 10px;
line-height: 8px;
margin-bottom: 5px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 13px;
color:#BDD3D4;
text-shadow: 1px 1px 1px #fff;
text-align: center;
padding-right: 100px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition-duration: .80s;
}

Bom, então hoje foi isso, se gostou da coletanea ou pegou algo. Não esqueça de comentar o post e seguir o blog.  kisses for you -3-

source - having cherry e the moon reverse.