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'); }
Adorei a postagem!!Foi bem útil para mim!!
ResponderExcluirhttp://l-ovelyhtml.blogspot.com.br/