Como fazer uma tirinha redonda com bordas nos lados
Essa fitinha é feita do mesmo jeito do Tutorial de Faixas Para Escrever Algo mas ela contém bordas nas laterais e é redonda, essa é a diferença. Mas vamos lá!
Exemplo: aqui.
1º: Coloque o código seguinte no seu CSS:
.tiraredondaih {display:block; background:#FUNDO; text-align:CENTER, LEFT OU RIGTH; letter-spacing:1px; padding:2px; margin:0 0 5px 0; font-family: 'QUAL FONTE VOCÊ QUER'; color: #COR DA FONTE; font-style:italic; border-radius: 10px; border-left:3px solid #COR DA BORDA ESQUERDA; border-right:3px solid #COR DA BORDA DIREITA; height: 20px; font-size:TAMANHO DA FONTEpx;}
2º: Se quiser colocar hover coloque esses códigos no seu CSS:
.tiraredondaih {display:block; background:#FUNDO; text-align:CENTER, LEFT OU RIGTH; letter-spacing:1px; padding:2px; margin:0 0 5px 0; font-family: 'QUAL FONTE VOCÊ QUER'; color: #COR DA FONTE; font-style:italic; border-radius: 10px; border-left:3px solid #COR DA BORDA ESQUERDA; border-right:3px solid #COR DA BORDA DIREITA; height: 20px; font-size:TAMANHO DA FONTEpx;}
.tiraredondaih:hover {display:block; background:#FUNDO; text-align:CENTER, LEFT OU RIGTH; letter-spacing:1px; padding:2px; margin:0 0 5px 0; font-family: 'QUAL FONTE VOCÊ QUER'; color: #COR DA FONTE; font-style:italic; border-radius: 10px; border-left:3px solid #COR DA BORDA ESQUERDA; border-right:3px solid #COR DA BORDA DIREITA; height: 20px; font-size:TAMANHO DA FONTEpx;}
No segundo código, as cores devem ser diferentes, já que é hover.
3º: Aonde você quiser que a tira apareça coloque:
<div class="tiraredondaih">O QUE QUER ESCRITO</div>
4º: Ir nos créditos e creditar!

sábado, 24 de março de 2012 @ 08:48 0 comentários

» «