Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
no site que estou criando me foi passadas 3 imagens, que serão o padrão de meus botões, eu necessito colocar uma imagem a esquerda e uma a direita e o meio do botão, todos com imagens diferentes pois não temos espaço para criar N imagens.
como pdoeria fazer isto?
já tenho a imagem do meio:
#btn
{
border:0;
background:URL('http://rsilva.tet.com.br/site/site/img/botao/bt_expansivel.jpg');
background-repeat:repeat-x;
}Eu não entendi bem o conceito de não terem "espaço" para criar N imagens, mas beleza. Procure os seletores :before e :after, eles podem ajudar.
Opa WIliam e Eliseu...
1º william me perdi no arquivo que me recomendastes.
2º Eliseu tentei fazer o uso do :before e do :after, mas não consegui resolver...
tenho o seguinte html:
<input type='submit' class='btn' name='sub' value='Logar'>
e o seguinte CSS:
.btn
{
border:0;
width:80px;
height: 20px;
background:URL('http://rsilva.tet.com.br/site/site/img/botao/bt_expansivel.jpg')repeat-x;
} background:URL('http://rsilva.tet.com.br/site/site/img/botao/bt_esquerda.jpg')repeat-x;
} background:URL('http://rsilva.tet.com.br/site/site/img/botao/bt_direita.jpg')repeat-x;
}Comece alterando de input para button. Primeiro por questões semânticas, depois por questões de flexibilidade.
<button type="submit">Logar</button>
O uso de :after e :before requer a propriedade content que será a responsável pelo conteúdo renderizado:
button { background: url('bg-botao.jpg') repeat-x top left; }
button:after { content: url('borda-esq.jpg'); }
button:before { content: url('borda-dir.jpg'); }
vlw. agora deu certo
veja como resolvi este menu:
http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__p__1341165entry1341165
ou seja, apenas 2 imagens.