Bom dia meus amores,
Estranho, acho que nunca dei bom dia ou algo do tipo aqui mas ok.Hoje eu trouxe um tutorial bem simples e que acho que vai ajudar muito todos vocês.Pelo menos quando descobri ajudou tipo; muito.
Modelo para sidebar, é com toda certeza uma das partes mais importantes e mais chatinhas de um bom layout.
Vamos aprender a criar esses modelos, em tamanhos proporcionais, pois é muito difícil achar um layout onde o conteúdo do gadget está perfeitamente alinhado.Vou ensinar a vocês fazerem um modelos mas nisso vocês podem acrescentar faixinhas, bordas abaixo do título e tudo o que quiserem.
Vamos ao tuto?
- Procure por .sodebar . widget { você vai achar como:
.sidebar .widget {border-bottom: 2px solid $(widget.border.bevel.color);padding-bottom: 10px;margin: 10px 0;}
- Apague e cole tudo que necessitar ao restante do tutorial.
- O corpo da sidebar: eu acho na maioria das vezes feio uma sidebar arredondada, mas isso é de sua opção.
.sidebar .widget {padding-bottom: 10px; /* Não mude nada aqui*/padding-left: 5px; /* Não mude nada aqui*/padding-right: 5px; /* Não mude nada aqui*/margin: 8px 0; /* Não mude nada aqui*/background: #fff; /* Cor de fundo */margin-top: 1px; /* Não mude nada aqui*/font-family: Arial; /* Fonte do texto*/font-size: 8px; /* Tamanho da fonte */}
- Você pode acrescentar:
border-radius: 2px 2px 2px 2px; /* Deixa as bordas arredondadas*/
border: 1px solid #ecebeb; /* bordas */
box-shadow: inset 0 0 5px #cfc8d7, 0px 0px 2px #ededed; /* Brilho no interior */
box-shadow: 0 0 5px #cfc8d7, 0px 0px 2px #ededed; / * Brilho nas bordas */
- Agora vamos ao título:
.sidebar h2 {margin-left: 20px;margin-top: -10px;margin-bottom: 5px;text-align: center; /* Alinhamento do texto */font-family: Arial; /*Fonte da letra*/color: #000; /*Cor da fonte*/font-size: 20px; /*Tamanho da fonte*/}
- Você também pode acrescentar:
border-bottom: dotted 1px #ecebeb; /*Borda abaixo do título*/
background: #color; /*faxinha de cor*/
background: url ('URL DA FAIXINHA'); /*Com faixinha*/
É isso amores, espero que tenham entendido :) e gostado do tuto.
Beijinhos!
Não sei porque, mas adoro personalizar a sidebar *u* Gostei muito do tuto, o resultado deve ficar demais :3
ResponderExcluirhtmlandresources.blogspot.com
Awn que bom esse tutorial <33
ResponderExcluirhttp://miss-nothing-oficial.blogspot.com.br/
Adorei o tutorial! Sem dúvida alguma que eu tenho de usá-lo. É muito útil
ResponderExcluirquerosabertudo-k.blogspot.com