Modelos de Sidebar

Oi gente !! Como estão ?? Eu estou ansiosa, amanhã começam minha aulas e eu estou tremendo na base porque é escola nova e tudo mais, não conheço ni ninguém,enfim, me desejem sorte hahaha.

Eu não sabia o que postar aqui e no ask me pediram pra postar modelo de sidebares sabe ?

1. Essa aqui é com a borda em traços/pontilhados.

@font-face {font-family: "codec"; src: url('http://static.tumblr.com/0himcbg/tfCmq1q04/amarurgt.ttf');} 

@font-face {font-family: "code"; src: url('http://static.tumblr.com/dlelfro/fNTmnnzwy/code_bold.otf');}

.sidebar .widget {

background: #fff;

box-shadow: 1px 1px 0 #e0e0e0;

padding-top: 5px;

padding-left: 9px;

padding-bottom: 9px;

padding-right:9px;

margin-bottom: -15px;

outline: dashed 1px #BEBEBE; outline-offset: -5px;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 2px;

}

.sidebar .widget h2{    

background: url(http://3.bp.blogspot.com/-juB0bjmNNvY/UbpmUUO-LhI/AAAAAAAABLA/wtcJ399lmFE/s1600/1701.png)  no-repeat left;    

margin-top:-2px;    

margin-left:-20px;    

margin-bottom:0px;    

padding:15px;    

width:150%;    

overflow:hidden;   

font-size: 20px;

color: #fff;

font-family: 'code';

font-style: bold;

font-weight: normal;

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

} 

2. Borda em linha reta 

@font-face {font-family: "codec"; src: url('http://static.tumblr.com/0himcbg/tfCmq1q04/amarurgt.ttf');}

@font-face {font-family: "code"; src: url('http://static.tumblr.com/dlelfro/fNTmnnzwy/code_bold.otf');}

.sidebar .widget {

background: #fff;

box-shadow: 1px 1px 0 #e0e0e0;

padding-top: 5px;

padding-left: 9px;

padding-bottom: 9px;

padding-right:9px;

margin-bottom: -15px;

outline: solid 1px #BEBEBE; outline-offset: -5px;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 2px;

}

.sidebar .widget h2{    

background: url(http://3.bp.blogspot.com/-JlSI39bnvvM/Uds1-BwdmiI/AAAAAAAAH8Y/LNTgU6eAGeE/s1600/rpg6.png)  no-repeat left;    

margin-top:-2px;    

margin-left:-20px;    

margin-bottom:0px;    

padding:15px;    

width:150%;    

overflow:hidden;   

font-size: 20px;

color: #fff;

font-family: 'code';

font-style: bold;

font-weight: normal;

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

} 

São iguais não ?? hahaha Só o que muda é a outline

É isso, beijos