♡ Tutorial : Modelos para Sidebar ♡

The Moon Reverse (créditos)

Texto .: '' é difícil perceber o quanto eu tento não amar e amo , por que odiar se amar e odiar é a mesma coisa , se você entende vai perceber , que nem tudo é completamente diferente. Só as pessoas , que são diferentes , agora o que eu sinto é fora do normal de completamente diferente. Eu queria poder odiar você , odiar seu modo de ser , e nunca chegar perto. Por que , eu quero que você fique longe , mais , eu sei que as vezes te amar pode ser melhor , pode ser diferente , só que você não é diferente , enquanto eu estava chorando , você estava rindo, enquanto eu estava triste , você estava feliz , eu não entendi por que eu era completamente inocente. eu queria que você percebesse o significado do amor. Por que eu entendo , e sinto. E você? O que tem feito? ''

Trouxe mais um tutorial pra vocês , por que ainda estamos em maratona e espero que gostem , os créditos acima da imagem , complicado não? Eu achei bem fácil esse tutorial , embora quem seja novo não saiba usar muito direito o HTML ainda , na próxima postagem , posto mais um tutorial e então depois explico um pouco de cada coisa. Vamos lá?

(Modelo 01): Troque o código do .sidebar .widget { pelo do quote abaixo.

.sidebar .widget{
background-color: #fff;
border: 1px solid #eaeaea;
border-bottom: 3px solid #e4e4e4;
padding: 4px 4px;
color: #c4c2c2;
text-align: justify;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
margin-bottom: -26px;
}
.sidebar .widget h2{
padding: 2px 5px 2px 4px;
letter-spacing: .1em;
margin-bottom: 4px;
font: normal normal 11px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #ffdbe3;
border: #ffd6de 1px solid;
box-shadow: inset 1px 1px 0 #fff5f7;
background: #ffe2e8;
background: -moz-linear-gradient(top,  #ffe2e8 0%, #fff2f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe2e8), color-stop(100%,#fff2f4));
background: -webkit-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: -o-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: -ms-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: linear-gradient(to bottom,  #ffe2e8 0%,#fff2f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe2e8', endColorstr='#fff2f4',GradientType=0 );
}

 

(Modelo 02): Troque o código do .sidebar .widget { pelo do quote abaixo.

.sidebar .widget{
background-color: #fff;
border: 1px solid #eaeaea;
border-bottom: 3px solid #e4e4e4;
padding: 4px 4px;
color: #c4c2c2;
text-align: justify;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
margin-bottom: -26px;
}
.sidebar .widget h2{
padding: 2px 5px 2px 4px;
letter-spacing: .1em;
margin-bottom: 4px;
font: normal normal 11px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #bfcdd9;
border: #c7d4df 1px solid;
box-shadow: inset 1px 1px 0 #f2f5f7;
background: #d0dbe4;
background: -moz-linear-gradient(top,  #d0dbe4 0%, #e8edf2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dbe4), color-stop(100%,#e8edf2));
background: -webkit-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: -o-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: -ms-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: linear-gradient(to bottom,  #d0dbe4 0%,#e8edf2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#e8edf2',GradientType=0 );
}

 

(Modelo 03): Troque o código do .sidebar .widget { pelo do quote abaixo.

.sidebar .widget{
background-color: #fff;
border: 1px solid #eaeaea;
border-bottom: 3px solid #e4e4e4;
padding: 4px 4px;
color: #c4c2c2;
text-align: justify;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
margin-bottom: -26px;
}
.sidebar .widget h2{
padding: 2px 5px 2px 4px;
letter-spacing: .1em;
margin-bottom: 4px;
font: normal normal 11px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #d8cbd6;
border: #ded6dd 1px solid;
box-shadow: inset 1px 1px 0 #f7f4f6;
background: #e8e1e7;
background: -moz-linear-gradient(top,  #e8e1e7 0%, #f4eff3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e1e7), color-stop(100%,#f4eff3));
background: -webkit-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);
background: -o-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);
background: -ms-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);
background: linear-gradient(to bottom,  #e8e1e7 0%,#f4eff3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e1e7', endColorstr='#f4eff3',GradientType=0 );
}

 

(Modelo 04): Troque o código do .sidebar .widget { pelo do quote abaixo.

.sidebar .widget{
background-color: #fff;
border: 1px solid #eaeaea;
border-bottom: 3px solid #e4e4e4;
padding: 4px 4px;
color: #c4c2c2;
text-align: justify;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
margin-bottom: -26px;
}
.sidebar .widget h2{
padding: 2px 5px 2px 4px;
letter-spacing: .1em;
margin-bottom: 4px;
font: normal normal 11px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #d6e5ac;
border: #d6e5ac 1px solid;
box-shadow: inset 1px 1px 0 #f9ffe8;
background: #e6f1c6;
background: -moz-linear-gradient(top,  #e6f1c6 0%, #f3fcd9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f1c6), color-stop(100%,#f3fcd9));
background: -webkit-linear-gradient(top,  #e6f1c6 0%,#f3fcd9 100%);
background: -o-linear-gradient(top,  #e6f1c6 0%,#f3fcd9 100%);
background: -ms-linear-gradient(top,  #e6f1c6 0%,#f3fcd9 100%);
background: linear-gradient(to bottom,  #e6f1c6 0%,#f3fcd9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f1c6', endColorstr='#f3fcd9',GradientType=0 );
}