Modelos para Sidebar II

 

Boa tarde, pessoal.

Eu até acordei cedo para poder postar, mas acabei me distraindo um pouco e só fui perceber agora. Ainda não sei se irei mesmo fazer a quarta parte do mini-guia de template, mas se o tempo deixar irei fazer com toda a certeza. Acho que uma boa quantidade de pessoas poderá achar alguma utilidade nele, quem sabe.

Bom, tem um tempão que eu não trago nenhum modelo para sidebar e aproveitando justamente o guia, resolvi trazer dois modelinhos básicos para vocês. São modelos normais, nem sei se ficaram bons, mas espero que gostem deles e usem. Se não sabe como usar, deixarei as instruções em cima da apresentação dos modelos.

"Antes, preciso que realizem um passo para preparação. Os códigos vão ser aplicados em .sidebar .widget  e .sidebar h2, então você precisaapagar tudo que refere-se a isto e só depois aplicar os códigos." Como assim? Procure por estes dois códigos e apague, no lugar deles coloque o código referente ao modelo que escolheu. Se ainda não entendeu, me procure pela ask que eu irei explicar calmamente até você entender.

Modelo I

.sidebar .widget {

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

border-radius: 0px;

padding-bottom: 12px;

margin: 0px 0;

Background: #ffffff;

margin-top:41px;

padding:11px;

box-shadow: 1px 2px 3px 1px #e1dddd;

}

.sidebar h2 {

text-align:center;

background-color: #ee91af;

-moz-box-shadow: inset 0 0 10px #d85882;

-webkit-box-shadow: inset 0 0 10px #d85882;

box-shadow: inset 0 0 10px #d85882;

padding:2px;

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

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

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

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

border-top-left-radius: 4px;

border-top-right-radius: 4px;

display:inline;

float:right;

margin-top:-38px;

 Modelo II

.sidebar .widget {

border-bottom: 5px solid #ff74b5;

border-top: 5px solid #1cc9a6;

padding-bottom: 20px;

margin: 10px 0;

background: #fff;

padding:12px;

box-shadow: inset 0 0 15px #ebe9e9, 0 0 3px #ccc;

}

.sidebar .widget h2 {

background:#ffcddd;

color:#fff;

font-size:16px;

text-shadow:0 1px #ddd ;

margin-top:-12px;

margin-left:-13px;

margin-bottom:10px ;

padding:5px;

width:107%;

}

A segunda parte do modelo dois foi feita com a ajuda de um  código do CL.