Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Linkei!

Bordas utilizando imagens

Por , em Desenvolvimento frontend

Recommended Posts

Linkei!    0

Linkei!
Postado

Olá Pessoal Do iMasters...

Bem, a dúvida é a seguinte...

Um amigo me criou algumas imagens para eu usar no meu site, porém, as imagens seriam para ficar como bordas para as DIVs.

O Meu Site originalmente está assim: http://www.empireoflinkei.com (não notem o nome http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif ).

As imagens que ele fez, serviriam para criar uma borda para cada um dos "quadros"(Divs).

Mas eu não conssegui fazer isso...Eu tenho aqui um exemplo de como eu queria que ficasse: http://www.santuariorpgmaker.com/forum , e as imagens: Aqui

 

Eu gostaria que alguém me ensina-se a fazer :/

Obs: sim, eu olhei o código fonte do exemplo, mas não conssegui fazer...

 

Desde já obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Bem vindo a Forum

 

poderia explicar melhor o que você quer, eu não consegui entender :D

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Linkei!    0

Linkei!
Postado

Gente, naquele arquivo que eu enviei, me desculpem mas ta errado, as unicas imagens uteis sao a barra e a junção.

no santuario RPG Maker, eles fizeram caixas com bordas feitas de imagens diferentes(a barra e junção).Eu queria a mesma coisa.

 

Usar as imagens que eu tenho para fazer a borda de uma DIV.Mas eu não conssegui fazer esta borda.

Desculpem a falta de clareza...

 

Eu não sei mecher nada em CSS3,cara se for a solução, você pode me indicar um tuto rapido?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Linkei!    0

Linkei!
Postado

Eu tentei fazer com varis divs, mas não conssegui fazer a inferir e a direita.

sei que vai ser pedir muito...mas Você poderia fazer um exemplo para eu ver como você faz?

CSS3 pode fazer isso? então vou dar uma olhada...

 

Dúvida sobre CSS3...

Para usar o border-image, eu abro a tag <style type"text/css3">, ou abro <style type="text/css"> normal?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Mostre-nos como você está fazendo.

 

Posta o HTML e CSS para vermos aonde está errando.

 

Basicamente é como trabalhar com um layout de colunas, ou seja, use float.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

P.S.: Não coloque aquivos .rar para baixarmos, preferível postar um link.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Linkei!    0

Linkei!
Postado

Desculpa continuar incomodando mas...

O meu CSS3 não está funcionando, então eu queria uma ultima ajuda neste assunto...

<html>  <head>  <style type="text/css">   #contents {width: 80%; height:80%;background: #0071db ;border-image: url("IMGs\Border.gif") 20 20 20 20 round round;}  </style>  </head>  <body>   <center>    <div id="contents">     Hello Word...    </div>   </center>  </body> </html>

Este ai encima foi um exemplo que eu fiz do mesmo jeito do meu site, para ver se vocês consseguiam localizar o problema...

A borda simplesmente não aparece...

 

Pessoal, peço mil desculpas pelos transtornos,erros ortográficos, e bagunça...Resumindo: Nubice xp

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eliseu M.    2

Eliseu M.
Postado

No caso daquele site, ele não utiliza CSS3 para montar as borders, e sim DIV com imagens de BG. Mas, para ficar ainda mais fácil, ele também interligou alguns backgrounds com essas DIVs, exemplo: a DIV principal tem uma imagem de fundo com as bordas left e right (e uma DIV com outra border acima) e, a DIV que fica abaixo dessa, tem apenas as bordas left, right também (com outras DIVs acima e abaixo), entendeu? Olhe, utilize o FireBug no Firefox e terás uma perspectiva melhor de como foi feito :D Procure também usar essa ferramenta no Orkut, que usa algumas rounded borders.

 

 

Té mais!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Linkei!    0

Linkei!
Postado

Mauro Nigro:

ao gosto muito de dreamwaver...prefiro ir no código fonte que eu aprendo mais.

 

Thiago Retondar:

O caminho está certo, eu copiei e colei o nome da imagem só de birra...

Estou usando Mozilla Firefox, que leu certinho no CSS3.info e passou com 100% no teste.

Que aspas você se refere?

 

Eliseu M.

Obrigado pela ajuda, mas continua difícil demais de entender e muito mais de fazer x[

Acho melhor usar o CSS3, e uma borda alternativa sem imagem semelhante, para aqueles que não conssigam visualizar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eliseu M.    2

Eliseu M.
Postado

Isso que eu iria falar... o CSS3 ainda não está disponível para todos os browsers, por isso recomendei o uso de DIVs, como a maioria dos sites ainda fazem. Dá um pouco de trabalho para aprender, mas depois fica easy :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Linkei!    0

Linkei!
Postado

Thiago Retondar:

Reta final xD

Ultima Ultima pergunta: aonde coloca-los? tipo... -webkit-border-image ?

 

Eliseu M.

Será que fica easy mesmo? xD

Pra min parece algo quase impossível...

Mas eu não vou abandonar estes estudos com DIVs...

Vou adotar o CSS3 como medida temporária, e um estilo alternativo para navegadores sem CSS3, então, se um dia eu consseguir fazer por DIVs, eu troco(a não ser que dai CSS3 já esteja oficializado.)

 

Flw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

É só fazer assim:

 

seletor{
/* Propriedades */
-webkit-border-radius: propriedades;
-moz-border-radius: propriedades iguais à de cima para que apareça igual nos navegadores que o suportam.
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito