Ir para conteúdo

Arquivado

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

brcontainer

bordas arredondadas em CSS

Por , em Desenvolvimento frontend

Recommended Posts

brcontainer    16

brcontainer
Postado

eu procurei bordas arredondadas em CSS

porem a maioria funcionava em determinado navegador e em outro não

fiquei complicado mas por sorte na procura da "solução para min-width no IE"

achei esse sem querer

 

ele é meio grande para aplicar mas pelo menos funcionou em varios navegadores

testado:FF,opera,ie,safari e netscap(windows)

<style>
.b1 {
height:1px;
font-size:1px;
background:#aaa;
margin:0 5px;
}
.b2 {
height:1px;
font-size:1px;
background:#fff;
border-right:2px solid #aaa;
border-left:2px solid #aaa;
margin:0 3px;
}
.b3 {
height:1px;
font-size:1px;
background:#fff;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
margin:0 2px;
}
.b4 {height:2px;
font-size:1px;
background:#fff;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
margin:0 1px;
}
.b5 {
border-left:1px solid #aaa;
border-right:1px solid #aaa;
display:block;
}
</style>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5">
texto<br>
texto<br>
texto<br>
texto<br>
texto<br>
texto<br>
texto<br>
</div>
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>

é só uma dica acaso alguem tenha uma solução "menor" ou melhor aplicada

posta ae

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

É uma dica porreira :D, porém usa-se muitas div's :S.

Nunca mais saí o CSS3 :D. Eu prefiro esperar por ele :P.

 

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

DBB    0

DBB
Postado

Eu uso o jquery + jquery corner, faz que é uma beleza sem imagens, agora não sei se é interessante pra você usar o jquery somente para isso, pra mim é otimo porque uso ele pra muitas coisas.

 

 

Falow

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Eu uso o jquery + jquery corner, faz que é uma beleza sem imagens, agora não sei se é interessante pra você usar o jquery somente para isso, pra mim é otimo porque uso ele pra muitas coisas.

 

 

Falow

meu interesse tbm é ser independente do JAVASCRIPT se for pra usar algo a mais do CSS

eu prefiro imagem vai que o cara desabilita o javascript do navegador =[

você não concorda?

 

essa dica que eu passei é opcional eu dou preferencia a trabalhar com "imagens" ou a CSS puro (mesmo q seja meio poluido)

e hoje em dia para layouts evito javascript a não ser q o site seja extremante necessario o uso de JS ae eu posso usar

tbm no layout =]

 

hehe valew por comentar danilo sua dica tbm é boa, mas mesmo assim prefiro só CSS mesmo

Compartilhar este post

Link para o post
Compartilhar em outros sites

klawdyo    0

klawdyo
Postado

é só substituir as DIVs por <b>, por exemplo, e colocar o display:block.

Façam o teste aí.

 

Adicionalmente, vejam o tutorial nesse site, ele é completo. Mostra como fazer com várias divs posicionadas lado a lado, mostra como pôr degradê, como atualizar todas as divs de uma classe automaticamente por JS... é muito massa.. <momento gay> eu só faltei chorar só por um olho quando eu vi... foi lindo... </momento gay>

segue o link: http://www.html.it/articoli/nifty/index.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

jeovajunior    0

jeovajunior
Postado

Tenta isso

<style type="text/css">
	
	body{
		font-size:8pt;
		color: #333333;
		font-family: verdana, arial, helvetica;
	}
	.cajaarriba{
		width: 600px;
		background-image: url("arriba.gif");
		background-position: top center;
		background-repeat: no-repeat;
		background-color: #660000;
		color: #ffffff;
	}
	.cajaabajo {
		background-image: url("abajo.gif");
		background-position: bottom left;
		background-repeat: no-repeat;
		padding: 5px 5px 5px 5px;
	}
	</style>
	
</head>

<body>

<div class="texto">
	<div class="texto">
	<p>texto aqui</p>
				
	<p>final do texto aqui</p>		</div>
</div>
Espero q ajude http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

tirado do site:criarweb

flow

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

isso é com imagem jeovajunior e o assunto aqui é sem as imagens

aqui é uma sessão de tutoriais e ideias

leia os poste e você ira obeservar oque foi comentado

 

com IMAGEM e JAVASCRIPT nós ja tinhamos a ideia era mostrar com

CSS puro entendeu?

 

abraço e feliz ano novo ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ravani    0

Ravani
Postado

Maneiro, valeu!! Mas aqui, nesses casos, seria legal mostrar um modelinho pra gente ter uma idéia do que vai encontrar :D

 

valeu!

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