tutorial

Modelos de Sidebar

janeiro 27, 2014,16 Comments









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

You Might Also Like

16 comentários:

  1. Os dois modelos são maravilhosos, mas eu gostei mais do primeiro U-U
    Beijinhos >u<

    s-ugarcubes.blogspot.com.br

    ResponderExcluir
  2. Os dois modelos ficaram lindos >3<

    www.b-urning.blogspot.com.br

    ResponderExcluir
  3. Ai, faz tempo que eu to procurando essas bordinhas *-* mto bom
    Doasg

    ResponderExcluir
  4. Olá, adorei o blog, poderia fazer um png de letras pra mim? É que eu preciso colocar em meu lay.
    A palavra é Let It Shine. Por favor.

    ResponderExcluir
  5. O primeiro é lindo! Simples, porém prefiro assim.
    O segundo também é legal ~falando do ² para ele não se sentir magoado~
    Beijinhos.

    Conto com sua visita c-akeparty.blogspot.com/p-cake.blogspot.com

    ResponderExcluir
  6. Gostei bastante dos modelos, meu preferido foi o segundo *3*

    AN ~

    ResponderExcluir
  7. Não liga pra escola nova, tem uma mina na minha escola que entrou a 2 anos (e eu entrei a 7) que é mais popular q eu, k

    ResponderExcluir
  8. Também vou estudar em escola nova, scrr D:
    Amor, como faço pra colocar? Eu amei a segunda e quero usar. :3

    ResponderExcluir
  9. imaginedirectionerdreams.blogspot.com.br/

    ResponderExcluir
  10. Sou à Dálity Lopes, a que perguntou como usa. kkk Mas já consegui colocar já. ><

    sweet-fanfic.blogspot.com.br/

    ResponderExcluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. ótimo tuto :))) selinho pra vc amore fasdeonedirectionofficial.blogspot.com.br/2014/02/mais-um-selinho-versatile-blog.html#comment-form bjo

    ResponderExcluir
  13. ta mais como eu faço para colocar, nao entendi essa parte me explica por favor, oque eu tenho que procurar em html explica melhor ai amei esse blog tava procurando esse tutu a muito tempo. e eu nao sei se ja tem aqui mas poderia fazer um tutorial sabe aquela coluna de marcadores eu queria aprender fazer de como fazer duas coluna pq fica mais organizado, eu tentei vi varios tutoriais mas não consegui não fica no meu blog, por que sera que nao fica tentei no blog de test tbm nao ficou me ajuda se puder agradeço ja to seguindo o blog pq é muito bom. E uma outra duvida só que eu tenho que ja vi e tentei colocar no meu blog o instagram mas não fica aparece uma carinha dizendo que deu erro algo assim, tem que pagar? se puder me responde beijos

    ResponderExcluir
  14. Peguei o primeiro, muito fofo ele!*--*

    ResponderExcluir
  15. Peguei o segundo c:
    sonhosdedirectioners-onedirection.blogspot.com

    ResponderExcluir