Modelos para título da sidebar

Olá pessoal, trago para vocês alguns modelos fofos para colocar nos títulos da sidebar.

Os créditos vão para Things Html, World of Thel, Jackie Dream, Chá com Anjos

 Para os modelos vá no html de seu blog, aperte as teclas Ctrl f ou f3 e procure por ]]></b:skin> e acima

adicione os códigos, ou procure por h2 ou .sidebar.widget  h2 { modificando o que se pede.

Modelo I

.sidebar.widget  h2 {

margin-top: 15px;

margin-bottom: 5px;

font-family: Tahoma;

text-transform: uppercase;

letter-spacing: 3px;

color: #ccac90;

border-bottom: 1px dotted #c8bcb2;

font-size: 11px;

text-align: center;

word-spacing:.4em;

-webkit-transition-duration: .50s;

}

.sidebar h2:hover {

letter-spacing: 6px;

color: #b39478;

-webkit-transition-duration: .50s;

}

Modelo II

.sidebar.widget  h2{

background: #cor_do_fundo_normal;

color: #cor_da_letra_normal;

height: 15px;

padding: 3px;

width: largura_do_títulopx;

font-size: 8px;

text-align: right;

border-right: 5px solid #cor_da_borda_normal;

font-family: "Tipo da letra";

-webkit-transition-duration: .80s;

}

.sidebar h2:hover{

background: #cor_do_fundo_hover;

border-right: 5px solid #cor_da_borda_hover;

-webkit-transition-duration: .80s;

}

Modelo III

  .sidebar.widget  h2 {

text-align: center;

background-color: #FFC0CB;

width: 230px;

height: 15px;

font-size:13px;

text-shadow:0 1px 1px #ffffff;

border-bottom: 1px dotted #EE1289;

}

Modelo IV

.sidebar.widget  h2 {

background: #f5f5f5;

border-bottom: 3px double #40E0D0;

font-family: arial;

font-style: italic;

font-size: 10px;

font-weight: normal;

text-align: right;

text-shadow:#fff 0px 0px 1px;

Modelo V

.sidebar.widget  h2 {

font-family:Arial;

color: #CCDDC7;

border-left: 5px solid #D9FCCE;

border-right:5px solid #DBC6F7;

text-shadow: 1px 1px 1px #F6FDF3;

background:#FBF9FD;

text-align: center;

font-size: 15px;

}

Modelo VI

.sidebar.widget  h2 {

font-family: 'Sofia', cursive; /*Tipo de fonte*/

font-size: 26px; /*Tamanho da fonte*/

color: #FFAEB9; /*Cor da fonte*/

background: url(http://i.imgur.com/Rjdny.png) no-repeat center;

height: 36px;/*Altura da imagem*/

width: 287px; /*Largura da imagem*/

text-align: center; /*Alinhamento do texto*/

}

Para instalar a font coloque o código abaixo logo acima da tag </head>

<link href='http://fonts.googleapis.com/css?family=Sofia' rel='stylesheet' type='text/css'/>

- No trecho: http://i.imgur.com/Rjdny.png vocês podem trocar por uma imagem personalizada. Não esquecendo de ajustar as medidas da sua imagem.

Modelo VII

 .sidebar .widget h2 {

 background: # ; /*Cor do fundo do título*/

 width: 150px; /*Largura do fundo, aumente se precisar*/

 font-family: ; /*Fonte do titulo*/

 font-color:# ;

 text-shadow: 0px 1px 1px # ;

 font-size:  px; /*Tamanho da fonte*/

 font-weight: normal;

 line-height:  px; /*Altura da linha, coloque o mesmo que o tamanho da fonte*/

 margin-top: -30px; /*Quantos pixels o título "sobe"*/

 margin-left: -10px;

 padding-left:5px;

 -webkit-transition-duration: .40s;

}

.sidebar h2:hover {

letter-spacing: 3px;

-webkit-transition-duration: .40s;

- Este modelo eu uso aqui no blog.

Modelo VIII

@font-face { font-family: "rabbit"; src: url('http://static.tumblr.com/dlelfro/FcTmnnzis/cheeky_rabbit.ttf');}

.sidebar.widget  h2 {

font-family: rabbit;

color: #fff;

text-align: center;

background: url(http://i.imgur.com/iSOtYFt.png) no-repeat left;

background-color: #d2b9c3;

padding: 10px;

margin-left: -10px;

margin-right: -10px;

margin-top: -10px;

-webkit-border-top-left-radius: 3px;

-webkit-border-top-right-radius: 3px;

-moz-border-radius-topleft: 3px;

-moz-border-radius-topright: 3px;

}

Modelo VI

.sidebar.widget  h2 {

text-align:center;

background-color: #XXXXXX; cor de fundo

padding:1px;

border: 1px solid transparent;

-webkit-transition:0.4s;

display:inline;

float:right; pode mudar para left

margin-top:-15px;

text-shadow: 0px 1px 1px transparent;

height: 14px;

padding-left: 5px;

padding-right: 5px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}