Jump to content
kalin

Div com cantos arredondados

Recommended Posts

kalin

É muito fácil obter este estilo só com css:

estilo css:

html {
        height:100%;
margin-bottom:1px;
}
body {
font-family:Arial, Tahoma, Verdana, sans-serif;
font-size: 100%;
font-weight: 400;
background-color: #808080;
text-align: center;/* centraliza a caixa de texto primeira parte */
margin: 0;
padding: 0;
}
div#round {
	width: 350px;
	text-align: left;
	margin: 10px auto 10px;/* centraliza a caixa de texto segunda parte */
	padding: 0;
}
div#round p {
	font-size: 100%;
	font-weight: 400;
	color: #ffffff;
	background: red;
	margin: 0;
	padding: 10px;
}
b.rtop, b.rbottom {
	display: block;
	background: #808080; /*cor branca*/
}
b.rtop b, b.rbottom b{
	display: block;
	height: 1px;
	overflow: hidden;
	background: red;
}
b.r1 {margin:0 5px;}
b.r2 {margin:0 3px;}
b.r3 {margin:0 2px;}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}

código html para o body:

<div id="round">
<!-- cantos de cima-->
<b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
</b>

<p><a href="javascript:history.back(-1)">voltar</a></p>
<p>Algum conteúdo</p>

<!-- cantos de baixo -->
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>

Artigo no Wiki

Share this post


Link to post
Share on other sites
Bjecas

Muito interessante, gostei.

Ainda assim, faz-me impressão usar <b> para isto. Além disso, há um pequenino problema com as esquinas arredondadas, porque o fundo não é transparente (o espaço para lá do vermelho, em cada canto, que teve que ser definido como branco). Isto podia notar-se quando o fundo de um elemento-mãe (no caso, body) não fosse de uma só cor (por exemplo, se fosse uma imagem).

No exemplo abaixo corrigi esse pequeno problema e mudei o <b> para span (piquinhices  :P ).

O HTML e CSS são válidos, e funciona no IE 7, Firefox 2.005 e Opera 9.22 (os únicos que consegui testar) desde que o doctype seja strict (senão há problemas com o overflow).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Round corners</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
div#box {
width: 350px;
text-align: left;
margin: 20px auto 0px;
}

.round span{
display: block;
background: red;
overflow: hidden;
}
.round .r1 {margin:0 5px; height: 1px;}
.round .r2 {margin:0 3px; height: 1px;}
.round .r3 {margin:0 2px; height: 1px;}
.round .r4 {margin:0 1px; height: 2px;}

.conteudo {
background:red;
overflow:hidden;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
    <!-- cantos de cima-->
    <div class="round">
         <span class="r1"></span>
         <span class="r2"></span>
         <span class="r3"></span>
         <span class="r4"></span>
    </div>
    <!-- conteudo -->
    <div class="conteudo">
    <p><a href="javascript:history.back(-1)">voltar</a></p>
    <p>Algum conteúdo</p>
    </div>
    <!-- cantos de baixo -->
    <div class="round">
         <span class="r4"></span>
         <span class="r3"></span>
         <span class="r2"></span>
         <span class="r1"></span>
    </div>
</div>

</body>
</html>

Share this post


Link to post
Share on other sites
jreis
(...)Ainda assim, faz-me impressão usar <b> para isto.(...)

O uso do <b> é fixe porque é um elemento que está a cair em desuso, portanto em termos de estilos estás a vontade, já sabes que á partida os únicos elementos <b> que vais ter vão fazer parte dos cantos redondos.

EDIT: cosmética.


"Pensa positivo: tudo pode piorar"

Share this post


Link to post
Share on other sites
Rui Carlos

quando tiver tempo, vou ver se experimento isso, normalmente recorro a imagens para conseguir este efeito, o que dá bastante trabalho, para além de obrigar a usar muitas imagens no site...

Share this post


Link to post
Share on other sites
kalin

O uso do <b> foi mesmo para só ser usado nos cantos e em mais lado nenhum, quanto à dica do colega Bjecas do fundo ser transparente, posso dizer que ficou bem melhor obrigado.

Share this post


Link to post
Share on other sites
LuPereira

Muito bom o código.

Facilita no carregamento da página, uma vez que não usa imagens.

Cumps.

Share this post


Link to post
Share on other sites
kalin

Penso que dá se variarmos estes parâmetros:

.round .r1 {margin:0 5px; height: 1px;}
.round .r2 {margin:0 3px; height: 1px;}
.round .r3 {margin:0 2px; height: 1px;}
.round .r4 {margin:0 1px; height: 2px;}

mas para obter um estilo bem redondo penso que seja necessário usar mais declarações, estive a olhar para o código nifty http://www.html.it/articoli/niftycube/index.html que é bem complicado, mas o estilo obtido também é diferente:

b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{
display:block;
height: 1px;
line-height:1px;
font-size: 1px;
    overflow:hidden;
border-style:solid;
border-width: 0 1px;}

/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px;}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}

/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

Share this post


Link to post
Share on other sites
NCS_One

Ois

Para aumentares a curvatura do canto (usando o exemplo com DIVs) basta aumentares o numero de DIVs, por exemplo no exemplo do niftycube ele para fazer

um canto normal usa 4 estilos r1, r2, r3, r4. Para fazer um canto grande usa os rb1 a rb8 se quiseres fazer como ele basta em vez de 4 DIVs pores 8 e dás a cada

