Discover Top Posts Tagged with #boxside

Box “transparente”

Visualize aqui.

Bom gente é bem fácil fazer esse estilo de box. É usado um background rgba, você pode colocar qualquer cor que ficará como se tivesse com opacidade. O que eu vou ensinar para vocês hoje já vem com a cor preta.

Cole o seguinte código no seu css:

.side {line-height: 18px; font-size: 11px; color: #bbb; background: rgba(0,0,0,0.5); padding: 7px; margin-left: 4px; margin-right: 4px; margin-bottom: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden;}

Onde está em negrito é a cor da box preta “opacidade”.

Agora cole o seguinte código depois de <body>

Sua frase, imagem e o que quiser cole aqui.</div>

E pronto, sua box da side ficará como na visualização mostrada.

Por Brida Braga, se for útil não esqueça de dar like.

#bri #tutorial #tutoriais #tutos #boxside #boxsides

Eu estava preparando um theme, e eu fiz umas boxsides (que são essas acima), até que ficaram bonitinhas, então eu resolvi disponibilzá-las. Você pode mudar a cor, o tamanho, a largura, o que quiser, contado que credite... Espero que gostem! E, ah... Me desculpem pela caixa estar feinha, hihi. Se baixar dê like

Download.

#material #materiais #boxside

Download

/aninha

#boxside #sidebox #bosxides #anamake #Materiais #material #materials

Tá ai a faixinha desse meu theme e outras 2 novas. Depois posto o tutorial de como por no theme. Download: 4shared / Mediafire

#boxside #faixinhas #psd

Primeiramente desculpem por essa demo fail, me faltou criatividade. Gostei dessas faixinhas, essas são as primeiras de muitas. Se baixar de like e credite.

@Baixe.

#boxside #faixinhas #psd #materiais

Box side pelo HTML:

Veja esse tutorial na página do Queen Extras porque na Dash alguns códigos não aparecem!

Eu vou ensinar a fazer essa caixinha, ela é uma box side totalmente editável. Aí ela está bem simples, mas é você quem deve editá-la ao seu gosto.

Primeiro cole esse código antes de </style>:

#faixa {font: 20px georgia; font-style: italic; color: #fff; text-shadow: 1px 1px 1px #5c5c5c; text-align: center; padding: 5px; width: 280px; background: #a8a8a8; box-shadow: 0 0 20px rgba(000, 000, 000, 0.2) inset; height: 25px; margin-left: -20px; margin-bottom: 3px} #caixa {color: #b0b0b0; z-index: 10; text-shadow: 1px 1px #fff; width: 220px; background: #fff; padding: 8px;font-size: 11px; font-family: verdana; line-height: 15px; margin-bottom: 15px; height: auto; background-repeat: repeat-y; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 20px rgba(000, 000, 000, 0.1) inset; text-align: justify; width:250px; border-radius: 100% 0px 0px 0p} .esq {width: 0;height: 0;border-top: 10px solid #5c5c5c; border-left: 12px solid transparent; margin-left: -20px; margin-top: -3px} .dir {width: 0;height: 0;border-top: 10px solid #5c5c5c; border-right: 12px solid transparent; margin-right: -20px; margin-top: -10px; float: right}

Agora esse aqui aonde quer que apareça, aconselho a colocar no lugar onde está sua sidebar, mas deve ter uma noção básica de HTML porque se errar alguma coisa fica tudo desconfigurado:

<div id="caixa"> <div id="faixa"> Título </div> <div class="esq"></div><div class="dir"></div> Aqui a descrição, não sei. </div>

É isso, bem fácil né? Qualquer dúvida venha até a ask ^^ Não esqueça de creditar! /isa

#boxside #isa #tutoriais