[Resolvido] Bordas Arredondadas Sem Utilizar Imagens

#1 berga

Novato no fórum

Usuários
9 posts

Sexo:Masculino
Localidade:Brasília - DF

Posted 05/08/2010, 12:00

Fala galera... tava procurando na internet aqui sobre como fazer uma div de conteudo com bordas arredondadas e achei esse codigo..
é meio confuso e muito extenso, alguem ai conhece um mais simples?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Borda Arredondada sem utilizar imagens</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<style>

.bordaBox {background: transparent; width:30%;}

.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}

.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}

.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}

.bordaBox .b1 {margin:0 5px; background:#999;}

.bordaBox .b2 {margin:0 3px; border-width:0 2px;}

.bordaBox .b3 {margin:0 2px;}

.bordaBox .b4 {height:2px; margin:0 1px;}

.bordaBox .conteudo {padding:5px;display:block; background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}

</style>

<body>



<div class="bordaBox">

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>

<div class="conteudo">

Box com bordas arredondadas sem utilizar imagens<br />Fácil utilização e implementação com CSS puro!

</div>

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

</div>



</body>

</html>

Fonte: http://codigofonte.u...tilizar-imagens

Edição feita por: berga, 05/08/2010, 12:04.

#2 André Manoel

Doutor

Usuários
996 posts

Sexo:Masculino
Localidade:Brasilia

Posted 05/08/2010, 14:31

Dá uma pesquisada no plugin jquery.corner.js

Ele irá te ajudar mais que esse script...

Iniciando na Ajuda On line...

Posted Image

Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.

#3 Cristiano Galdino

Dark Defender

Administradores
3738 posts

Sexo:Masculino
Localidade:Brasília, DF

Posted 05/08/2010, 15:21

Verdade! Conheci esse plugin mês retrasado.
http://jquery.malsup.com/corner/

Cristiano Galdino
- http://cristiano.galdino.net/

“Since 2003”

#4 berga

Novato no fórum

Usuários
9 posts

Sexo:Masculino
Localidade:Brasília - DF

Posted 05/08/2010, 15:38

<html>

<head>
	<title>Exemplo - jQuery Corner</title>
	<!-- jQuery e jQuery Corner -->
	<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>

	<script language="JavaScript" type="text/javascript">
	$(function() {
		$('.canto1').corner("rounded 10px");
		$('.canto2').corner('bevel 10px');
		$('.canto3').corner('notch 5px');
		$('.canto4').corner('bite 10px');
	});
	</script>

	<!-- CSS -->
    <style type="text/css">
	div.canto1 { background: red; height: 100px; width: 400px; float: left; margin: 10px }
	div.canto2 { background: blue; height: 200px; width: 300px; float: left; margin: 10px }
	div.canto3 { background: green; height: 300px; width: 200px; float: left; margin: 10px }
	div.canto4 { background: purple; height: 400px; width: 200px; float: left; margin: 10px }
    </style>
</head>

<body>

<div class="canto1">
	<p>Conteúdo</p>
	<p>Conteúdo novo</p>
</div>

<div class="canto2">
	<p>Conteúdo</p>
	<p>Conteúdo novo</p>
</div>

<div class="canto3">
	<p>Conteúdo!</p>
</div>

<div class="canto4">
	<p>Conteúdo</p>
	<p>Conteúdo novo</p>
</div>

</body>

</html>

Utilizei esse codigo ai pra teste e nao ficou com as bordas arredondadas.. me explica uma coisa, tenho que alterar:
<script language="JavaScript" src="http://code.jquery.c...uery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.co...uery.corner.js" type="text/javascript"></script>

ou isso nao se altera? nao compreendi muito bem o codigo! tentar aprender tudo na raça é xxxxxx.. mas conto com a ajuda de vcs de novo! hehehehe

#5 André Manoel

Doutor

Usuários
996 posts

Sexo:Masculino
Localidade:Brasilia

Posted 05/08/2010, 16:30

Você pode fazer o seguinte...
Baixe para a sua máquina o arquivo :

http://github.com/ma...corner.js?v2.09

E você utilizará os links dessa forma:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="sua_pasta_de_javascript/jquery.corner.js?v2.09" type="text/javascript"></script>

Se você quiser baixar a jquery também...
Só procurar no site

http://www.jquery.com

(y)

Iniciando na Ajuda On line...

Posted Image

Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.

#6 berga

Novato no fórum

Usuários
9 posts

Sexo:Masculino
Localidade:Brasília - DF

Posted 06/08/2010, 10:34

Valeeeuuu!!! deu muito certo!!! agora é só achar uma hospedagem gratis que aceite JS.

#7 André Manoel

Doutor

Usuários
996 posts

Sexo:Masculino
Localidade:Brasilia

Posted 06/08/2010, 11:13

Opa........

Deixa eu só te explicar uma coisa meu irmão...

A hospedagem trata de linguagens de servidor.
Por exemplo... você vai encontrar hospedagens que trabalham com ASP, PHP, JSP...
Enfim, linguagens de programação no lado do servidor.

Javascript é uma linguagem que roda no navegador de quem está acessando o site,
então a hospedagem não tem como impedir isso.

Pode colocar no seu site que vai rodar sim...!
Faz o teste lá e diz para gente como ficou!

(y)

Iniciando na Ajuda On line...

Posted Image

Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.

#8 berga

Novato no fórum

Usuários
9 posts

Sexo:Masculino
Localidade:Brasília - DF

Posted 06/08/2010, 14:21

Deu certo... eu que fiz confusão! deu tudo certo!

www.bebubosta.hg1.com.br

#9 ninhovip

Interspire.com.br

Banidos
212 posts

Sexo:Masculino
Localidade:Recife - PE
Interesses:PHP, MySQL, Web 2.0, jQuery, Flash/AS, Photoshop

Posted 06/08/2010, 19:25

Gostei, funciona no IE... milagre...

Interspire Brasil
Tudo p/ Shopping Cart & E-mail Marketer BR
(usehost) Servidores VPS Cloud Computing
SMTP Dedicado | CPanel/WHM | WHMCS4
usehost.com.br | executtivo@msn.com | @filipemtro

#9 ninhovip

3 user(s) are reading this topic

Entrar