um deles o seu estilo(de rb1 a rb8).


Se a vida te voltar as costas aproveita e apalpa-lhe o cu.

Share this post


Link to post
Share on other sites
Bjecas

O uso do <b> é fixe porque é um elemento que está a cair em desuso, portanto em termos de estilos estás a vontade, já sabes que á partida os únicos elementos <b> que vais ter vão fazer parte dos cantos redondos.

Exacto, penso que o termo correcto é "deprecated". Isso quer dizer que em algum ponto no futuro podem desaparecer, e o código deixava de servir :P

Enfim, isto é daquelas minhas picuinhices, hehe.

Quanto a aumentar a curvatura, como muito bem foi dito, é só aumentar a quantidade de spans com cada vez com maiores heights. O que poderias fazer é criar um canto arredondado no Photoshop por exemplo, ao teu gosto, e depois fazer zoom até veres os pixeis. Contas quantos espaços brancos tem cada linha, multiplicas por dois e tens o border-width para essa linha! (Nota: não podes é usar "anti-alising" ao criar o canto, têm que ser pixeis "sólidos").

Share this post


Link to post
Share on other sites
Rui Carlos

Pegando no código do Bjecas, criei uma versão para cantos maiores.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Round corners</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
div#box {
width: 350px;
text-align: left;
margin: 20px auto 0px;
}

.round span{
display: block;
background: red;
overflow: hidden;
}

.conteudo {
background:red;
overflow:hidden;
padding:10px;
}


/*normal*/
.round .r0 {margin: 0  1px; height: 3px}
.round .r1 {margin: 0  2px; height: 2px}
.round .r2 {margin: 0  3px; height: 2px;}
.round .r3 {margin: 0  4px; height: 1px;}
.round .r4 {margin: 0  5px; height: 1px;}
.round .r5 {margin: 0  6px; height: 1px;}
.round .r6 {margin: 0  7px; height: 1px;}
.round .r7 {margin: 0  9px; height: 1px;}
.round .r8 {margin: 0 11px; height: 1px;}
.round .r9 {margin: 0 14px; height: 1px;}
</style>
</head>
<body>
<div id="box">
    <div class="round">
         <span class="r9"></span>
         <span class="r8"></span>
         <span class="r7"></span>
         <span class="r6"></span>
         <span class="r5"></span>
         <span class="r4"></span>
         <span class="r3"></span>
         <span class="r2"></span>
         <span class="r1"></span>
         <span class="r0"></span>
    </div>
    <div class="conteudo">
    <p>Algum conteúdo</p>
    </div>
    <div class="round">
         <span class="r0"></span>
         <span class="r1"></span>
         <span class="r2"></span>
         <span class="r3"></span>
         <span class="r4"></span>
         <span class="r5"></span>
         <span class="r6"></span>
         <span class="r7"></span>
         <span class="r8"></span>
         <span class="r9"></span>
    </div>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites
djthyrax

Só funciona em Firefox certo?!

Em todos os browsers que usem a Gecko engine, sim.

Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Share this post


Link to post
Share on other sites
Gurzi

Isso é um bocado mau,  o grande dilema do CSS é sempre a porcaria do engine da Microsoft.

Usar isso não cria solução nenhuma, a não ser que utilizes comentários condicionais com recurso a diferentes CSS que se torna uma grande SECA!

Share this post


Link to post
Share on other sites
Rui Carlos

Eu não coloco a questão de se o IE suporta ou não, para mim o que interessa é se isso está nos standards do CSS. Se não está, está fora de questão usar isso.

Share this post


Link to post
Share on other sites
djthyrax

Eu não coloco a questão de se o IE suporta ou não, para mim o que interessa é se isso está nos standards do CSS. Se não está, está fora de questão usar isso.

Está no draft do CSS3. :D

Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Share this post


Link to post
Share on other sites
joaoqalves

Que até chegar a recomendação, ainda deve ter um longo caminho a percorrer.

CSS3 só vai ajudar neste tipo de coisas que agora só é possível fugindo aos standars ou "brincando" com imagens, mas daqui a lá temos que nos aguentar :D


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!Queres estar na moda? Utiliza a pesquisa e evita criar um tópico desnecessário.

Share this post


Link to post
Share on other sites
Rui Carlos

A solução aqui apresentada não é exactamente brincar com imagens, nem fugir ao standards (no entanto, é capaz de ter algumas limitações que os outros métodos não têm).

Share this post


Link to post
Share on other sites
joaoqalves

A solução aqui apresentada não é exactamente brincar com imagens, nem fugir ao standards (no entanto, é capaz de ter algumas limitações que os outros métodos não têm).

Mas é uma solução um pouco 'bruta'  pois são precisos alguns span's e fica um pouco 'feio'

just my two cents


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!Queres estar na moda? Utiliza a pesquisa e evita criar um tópico desnecessário.

Share this post


Link to post
Share on other sites
MX+

Embora fique bonito, para sites minimamente com tráfego, penso que é um exagero estas técnicas.

Para um div é preciso enviar pelo menos 8 tags, que tornam o HTML enviado maior, mais pesado de renderizar etc.

Acho que tem de se encontrar equilibrios entre design/performance. Eu aconselho a usar as propriedades do gecko e do safari, e deixar os cantos rectos para outros browsers.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.